@skippr/live-agent-sdk 0.45.0 → 0.47.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/lib-exports.js +1150 -1178
- package/dist/skippr-sdk.css +1 -1
- package/dist/skippr-sdk.js +150 -150
- package/dist/types/components/AdoptionBubble.d.ts +4 -2
- package/dist/types/components/ModulePill.d.ts +13 -0
- package/dist/types/components/SessionControlBar.d.ts +1 -0
- package/dist/types/context/LiveAgentContext.d.ts +12 -1
- package/dist/types/hooks/useAdoptionGoals.d.ts +0 -1
- package/dist/types/hooks/useAvailableModules.d.ts +1 -0
- package/dist/types/hooks/useMicLevel.d.ts +6 -0
- package/dist/types/hooks/useTextMode.d.ts +5 -0
- package/dist/types/lib/constants.d.ts +1 -0
- package/dist/types/lib/hashMatch.d.ts +2 -0
- package/package.json +1 -1
- package/dist/types/components/LauncherStatusPill.d.ts +0 -1
- package/dist/types/components/MeetingControls.d.ts +0 -10
- package/dist/types/components/ModuleSelector.d.ts +0 -1
package/dist/esm/lib-exports.js
CHANGED
|
@@ -8,14 +8,35 @@ 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 useCallback11, useEffect as useEffect20, useMemo as useMemo6, useRef as useRef15, useState as useState16 } from "react";
|
|
12
12
|
|
|
13
13
|
// src/context/LiveAgentContext.tsx
|
|
14
14
|
import { createContext } from "react";
|
|
15
15
|
var LiveAgentContext = createContext(null);
|
|
16
16
|
|
|
17
17
|
// src/hooks/useAdoptionGoals.ts
|
|
18
|
-
import { useCallback, useEffect, useState } from "react";
|
|
18
|
+
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
19
|
+
|
|
20
|
+
// src/lib/hashMatch.ts
|
|
21
|
+
function globToRegExp(pattern) {
|
|
22
|
+
const escaped = pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&").replace(/\\\*\\\*/g, ".*").replace(/\\\*/g, "[^/]*");
|
|
23
|
+
return new RegExp(`^${escaped}$`);
|
|
24
|
+
}
|
|
25
|
+
function normalizeHash(rawHash) {
|
|
26
|
+
return rawHash.replace(/^#/, "").toLowerCase();
|
|
27
|
+
}
|
|
28
|
+
function matchesHash(rawHash, matchType, hashPattern) {
|
|
29
|
+
const hash = normalizeHash(rawHash);
|
|
30
|
+
const pattern = hashPattern.toLowerCase();
|
|
31
|
+
switch (matchType) {
|
|
32
|
+
case "exact" /* Exact */:
|
|
33
|
+
return hash === pattern;
|
|
34
|
+
case "prefix" /* Prefix */:
|
|
35
|
+
return hash.startsWith(pattern);
|
|
36
|
+
case "glob" /* Glob */:
|
|
37
|
+
return globToRegExp(pattern).test(hash);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
19
40
|
|
|
20
41
|
// src/lib/navigation.ts
|
|
21
42
|
var listeners = new Set;
|
|
@@ -62,7 +83,8 @@ function useAdoptionGoals({
|
|
|
62
83
|
bearerToken,
|
|
63
84
|
authedFetch
|
|
64
85
|
}) {
|
|
65
|
-
const [
|
|
86
|
+
const [candidates, setCandidates] = useState([]);
|
|
87
|
+
const [hash, setHash] = useState(window.location.hash);
|
|
66
88
|
const match = useCallback(async () => {
|
|
67
89
|
try {
|
|
68
90
|
const resp = await authedFetch(`${API_URL}/v1/adoption/goals/match`, {
|
|
@@ -71,28 +93,30 @@ function useAdoptionGoals({
|
|
|
71
93
|
body: JSON.stringify({ url: window.location.origin + window.location.pathname })
|
|
72
94
|
});
|
|
73
95
|
if (!resp.ok) {
|
|
74
|
-
|
|
96
|
+
setCandidates([]);
|
|
75
97
|
return;
|
|
76
98
|
}
|
|
77
99
|
const data = await resp.json();
|
|
78
|
-
|
|
100
|
+
setCandidates(Array.isArray(data?.goals) ? data.goals : []);
|
|
79
101
|
} catch (e) {
|
|
80
102
|
console.warn("[Skippr] adoption match failed", e);
|
|
81
|
-
|
|
103
|
+
setCandidates([]);
|
|
82
104
|
}
|
|
83
105
|
}, [authedFetch]);
|
|
84
106
|
useEffect(() => {
|
|
85
107
|
if (!enabled || !bearerToken) {
|
|
86
|
-
|
|
108
|
+
setCandidates([]);
|
|
87
109
|
return;
|
|
88
110
|
}
|
|
89
111
|
match();
|
|
90
112
|
let lastPath = window.location.pathname;
|
|
91
113
|
let timer;
|
|
92
114
|
const unsubscribe = subscribeToLocationChange(() => {
|
|
115
|
+
setHash(window.location.hash);
|
|
93
116
|
if (window.location.pathname === lastPath)
|
|
94
117
|
return;
|
|
95
118
|
lastPath = window.location.pathname;
|
|
119
|
+
setCandidates([]);
|
|
96
120
|
if (timer)
|
|
97
121
|
clearTimeout(timer);
|
|
98
122
|
timer = setTimeout(() => {
|
|
@@ -105,6 +129,12 @@ function useAdoptionGoals({
|
|
|
105
129
|
unsubscribe();
|
|
106
130
|
};
|
|
107
131
|
}, [enabled, bearerToken, match]);
|
|
132
|
+
const goals = useMemo(() => {
|
|
133
|
+
const hashSpecific = candidates.filter((goal) => goal.hashPattern !== null && matchesHash(hash, goal.matchType, goal.hashPattern));
|
|
134
|
+
if (hashSpecific.length > 0)
|
|
135
|
+
return hashSpecific;
|
|
136
|
+
return candidates.filter((goal) => goal.hashPattern === null);
|
|
137
|
+
}, [candidates, hash]);
|
|
108
138
|
const postStatus = useCallback((goalId, status) => {
|
|
109
139
|
authedFetch(`${API_URL}/v1/adoption/goals/${goalId}/status`, {
|
|
110
140
|
method: "POST",
|
|
@@ -112,14 +142,10 @@ function useAdoptionGoals({
|
|
|
112
142
|
body: JSON.stringify({ status })
|
|
113
143
|
}).catch((e) => console.warn("[Skippr] adoption status update failed", e));
|
|
114
144
|
}, [authedFetch]);
|
|
115
|
-
const dismissGoal = useCallback((goalId) => {
|
|
116
|
-
setGoals((prev) => prev.filter((goal) => goal.goalId !== goalId));
|
|
117
|
-
postStatus(goalId, "dismissed" /* Dismissed */);
|
|
118
|
-
}, [postStatus]);
|
|
119
145
|
const attendGoal = useCallback((goalId) => {
|
|
120
146
|
postStatus(goalId, "attended" /* Attended */);
|
|
121
147
|
}, [postStatus]);
|
|
122
|
-
return { goals,
|
|
148
|
+
return { goals, attendGoal };
|
|
123
149
|
}
|
|
124
150
|
|
|
125
151
|
// src/hooks/useAuth.ts
|
|
@@ -285,9 +311,11 @@ function useAvailableModules({
|
|
|
285
311
|
}) {
|
|
286
312
|
const [modules, setModules] = useState3([]);
|
|
287
313
|
const [isLoading, setIsLoading] = useState3(false);
|
|
314
|
+
const [hasResolved, setHasResolved] = useState3(false);
|
|
288
315
|
const [error, setError] = useState3(null);
|
|
289
316
|
const fetchModules = useCallback3(async () => {
|
|
290
317
|
setIsLoading(true);
|
|
318
|
+
setHasResolved(false);
|
|
291
319
|
setError(null);
|
|
292
320
|
try {
|
|
293
321
|
const resp = await authedFetch(`${API_URL3}/v1/modules/available`);
|
|
@@ -301,6 +329,7 @@ function useAvailableModules({
|
|
|
301
329
|
setError(e instanceof Error ? e.message : "Failed to load modules");
|
|
302
330
|
} finally {
|
|
303
331
|
setIsLoading(false);
|
|
332
|
+
setHasResolved(true);
|
|
304
333
|
}
|
|
305
334
|
}, [authedFetch]);
|
|
306
335
|
useEffect3(() => {
|
|
@@ -311,6 +340,7 @@ function useAvailableModules({
|
|
|
311
340
|
return {
|
|
312
341
|
modules,
|
|
313
342
|
isLoading,
|
|
343
|
+
hasResolved,
|
|
314
344
|
error,
|
|
315
345
|
refetch: fetchModules
|
|
316
346
|
};
|
|
@@ -649,13 +679,6 @@ function useSession({
|
|
|
649
679
|
};
|
|
650
680
|
}
|
|
651
681
|
|
|
652
|
-
// src/lib/agentMode.ts
|
|
653
|
-
var AGENT_MODE = {
|
|
654
|
-
Standard: "standard",
|
|
655
|
-
AlwaysOn: "always_on"
|
|
656
|
-
};
|
|
657
|
-
var AGENT_MODES = Object.values(AGENT_MODE);
|
|
658
|
-
|
|
659
682
|
// src/lib/constants.ts
|
|
660
683
|
var SIDEBAR_WIDTH = 360;
|
|
661
684
|
var WIDGET_ROOT_ID = "skippr-sdk-root";
|
|
@@ -665,8 +688,16 @@ var DOM_SNAPSHOT_TOPIC = "skippr.dom-snapshot";
|
|
|
665
688
|
var DOM_EVENTS_TOPIC = "skippr.dom-events";
|
|
666
689
|
var HIGHLIGHT_TOPIC = "skippr.highlight";
|
|
667
690
|
var PAGE_ACTIONS_TOPIC = "skippr.page-actions";
|
|
691
|
+
var TEXT_MODE_TOPIC = "skippr.text-mode";
|
|
668
692
|
var NAME_MAX_CHARS = 80;
|
|
669
693
|
|
|
694
|
+
// src/lib/agentMode.ts
|
|
695
|
+
var AGENT_MODE = {
|
|
696
|
+
Standard: "standard",
|
|
697
|
+
AlwaysOn: "always_on"
|
|
698
|
+
};
|
|
699
|
+
var AGENT_MODES = Object.values(AGENT_MODE);
|
|
700
|
+
|
|
670
701
|
// src/lib/sessionStatus.ts
|
|
671
702
|
var SESSION_STATUS = {
|
|
672
703
|
pending: "pending",
|
|
@@ -1673,7 +1704,7 @@ var hasA11yProp = (props) => {
|
|
|
1673
1704
|
};
|
|
1674
1705
|
|
|
1675
1706
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/context.js
|
|
1676
|
-
import { createContext as createContext2, useContext, useMemo, createElement } from "react";
|
|
1707
|
+
import { createContext as createContext2, useContext, useMemo as useMemo2, createElement } from "react";
|
|
1677
1708
|
var LucideContext = createContext2({});
|
|
1678
1709
|
var useLucideContext = () => useContext(LucideContext);
|
|
1679
1710
|
|
|
@@ -1745,16 +1776,12 @@ var __iconNode4 = [
|
|
|
1745
1776
|
["circle", { cx: "4", cy: "20", r: "2", key: "6kqj1y" }]
|
|
1746
1777
|
];
|
|
1747
1778
|
var Sparkles = createLucideIcon("sparkles", __iconNode4);
|
|
1748
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/
|
|
1779
|
+
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/arrow-right.js
|
|
1749
1780
|
var __iconNode5 = [
|
|
1750
|
-
["path", { d: "
|
|
1751
|
-
["
|
|
1752
|
-
["path", { d: "M2 14h2", key: "vft8re" }],
|
|
1753
|
-
["path", { d: "M20 14h2", key: "4cs60a" }],
|
|
1754
|
-
["path", { d: "M15 13v2", key: "1xurst" }],
|
|
1755
|
-
["path", { d: "M9 13v2", key: "rq6x2g" }]
|
|
1781
|
+
["path", { d: "M5 12h14", key: "1ays0h" }],
|
|
1782
|
+
["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
|
|
1756
1783
|
];
|
|
1757
|
-
var
|
|
1784
|
+
var ArrowRight = createLucideIcon("arrow-right", __iconNode5);
|
|
1758
1785
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/calendar.js
|
|
1759
1786
|
var __iconNode6 = [
|
|
1760
1787
|
["path", { d: "M8 2v4", key: "1cmpym" }],
|
|
@@ -1769,45 +1796,27 @@ var ChevronDown = createLucideIcon("chevron-down", __iconNode7);
|
|
|
1769
1796
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/circle.js
|
|
1770
1797
|
var __iconNode8 = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
|
|
1771
1798
|
var Circle = createLucideIcon("circle", __iconNode8);
|
|
1772
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/
|
|
1799
|
+
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/lightbulb.js
|
|
1773
1800
|
var __iconNode9 = [
|
|
1774
|
-
["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
|
|
1775
|
-
["path", { d: "M12 6v6l4 2", key: "mmk7yg" }]
|
|
1776
|
-
];
|
|
1777
|
-
var Clock = createLucideIcon("clock", __iconNode9);
|
|
1778
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/graduation-cap.js
|
|
1779
|
-
var __iconNode10 = [
|
|
1780
|
-
[
|
|
1781
|
-
"path",
|
|
1782
|
-
{
|
|
1783
|
-
d: "M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z",
|
|
1784
|
-
key: "j76jl0"
|
|
1785
|
-
}
|
|
1786
|
-
],
|
|
1787
|
-
["path", { d: "M22 10v6", key: "1lu8f3" }],
|
|
1788
|
-
["path", { d: "M6 12.5V16a6 3 0 0 0 12 0v-3.5", key: "1r8lef" }]
|
|
1789
|
-
];
|
|
1790
|
-
var GraduationCap = createLucideIcon("graduation-cap", __iconNode10);
|
|
1791
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/headset.js
|
|
1792
|
-
var __iconNode11 = [
|
|
1793
1801
|
[
|
|
1794
1802
|
"path",
|
|
1795
1803
|
{
|
|
1796
|
-
d: "
|
|
1797
|
-
key: "
|
|
1804
|
+
d: "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5",
|
|
1805
|
+
key: "1gvzjb"
|
|
1798
1806
|
}
|
|
1799
1807
|
],
|
|
1800
|
-
["path", { d: "
|
|
1808
|
+
["path", { d: "M9 18h6", key: "x1upvd" }],
|
|
1809
|
+
["path", { d: "M10 22h4", key: "ceow96" }]
|
|
1801
1810
|
];
|
|
1802
|
-
var
|
|
1811
|
+
var Lightbulb = createLucideIcon("lightbulb", __iconNode9);
|
|
1803
1812
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mail.js
|
|
1804
|
-
var
|
|
1813
|
+
var __iconNode10 = [
|
|
1805
1814
|
["path", { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7", key: "132q7q" }],
|
|
1806
1815
|
["rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", key: "izxlao" }]
|
|
1807
1816
|
];
|
|
1808
|
-
var Mail = createLucideIcon("mail",
|
|
1817
|
+
var Mail = createLucideIcon("mail", __iconNode10);
|
|
1809
1818
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-circle.js
|
|
1810
|
-
var
|
|
1819
|
+
var __iconNode11 = [
|
|
1811
1820
|
[
|
|
1812
1821
|
"path",
|
|
1813
1822
|
{
|
|
@@ -1816,9 +1825,9 @@ var __iconNode13 = [
|
|
|
1816
1825
|
}
|
|
1817
1826
|
]
|
|
1818
1827
|
];
|
|
1819
|
-
var MessageCircle = createLucideIcon("message-circle",
|
|
1828
|
+
var MessageCircle = createLucideIcon("message-circle", __iconNode11);
|
|
1820
1829
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-square.js
|
|
1821
|
-
var
|
|
1830
|
+
var __iconNode12 = [
|
|
1822
1831
|
[
|
|
1823
1832
|
"path",
|
|
1824
1833
|
{
|
|
@@ -1827,9 +1836,9 @@ var __iconNode14 = [
|
|
|
1827
1836
|
}
|
|
1828
1837
|
]
|
|
1829
1838
|
];
|
|
1830
|
-
var MessageSquare = createLucideIcon("message-square",
|
|
1839
|
+
var MessageSquare = createLucideIcon("message-square", __iconNode12);
|
|
1831
1840
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic-off.js
|
|
1832
|
-
var
|
|
1841
|
+
var __iconNode13 = [
|
|
1833
1842
|
["path", { d: "M12 19v3", key: "npa21l" }],
|
|
1834
1843
|
["path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33", key: "1gzdoj" }],
|
|
1835
1844
|
["path", { d: "M16.95 16.95A7 7 0 0 1 5 12v-2", key: "cqa7eg" }],
|
|
@@ -1837,40 +1846,40 @@ var __iconNode15 = [
|
|
|
1837
1846
|
["path", { d: "m2 2 20 20", key: "1ooewy" }],
|
|
1838
1847
|
["path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12", key: "r2i35w" }]
|
|
1839
1848
|
];
|
|
1840
|
-
var MicOff = createLucideIcon("mic-off",
|
|
1849
|
+
var MicOff = createLucideIcon("mic-off", __iconNode13);
|
|
1841
1850
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic.js
|
|
1842
|
-
var
|
|
1851
|
+
var __iconNode14 = [
|
|
1843
1852
|
["path", { d: "M12 19v3", key: "npa21l" }],
|
|
1844
1853
|
["path", { d: "M19 10v2a7 7 0 0 1-14 0v-2", key: "1vc78b" }],
|
|
1845
1854
|
["rect", { x: "9", y: "2", width: "6", height: "13", rx: "3", key: "s6n7sd" }]
|
|
1846
1855
|
];
|
|
1847
|
-
var Mic = createLucideIcon("mic",
|
|
1856
|
+
var Mic = createLucideIcon("mic", __iconNode14);
|
|
1848
1857
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/minimize-2.js
|
|
1849
|
-
var
|
|
1858
|
+
var __iconNode15 = [
|
|
1850
1859
|
["path", { d: "m14 10 7-7", key: "oa77jy" }],
|
|
1851
1860
|
["path", { d: "M20 10h-6V4", key: "mjg0md" }],
|
|
1852
1861
|
["path", { d: "m3 21 7-7", key: "tjx5ai" }],
|
|
1853
1862
|
["path", { d: "M4 14h6v6", key: "rmj7iw" }]
|
|
1854
1863
|
];
|
|
1855
|
-
var Minimize2 = createLucideIcon("minimize-2",
|
|
1864
|
+
var Minimize2 = createLucideIcon("minimize-2", __iconNode15);
|
|
1856
1865
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor-off.js
|
|
1857
|
-
var
|
|
1866
|
+
var __iconNode16 = [
|
|
1858
1867
|
["path", { d: "M12 17v4", key: "1riwvh" }],
|
|
1859
1868
|
["path", { d: "M17 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 1.184-1.826", key: "cv7jms" }],
|
|
1860
1869
|
["path", { d: "m2 2 20 20", key: "1ooewy" }],
|
|
1861
1870
|
["path", { d: "M8 21h8", key: "1ev6f3" }],
|
|
1862
1871
|
["path", { d: "M8.656 3H20a2 2 0 0 1 2 2v10a2 2 0 0 1-.293 1.042", key: "z8ni2w" }]
|
|
1863
1872
|
];
|
|
1864
|
-
var MonitorOff = createLucideIcon("monitor-off",
|
|
1873
|
+
var MonitorOff = createLucideIcon("monitor-off", __iconNode16);
|
|
1865
1874
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor.js
|
|
1866
|
-
var
|
|
1875
|
+
var __iconNode17 = [
|
|
1867
1876
|
["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
|
|
1868
1877
|
["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
|
|
1869
1878
|
["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
|
|
1870
1879
|
];
|
|
1871
|
-
var Monitor = createLucideIcon("monitor",
|
|
1880
|
+
var Monitor = createLucideIcon("monitor", __iconNode17);
|
|
1872
1881
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mouse-pointer-2.js
|
|
1873
|
-
var
|
|
1882
|
+
var __iconNode18 = [
|
|
1874
1883
|
[
|
|
1875
1884
|
"path",
|
|
1876
1885
|
{
|
|
@@ -1879,65 +1888,9 @@ var __iconNode20 = [
|
|
|
1879
1888
|
}
|
|
1880
1889
|
]
|
|
1881
1890
|
];
|
|
1882
|
-
var MousePointer2 = createLucideIcon("mouse-pointer-2",
|
|
1883
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/pause.js
|
|
1884
|
-
var __iconNode21 = [
|
|
1885
|
-
["rect", { x: "14", y: "3", width: "5", height: "18", rx: "1", key: "kaeet6" }],
|
|
1886
|
-
["rect", { x: "5", y: "3", width: "5", height: "18", rx: "1", key: "1wsw3u" }]
|
|
1887
|
-
];
|
|
1888
|
-
var Pause = createLucideIcon("pause", __iconNode21);
|
|
1889
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/phone-off.js
|
|
1890
|
-
var __iconNode22 = [
|
|
1891
|
-
[
|
|
1892
|
-
"path",
|
|
1893
|
-
{
|
|
1894
|
-
d: "M10.1 13.9a14 14 0 0 0 3.732 2.668 1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2 18 18 0 0 1-12.728-5.272",
|
|
1895
|
-
key: "1wngk7"
|
|
1896
|
-
}
|
|
1897
|
-
],
|
|
1898
|
-
["path", { d: "M22 2 2 22", key: "y4kqgn" }],
|
|
1899
|
-
[
|
|
1900
|
-
"path",
|
|
1901
|
-
{
|
|
1902
|
-
d: "M4.76 13.582A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 .244.473",
|
|
1903
|
-
key: "10hv5p"
|
|
1904
|
-
}
|
|
1905
|
-
]
|
|
1906
|
-
];
|
|
1907
|
-
var PhoneOff = createLucideIcon("phone-off", __iconNode22);
|
|
1908
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/play.js
|
|
1909
|
-
var __iconNode23 = [
|
|
1910
|
-
[
|
|
1911
|
-
"path",
|
|
1912
|
-
{
|
|
1913
|
-
d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",
|
|
1914
|
-
key: "10ikf1"
|
|
1915
|
-
}
|
|
1916
|
-
]
|
|
1917
|
-
];
|
|
1918
|
-
var Play = createLucideIcon("play", __iconNode23);
|
|
1919
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/rocket.js
|
|
1920
|
-
var __iconNode24 = [
|
|
1921
|
-
["path", { d: "M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5", key: "qeys4" }],
|
|
1922
|
-
[
|
|
1923
|
-
"path",
|
|
1924
|
-
{
|
|
1925
|
-
d: "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09",
|
|
1926
|
-
key: "u4xsad"
|
|
1927
|
-
}
|
|
1928
|
-
],
|
|
1929
|
-
[
|
|
1930
|
-
"path",
|
|
1931
|
-
{
|
|
1932
|
-
d: "M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z",
|
|
1933
|
-
key: "676m9"
|
|
1934
|
-
}
|
|
1935
|
-
],
|
|
1936
|
-
["path", { d: "M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05", key: "92ym6u" }]
|
|
1937
|
-
];
|
|
1938
|
-
var Rocket = createLucideIcon("rocket", __iconNode24);
|
|
1891
|
+
var MousePointer2 = createLucideIcon("mouse-pointer-2", __iconNode18);
|
|
1939
1892
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/send.js
|
|
1940
|
-
var
|
|
1893
|
+
var __iconNode19 = [
|
|
1941
1894
|
[
|
|
1942
1895
|
"path",
|
|
1943
1896
|
{
|
|
@@ -1947,21 +1900,13 @@ var __iconNode25 = [
|
|
|
1947
1900
|
],
|
|
1948
1901
|
["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
|
|
1949
1902
|
];
|
|
1950
|
-
var Send = createLucideIcon("send",
|
|
1951
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/user-plus.js
|
|
1952
|
-
var __iconNode26 = [
|
|
1953
|
-
["path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", key: "1yyitq" }],
|
|
1954
|
-
["circle", { cx: "9", cy: "7", r: "4", key: "nufk8" }],
|
|
1955
|
-
["line", { x1: "19", x2: "19", y1: "8", y2: "14", key: "1bvyxn" }],
|
|
1956
|
-
["line", { x1: "22", x2: "16", y1: "11", y2: "11", key: "1shjgl" }]
|
|
1957
|
-
];
|
|
1958
|
-
var UserPlus = createLucideIcon("user-plus", __iconNode26);
|
|
1903
|
+
var Send = createLucideIcon("send", __iconNode19);
|
|
1959
1904
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/x.js
|
|
1960
|
-
var
|
|
1905
|
+
var __iconNode20 = [
|
|
1961
1906
|
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
|
|
1962
1907
|
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
|
|
1963
1908
|
];
|
|
1964
|
-
var X = createLucideIcon("x",
|
|
1909
|
+
var X = createLucideIcon("x", __iconNode20);
|
|
1965
1910
|
// src/components/HighlightOverlay.tsx
|
|
1966
1911
|
import { useCallback as useCallback5, useEffect as useEffect7, useRef as useRef4, useState as useState5 } from "react";
|
|
1967
1912
|
|
|
@@ -2198,60 +2143,7 @@ function HighlightOverlay() {
|
|
|
2198
2143
|
}
|
|
2199
2144
|
|
|
2200
2145
|
// src/components/MinimizedBubble.tsx
|
|
2201
|
-
import { useContext as
|
|
2202
|
-
|
|
2203
|
-
// src/hooks/useLiveAgent.ts
|
|
2204
|
-
import { useContext as useContext2 } from "react";
|
|
2205
|
-
function useLiveAgent() {
|
|
2206
|
-
const ctx = useContext2(LiveAgentContext);
|
|
2207
|
-
if (!ctx) {
|
|
2208
|
-
throw new Error("useLiveAgent must be used within a <LiveAgent> provider");
|
|
2209
|
-
}
|
|
2210
|
-
const {
|
|
2211
|
-
usesHostAuth,
|
|
2212
|
-
authFailed,
|
|
2213
|
-
connection,
|
|
2214
|
-
shouldConnect,
|
|
2215
|
-
historyMessages,
|
|
2216
|
-
phasesSnapshot,
|
|
2217
|
-
setPhasesSnapshot,
|
|
2218
|
-
adoptionGoals,
|
|
2219
|
-
dismissAdoptionGoal,
|
|
2220
|
-
startAdoptionSession,
|
|
2221
|
-
...publicValue
|
|
2222
|
-
} = ctx;
|
|
2223
|
-
return publicValue;
|
|
2224
|
-
}
|
|
2225
|
-
|
|
2226
|
-
// src/hooks/useMediaControls.ts
|
|
2227
|
-
import { useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react/hooks";
|
|
2228
|
-
import { ScreenSharePresets as ScreenSharePresets2 } from "livekit-client";
|
|
2229
|
-
import { useCallback as useCallback6 } from "react";
|
|
2230
|
-
var SCREEN_SHARE_OPTIONS = {
|
|
2231
|
-
video: { displaySurface: "browser" },
|
|
2232
|
-
resolution: ScreenSharePresets2.h720fps30.resolution,
|
|
2233
|
-
contentHint: "detail"
|
|
2234
|
-
};
|
|
2235
|
-
function useMediaControls() {
|
|
2236
|
-
const { localParticipant } = useLocalParticipant3();
|
|
2237
|
-
const isMuted = !localParticipant.isMicrophoneEnabled;
|
|
2238
|
-
const isScreenSharing = localParticipant.isScreenShareEnabled;
|
|
2239
|
-
const toggleMute = useCallback6(async () => {
|
|
2240
|
-
try {
|
|
2241
|
-
await localParticipant.setMicrophoneEnabled(isMuted);
|
|
2242
|
-
} catch (error) {
|
|
2243
|
-
console.error("Failed to toggle microphone:", error);
|
|
2244
|
-
}
|
|
2245
|
-
}, [localParticipant, isMuted]);
|
|
2246
|
-
const toggleScreenShare = useCallback6(async () => {
|
|
2247
|
-
try {
|
|
2248
|
-
await localParticipant.setScreenShareEnabled(!isScreenSharing, SCREEN_SHARE_OPTIONS);
|
|
2249
|
-
} catch (error) {
|
|
2250
|
-
console.error("Failed to toggle screen share:", error);
|
|
2251
|
-
}
|
|
2252
|
-
}, [localParticipant, isScreenSharing]);
|
|
2253
|
-
return { isMuted, toggleMute, isScreenSharing, toggleScreenShare };
|
|
2254
|
-
}
|
|
2146
|
+
import { useContext as useContext2, useEffect as useEffect8, useRef as useRef5, useState as useState6 } from "react";
|
|
2255
2147
|
|
|
2256
2148
|
// src/lib/utils.ts
|
|
2257
2149
|
import { clsx } from "clsx";
|
|
@@ -2262,369 +2154,147 @@ function cn(...inputs) {
|
|
|
2262
2154
|
|
|
2263
2155
|
// src/components/AdoptionBubble.tsx
|
|
2264
2156
|
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
2265
|
-
function AdoptionBubble({
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
}
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
})
|
|
2283
|
-
})
|
|
2284
|
-
]
|
|
2285
|
-
});
|
|
2286
|
-
}
|
|
2287
|
-
|
|
2288
|
-
// src/hooks/useAgentVoiceState.ts
|
|
2289
|
-
import { useVoiceAssistant } from "@livekit/components-react/hooks";
|
|
2290
|
-
function useAgentVoiceState() {
|
|
2291
|
-
const { state } = useVoiceAssistant();
|
|
2292
|
-
return {
|
|
2293
|
-
state,
|
|
2294
|
-
isSpeaking: state === "speaking",
|
|
2295
|
-
isListening: state === "listening"
|
|
2296
|
-
};
|
|
2297
|
-
}
|
|
2298
|
-
|
|
2299
|
-
// src/components/LauncherStatusPill.tsx
|
|
2300
|
-
import { jsx as jsx3, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
|
|
2301
|
-
function pillStatusFromAgent(state, canSeePage) {
|
|
2302
|
-
if (state === "speaking")
|
|
2303
|
-
return "talking";
|
|
2304
|
-
if (state === "thinking")
|
|
2305
|
-
return "thinking";
|
|
2306
|
-
return canSeePage ? "observing" : "connected";
|
|
2307
|
-
}
|
|
2308
|
-
function LauncherStatusPill() {
|
|
2309
|
-
const { isConnected, isStarting, isPaused, expandPanel, setSidebarTab, position, captureMode } = useLiveAgent();
|
|
2310
|
-
const { state } = useAgentVoiceState();
|
|
2311
|
-
const { isScreenSharing } = useMediaControls();
|
|
2312
|
-
const isStandingBy = isStarting && !isConnected;
|
|
2313
|
-
if (!isConnected && !isStandingBy && !isPaused)
|
|
2314
|
-
return null;
|
|
2315
|
-
const canSeePage = captureMode === "auto" || isScreenSharing;
|
|
2316
|
-
let status;
|
|
2317
|
-
if (isPaused) {
|
|
2318
|
-
status = "paused";
|
|
2319
|
-
} else if (isStandingBy) {
|
|
2320
|
-
status = "standing-by";
|
|
2321
|
-
} else {
|
|
2322
|
-
status = pillStatusFromAgent(state, canSeePage);
|
|
2323
|
-
}
|
|
2324
|
-
let ariaLabel;
|
|
2325
|
-
if (isStandingBy) {
|
|
2326
|
-
ariaLabel = "Skippr is standing by — click to open";
|
|
2327
|
-
} else if (isPaused) {
|
|
2328
|
-
ariaLabel = "Session paused — click to open";
|
|
2329
|
-
} else {
|
|
2330
|
-
ariaLabel = `Skippr is ${status} — click to open chat`;
|
|
2331
|
-
}
|
|
2332
|
-
const handleClick = () => {
|
|
2333
|
-
if (!isStandingBy)
|
|
2334
|
-
setSidebarTab("chat");
|
|
2335
|
-
expandPanel();
|
|
2336
|
-
};
|
|
2337
|
-
return /* @__PURE__ */ jsx3("button", {
|
|
2338
|
-
type: "button",
|
|
2339
|
-
onClick: handleClick,
|
|
2340
|
-
className: cn("skippr:fixed skippr:bottom-20 skippr:z-[9999]", "skippr:flex skippr:items-center skippr:gap-2", "skippr:rounded-full skippr:bg-bubble/95 skippr:backdrop-blur-sm", "skippr:px-3 skippr:py-1.5", "skippr:text-xs skippr:font-medium skippr:text-white", "skippr:shadow-[0_8px_24px_rgba(45,43,61,0.35)]", "skippr:cursor-pointer skippr:transition-colors skippr:hover:bg-bubble", "skippr:animate-[skippr-bubble-in_0.28s_ease-out]", position === "right" ? "skippr:right-6" : "skippr:left-6"),
|
|
2341
|
-
"aria-label": ariaLabel,
|
|
2342
|
-
children: /* @__PURE__ */ jsxs3("span", {
|
|
2343
|
-
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:animate-[skippr-pill-content_0.22s_ease-out]",
|
|
2157
|
+
function AdoptionBubble({
|
|
2158
|
+
goal,
|
|
2159
|
+
onAttend,
|
|
2160
|
+
appearDelayMs = 0,
|
|
2161
|
+
exitDelayMs = 0,
|
|
2162
|
+
hidden = false
|
|
2163
|
+
}) {
|
|
2164
|
+
return /* @__PURE__ */ jsx2("div", {
|
|
2165
|
+
style: {
|
|
2166
|
+
animationDelay: `${appearDelayMs}ms`,
|
|
2167
|
+
transitionDelay: hidden ? `${exitDelayMs}ms` : "0ms"
|
|
2168
|
+
},
|
|
2169
|
+
className: cn("skippr:group skippr:relative", "skippr:transition-opacity skippr:duration-300", "skippr:[animation:skippr-tip-in_360ms_cubic-bezier(0.34,1.3,0.64,1)_backwards]", hidden && "skippr:opacity-0 skippr:pointer-events-none"),
|
|
2170
|
+
children: /* @__PURE__ */ jsxs2("button", {
|
|
2171
|
+
type: "button",
|
|
2172
|
+
onClick: () => onAttend(goal),
|
|
2173
|
+
className: cn("skippr:flex skippr:max-w-72 skippr:items-center skippr:gap-2", "skippr:rounded-[14px] skippr:bg-amber-50 skippr:py-1.5 skippr:pr-3 skippr:pl-1.5", "skippr:text-left skippr:shadow-[0_8px_24px_rgba(0,0,0,0.18)]", "skippr:transition-colors skippr:cursor-pointer skippr:hover:bg-amber-100", "skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-bubble/60"),
|
|
2344
2174
|
children: [
|
|
2345
|
-
|
|
2346
|
-
|
|
2347
|
-
|
|
2348
|
-
|
|
2349
|
-
|
|
2350
|
-
|
|
2351
|
-
]
|
|
2352
|
-
}),
|
|
2353
|
-
status === "observing" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2354
|
-
children: [
|
|
2355
|
-
/* @__PURE__ */ jsx3(ObservingIcon, {}),
|
|
2356
|
-
/* @__PURE__ */ jsx3("span", {
|
|
2357
|
-
children: "Skippr is observing"
|
|
2358
|
-
})
|
|
2359
|
-
]
|
|
2360
|
-
}),
|
|
2361
|
-
status === "connected" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2362
|
-
children: [
|
|
2363
|
-
/* @__PURE__ */ jsx3(ConnectedDot, {}),
|
|
2364
|
-
/* @__PURE__ */ jsx3("span", {
|
|
2365
|
-
children: "Skippr is connected"
|
|
2366
|
-
})
|
|
2367
|
-
]
|
|
2368
|
-
}),
|
|
2369
|
-
status === "talking" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2370
|
-
children: [
|
|
2371
|
-
/* @__PURE__ */ jsx3(SpeakingBars, {}),
|
|
2372
|
-
/* @__PURE__ */ jsx3("span", {
|
|
2373
|
-
children: "Skippr is talking"
|
|
2374
|
-
})
|
|
2375
|
-
]
|
|
2175
|
+
/* @__PURE__ */ jsx2("span", {
|
|
2176
|
+
className: cn("skippr:flex skippr:h-6 skippr:w-6 skippr:shrink-0 skippr:items-center skippr:justify-center", "skippr:text-amber-700"),
|
|
2177
|
+
children: /* @__PURE__ */ jsx2(Lightbulb, {
|
|
2178
|
+
className: "skippr:h-3.5 skippr:w-3.5",
|
|
2179
|
+
fill: "currentColor"
|
|
2180
|
+
})
|
|
2376
2181
|
}),
|
|
2377
|
-
|
|
2378
|
-
|
|
2379
|
-
|
|
2380
|
-
/* @__PURE__ */ jsx3("span", {
|
|
2381
|
-
children: "Skippr is thinking"
|
|
2382
|
-
})
|
|
2383
|
-
]
|
|
2182
|
+
/* @__PURE__ */ jsx2("span", {
|
|
2183
|
+
className: "skippr:min-w-0 skippr:truncate skippr:text-[13px] skippr:font-semibold skippr:text-amber-950",
|
|
2184
|
+
children: goal.displayMessage
|
|
2384
2185
|
}),
|
|
2385
|
-
|
|
2386
|
-
|
|
2387
|
-
/* @__PURE__ */ jsx3(PausedDot, {}),
|
|
2388
|
-
/* @__PURE__ */ jsx3("span", {
|
|
2389
|
-
children: "Session paused"
|
|
2390
|
-
})
|
|
2391
|
-
]
|
|
2186
|
+
/* @__PURE__ */ jsx2(ArrowRight, {
|
|
2187
|
+
className: "skippr:h-3.5 skippr:w-3.5 skippr:shrink-0 skippr:text-amber-700"
|
|
2392
2188
|
})
|
|
2393
2189
|
]
|
|
2394
|
-
}
|
|
2190
|
+
})
|
|
2395
2191
|
});
|
|
2396
2192
|
}
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
|
|
2193
|
+
|
|
2194
|
+
// src/components/ModulePill.tsx
|
|
2195
|
+
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
2196
|
+
var RING_RADIUS = 8;
|
|
2197
|
+
var RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
|
|
2198
|
+
function ModulePill({ module, onSelect, progress, isLive = false, label }) {
|
|
2199
|
+
const completedPhases = progress?.completed ?? module.currentSession?.currentPhaseIndex ?? 0;
|
|
2200
|
+
const totalPhases = progress?.total ?? module.totalPhases;
|
|
2201
|
+
const showProgress = module.mode !== AGENT_MODE.AlwaysOn && totalPhases > 0;
|
|
2202
|
+
const progressFraction = showProgress ? Math.min(completedPhases / totalPhases, 1) : 0;
|
|
2203
|
+
return /* @__PURE__ */ jsxs3("button", {
|
|
2204
|
+
type: "button",
|
|
2205
|
+
onClick: () => onSelect(module.id),
|
|
2206
|
+
className: cn("skippr:flex skippr:w-40 skippr:items-center skippr:gap-1.5 skippr:whitespace-nowrap", "skippr:rounded-[14px] skippr:bg-white skippr:px-3 skippr:py-1.5", "skippr:text-[13px] skippr:font-medium skippr:text-black", "skippr:shadow-[0_8px_24px_rgba(0,0,0,0.18)]", "skippr:transition-colors skippr:cursor-pointer skippr:hover:bg-neutral-100", "skippr:animate-[skippr-bubble-in_0.28s_ease-out]", "skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-bubble/60"),
|
|
2400
2207
|
children: [
|
|
2401
|
-
/* @__PURE__ */ jsx3("span", {
|
|
2402
|
-
|
|
2208
|
+
isLive && /* @__PURE__ */ jsx3("span", {
|
|
2209
|
+
"aria-hidden": "true",
|
|
2210
|
+
className: "skippr:size-[6px] skippr:shrink-0 skippr:rounded-full skippr:bg-emerald-500 skippr:animate-pulse skippr:motion-reduce:animate-none"
|
|
2211
|
+
}),
|
|
2212
|
+
showProgress && !isLive && /* @__PURE__ */ jsxs3("svg", {
|
|
2213
|
+
viewBox: "0 0 20 20",
|
|
2214
|
+
className: "skippr:size-4 skippr:shrink-0 skippr:-rotate-90",
|
|
2215
|
+
"aria-hidden": "true",
|
|
2216
|
+
children: [
|
|
2217
|
+
/* @__PURE__ */ jsx3("circle", {
|
|
2218
|
+
cx: "10",
|
|
2219
|
+
cy: "10",
|
|
2220
|
+
r: RING_RADIUS,
|
|
2221
|
+
fill: "none",
|
|
2222
|
+
strokeWidth: "2.5",
|
|
2223
|
+
className: "skippr:stroke-black/15"
|
|
2224
|
+
}),
|
|
2225
|
+
/* @__PURE__ */ jsx3("circle", {
|
|
2226
|
+
cx: "10",
|
|
2227
|
+
cy: "10",
|
|
2228
|
+
r: RING_RADIUS,
|
|
2229
|
+
fill: "none",
|
|
2230
|
+
strokeWidth: "2.5",
|
|
2231
|
+
strokeLinecap: "round",
|
|
2232
|
+
strokeDasharray: RING_CIRCUMFERENCE,
|
|
2233
|
+
strokeDashoffset: RING_CIRCUMFERENCE * (1 - progressFraction),
|
|
2234
|
+
className: "skippr:stroke-bubble"
|
|
2235
|
+
})
|
|
2236
|
+
]
|
|
2403
2237
|
}),
|
|
2404
2238
|
/* @__PURE__ */ jsx3("span", {
|
|
2405
|
-
className: "skippr:
|
|
2406
|
-
|
|
2407
|
-
]
|
|
2408
|
-
});
|
|
2409
|
-
}
|
|
2410
|
-
function PausedDot() {
|
|
2411
|
-
return /* @__PURE__ */ jsx3("span", {
|
|
2412
|
-
className: "skippr:inline-flex skippr:size-2 skippr:rounded-full skippr:bg-amber-400"
|
|
2413
|
-
});
|
|
2414
|
-
}
|
|
2415
|
-
function ObservingIcon() {
|
|
2416
|
-
return /* @__PURE__ */ jsxs3("svg", {
|
|
2417
|
-
viewBox: "0 0 24 24",
|
|
2418
|
-
className: "skippr:size-3.5",
|
|
2419
|
-
fill: "none",
|
|
2420
|
-
stroke: "currentColor",
|
|
2421
|
-
strokeWidth: "2",
|
|
2422
|
-
strokeLinecap: "round",
|
|
2423
|
-
strokeLinejoin: "round",
|
|
2424
|
-
"aria-hidden": "true",
|
|
2425
|
-
children: [
|
|
2426
|
-
/* @__PURE__ */ jsx3("path", {
|
|
2427
|
-
d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
|
|
2239
|
+
className: "skippr:min-w-0 skippr:flex-1 skippr:truncate skippr:text-left",
|
|
2240
|
+
children: label ?? module.name
|
|
2428
2241
|
}),
|
|
2429
|
-
/* @__PURE__ */
|
|
2430
|
-
|
|
2431
|
-
|
|
2432
|
-
|
|
2433
|
-
|
|
2434
|
-
|
|
2435
|
-
|
|
2242
|
+
showProgress && /* @__PURE__ */ jsxs3("span", {
|
|
2243
|
+
className: cn("skippr:ml-0.5 skippr:inline-flex skippr:shrink-0 skippr:items-center skippr:gap-1 skippr:rounded-full", "skippr:bg-black/[0.07] skippr:px-1.5 skippr:py-0.5", "skippr:text-[10px] skippr:font-semibold"),
|
|
2244
|
+
children: [
|
|
2245
|
+
completedPhases,
|
|
2246
|
+
"/",
|
|
2247
|
+
totalPhases
|
|
2248
|
+
]
|
|
2436
2249
|
})
|
|
2437
2250
|
]
|
|
2438
2251
|
});
|
|
2439
2252
|
}
|
|
2440
|
-
|
|
2441
|
-
|
|
2442
|
-
|
|
2443
|
-
|
|
2444
|
-
|
|
2445
|
-
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
|
|
2449
|
-
|
|
2450
|
-
|
|
2451
|
-
|
|
2452
|
-
|
|
2453
|
-
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
|
|
2457
|
-
|
|
2253
|
+
|
|
2254
|
+
// src/components/MinimizedBubble.tsx
|
|
2255
|
+
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
2256
|
+
var GOALS_AUTO_HIDE_MS = 1e4;
|
|
2257
|
+
var GOAL_FADE_OUT_MS = 300;
|
|
2258
|
+
var GOAL_APPEAR_STAGGER_MS = 150;
|
|
2259
|
+
var GOAL_EXIT_STAGGER_MS = 250;
|
|
2260
|
+
var MAX_GOAL_BUBBLES = 3;
|
|
2261
|
+
var MAX_MODULE_PILLS = 3;
|
|
2262
|
+
function IdleLauncher({ position, onClick }) {
|
|
2263
|
+
return /* @__PURE__ */ jsx4("button", {
|
|
2264
|
+
type: "button",
|
|
2265
|
+
onClick,
|
|
2266
|
+
"aria-label": "Ask Me Anything",
|
|
2267
|
+
className: cn("skippr:group skippr:relative skippr:h-[50px] skippr:w-[50px]", "skippr:rounded-[16px] skippr:bg-launcher skippr:cursor-pointer", "skippr:shadow-[-6px_6px_22px_rgba(0,0,0,0.3)]", "skippr:[animation:skippr-orb-in_320ms_cubic-bezier(0.34,1.3,0.64,1)]", "skippr:transition-transform skippr:duration-200 skippr:ease-out skippr:hover:scale-110", position === "right" ? "skippr:translate-x-7 skippr:origin-right" : "skippr:-translate-x-7 skippr:origin-left"),
|
|
2268
|
+
children: /* @__PURE__ */ jsx4("svg", {
|
|
2269
|
+
viewBox: "0 0 15.4044 18.4853",
|
|
2270
|
+
className: cn("skippr:absolute skippr:top-1/2 skippr:-translate-y-1/2 skippr:h-[18.5px] skippr:w-[15.4px]", position === "right" ? "skippr:right-[24px]" : "skippr:left-[24px]"),
|
|
2271
|
+
fill: "none",
|
|
2272
|
+
"aria-hidden": "true",
|
|
2273
|
+
children: /* @__PURE__ */ jsx4("path", {
|
|
2274
|
+
d: "M2.25789 0.295419C1.33925 -0.413932 0 0.234459 0 1.38715V17.0972C0 18.4106 1.67407 18.987 2.49664 17.9562L6.40435 13.061C6.54853 12.8805 6.73209 12.7348 6.94126 12.6347C7.15043 12.5345 7.37978 12.4826 7.6121 12.4828H14.0025C15.3343 12.4828 15.9134 10.8128 14.8614 10.0037L2.25789 0.295419Z",
|
|
2275
|
+
className: "skippr:fill-brand"
|
|
2458
2276
|
})
|
|
2459
|
-
|
|
2277
|
+
})
|
|
2460
2278
|
});
|
|
2461
2279
|
}
|
|
2462
|
-
function
|
|
2463
|
-
|
|
2464
|
-
|
|
2280
|
+
function WelcomeBubble({
|
|
2281
|
+
message,
|
|
2282
|
+
position,
|
|
2283
|
+
onDismiss
|
|
2284
|
+
}) {
|
|
2285
|
+
useEffect8(() => {
|
|
2286
|
+
const timer = setTimeout(onDismiss, 5000);
|
|
2287
|
+
return () => clearTimeout(timer);
|
|
2288
|
+
}, [onDismiss]);
|
|
2289
|
+
return /* @__PURE__ */ jsxs4("button", {
|
|
2290
|
+
type: "button",
|
|
2291
|
+
className: cn("skippr:absolute skippr:bottom-full skippr:mb-3", "skippr:max-w-64 skippr:rounded-xl skippr:bg-card skippr:shadow-lg", "skippr:border skippr:border-border skippr:px-4 skippr:py-3", "skippr:text-sm skippr:text-foreground skippr:leading-relaxed skippr:text-left", "skippr:animate-[skippr-fade-in_0.3s_ease-out]", "skippr:cursor-pointer", position === "right" ? "skippr:right-0" : "skippr:left-0"),
|
|
2292
|
+
onClick: onDismiss,
|
|
2293
|
+
"aria-label": "Dismiss",
|
|
2465
2294
|
children: [
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
/* @__PURE__ */ jsx3("span", {
|
|
2470
|
-
className: "skippr:size-1 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
2471
|
-
}),
|
|
2472
|
-
/* @__PURE__ */ jsx3("span", {
|
|
2473
|
-
className: "skippr:size-1 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
2474
|
-
})
|
|
2475
|
-
]
|
|
2476
|
-
});
|
|
2477
|
-
}
|
|
2478
|
-
|
|
2479
|
-
// src/components/Logo.tsx
|
|
2480
|
-
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
2481
|
-
function Logo({ className }) {
|
|
2482
|
-
return /* @__PURE__ */ jsxs4("svg", {
|
|
2483
|
-
width: "1em",
|
|
2484
|
-
height: "1em",
|
|
2485
|
-
viewBox: "0 0 200 200",
|
|
2486
|
-
fill: "none",
|
|
2487
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2488
|
-
role: "img",
|
|
2489
|
-
"aria-label": "Skippr",
|
|
2490
|
-
className,
|
|
2491
|
-
children: [
|
|
2492
|
-
/* @__PURE__ */ jsx4("rect", {
|
|
2493
|
-
width: "200",
|
|
2494
|
-
height: "200",
|
|
2495
|
-
rx: "40",
|
|
2496
|
-
fill: "#2D2D3F"
|
|
2497
|
-
}),
|
|
2498
|
-
/* @__PURE__ */ jsxs4("g", {
|
|
2499
|
-
transform: "translate(100 100) scale(0.8) translate(-100 -100)",
|
|
2500
|
-
children: [
|
|
2501
|
-
/* @__PURE__ */ jsx4("path", {
|
|
2502
|
-
d: "M144.497 59C149.193 59 153 62.8071 153 67.5033V116.397C153 118.034 152.536 119.562 151.735 120.859L114.894 92.4811L114.894 92.4804C105.42 85.1648 91.2971 91.7058 91.297 104.015V124.901H54.5033C49.8071 124.901 46 121.094 46 116.397V67.5033C46 62.8071 49.8071 59 54.5033 59H144.497ZM101.272 104.015C101.272 100.172 105.736 98.0111 108.798 100.375L140.637 124.901H101.272V104.015Z",
|
|
2503
|
-
fill: "white"
|
|
2504
|
-
}),
|
|
2505
|
-
/* @__PURE__ */ jsx4("path", {
|
|
2506
|
-
d: "M108.798 99.8856C105.736 97.5211 101.271 99.6824 101.271 103.525V155.892C101.271 160.27 106.852 162.191 109.594 158.755L122.619 142.437C123.1 141.836 123.712 141.35 124.409 141.016C125.106 140.683 125.871 140.51 126.645 140.51H147.946C152.386 140.51 154.316 134.944 150.81 132.247L108.798 99.8856Z",
|
|
2507
|
-
fill: "#2BC0AE"
|
|
2508
|
-
})
|
|
2509
|
-
]
|
|
2510
|
-
})
|
|
2511
|
-
]
|
|
2512
|
-
});
|
|
2513
|
-
}
|
|
2514
|
-
|
|
2515
|
-
// src/components/MinimizedBubble.tsx
|
|
2516
|
-
import { jsx as jsx5, jsxs as jsxs5, Fragment as Fragment2 } from "react/jsx-runtime";
|
|
2517
|
-
var CONTROL_BUTTON = "skippr:flex skippr:size-12 skippr:items-center skippr:justify-center skippr:rounded-[14px] skippr:cursor-pointer skippr:transition-all skippr:hover:-translate-y-0.5 skippr:active:translate-y-0";
|
|
2518
|
-
var CONTROL_SHADOW = "skippr:shadow-[0_4px_16px_rgba(0,0,0,0.15),0_2px_4px_rgba(0,0,0,0.1)]";
|
|
2519
|
-
function ConnectedLauncher() {
|
|
2520
|
-
const {
|
|
2521
|
-
expandPanel,
|
|
2522
|
-
disconnect,
|
|
2523
|
-
pauseSession,
|
|
2524
|
-
resumeSession,
|
|
2525
|
-
isPaused,
|
|
2526
|
-
isPausing,
|
|
2527
|
-
captureMode,
|
|
2528
|
-
setSidebarTab
|
|
2529
|
-
} = useLiveAgent();
|
|
2530
|
-
const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
|
|
2531
|
-
const showScreenShareToggle = captureMode === "screenshare";
|
|
2532
|
-
const showPaused = isPaused || isPausing;
|
|
2533
|
-
const openChat = () => {
|
|
2534
|
-
setSidebarTab("chat");
|
|
2535
|
-
expandPanel();
|
|
2536
|
-
};
|
|
2537
|
-
return /* @__PURE__ */ jsxs5(Fragment2, {
|
|
2538
|
-
children: [
|
|
2539
|
-
!showPaused && /* @__PURE__ */ jsxs5(Fragment2, {
|
|
2540
|
-
children: [
|
|
2541
|
-
/* @__PURE__ */ jsx5("button", {
|
|
2542
|
-
type: "button",
|
|
2543
|
-
onClick: toggleMute,
|
|
2544
|
-
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
2545
|
-
className: cn(CONTROL_BUTTON, CONTROL_SHADOW, isMuted ? "skippr:bg-destructive/10 skippr:text-destructive skippr:hover:bg-destructive/20" : "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted"),
|
|
2546
|
-
children: isMuted ? /* @__PURE__ */ jsx5(MicOff, {
|
|
2547
|
-
className: "skippr:size-5"
|
|
2548
|
-
}) : /* @__PURE__ */ jsx5(Mic, {
|
|
2549
|
-
className: "skippr:size-5"
|
|
2550
|
-
})
|
|
2551
|
-
}),
|
|
2552
|
-
showScreenShareToggle && /* @__PURE__ */ jsx5("button", {
|
|
2553
|
-
type: "button",
|
|
2554
|
-
onClick: toggleScreenShare,
|
|
2555
|
-
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
2556
|
-
className: cn(CONTROL_BUTTON, CONTROL_SHADOW, isScreenSharing ? "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90" : "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted"),
|
|
2557
|
-
children: isScreenSharing ? /* @__PURE__ */ jsx5(MonitorOff, {
|
|
2558
|
-
className: "skippr:size-5"
|
|
2559
|
-
}) : /* @__PURE__ */ jsx5(Monitor, {
|
|
2560
|
-
className: "skippr:size-5"
|
|
2561
|
-
})
|
|
2562
|
-
})
|
|
2563
|
-
]
|
|
2564
|
-
}),
|
|
2565
|
-
/* @__PURE__ */ jsx5("button", {
|
|
2566
|
-
type: "button",
|
|
2567
|
-
onClick: () => isPaused ? resumeSession() : pauseSession(),
|
|
2568
|
-
disabled: isPausing,
|
|
2569
|
-
"aria-label": showPaused ? "Resume session" : "Pause session",
|
|
2570
|
-
className: cn(CONTROL_BUTTON, CONTROL_SHADOW, "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted skippr:disabled:opacity-60"),
|
|
2571
|
-
children: showPaused ? /* @__PURE__ */ jsx5(Play, {
|
|
2572
|
-
className: "skippr:size-5"
|
|
2573
|
-
}) : /* @__PURE__ */ jsx5(Pause, {
|
|
2574
|
-
className: "skippr:size-5"
|
|
2575
|
-
})
|
|
2576
|
-
}),
|
|
2577
|
-
/* @__PURE__ */ jsx5("button", {
|
|
2578
|
-
type: "button",
|
|
2579
|
-
onClick: () => disconnect(),
|
|
2580
|
-
"aria-label": "End session",
|
|
2581
|
-
className: cn(CONTROL_BUTTON, "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90", "skippr:shadow-[0_4px_16px_rgba(217,79,79,0.45),0_2px_4px_rgba(0,0,0,0.1)]"),
|
|
2582
|
-
children: /* @__PURE__ */ jsx5(PhoneOff, {
|
|
2583
|
-
className: "skippr:size-5"
|
|
2584
|
-
})
|
|
2585
|
-
}),
|
|
2586
|
-
!showPaused && /* @__PURE__ */ jsx5("button", {
|
|
2587
|
-
type: "button",
|
|
2588
|
-
onClick: openChat,
|
|
2589
|
-
"aria-label": "Open chat",
|
|
2590
|
-
className: cn(CONTROL_BUTTON, "skippr:bg-bubble skippr:text-white skippr:overflow-hidden", "skippr:shadow-[0_4px_16px_rgba(45,43,61,0.45),0_2px_4px_rgba(0,0,0,0.1)]", "skippr:hover:shadow-[0_6px_24px_rgba(45,43,61,0.55),0_4px_8px_rgba(0,0,0,0.1)]"),
|
|
2591
|
-
children: /* @__PURE__ */ jsx5(MessageSquare, {
|
|
2592
|
-
className: "skippr:size-5"
|
|
2593
|
-
})
|
|
2594
|
-
})
|
|
2595
|
-
]
|
|
2596
|
-
});
|
|
2597
|
-
}
|
|
2598
|
-
function IdleLauncher() {
|
|
2599
|
-
const { expandPanel } = useLiveAgent();
|
|
2600
|
-
return /* @__PURE__ */ jsx5("button", {
|
|
2601
|
-
type: "button",
|
|
2602
|
-
onClick: expandPanel,
|
|
2603
|
-
"aria-label": "Skippr assistant",
|
|
2604
|
-
className: cn("skippr:flex skippr:size-12 skippr:items-center skippr:justify-center", "skippr:rounded-[10px] skippr:overflow-hidden skippr:cursor-pointer", "skippr:shadow-[0_4px_16px_rgba(45,43,61,0.45),0_2px_4px_rgba(0,0,0,0.1)]", "skippr:transition-all skippr:hover:brightness-110 skippr:hover:-translate-y-0.5 skippr:active:translate-y-0"),
|
|
2605
|
-
children: /* @__PURE__ */ jsx5(Logo, {
|
|
2606
|
-
className: "skippr:size-12"
|
|
2607
|
-
})
|
|
2608
|
-
});
|
|
2609
|
-
}
|
|
2610
|
-
function WelcomeBubble({
|
|
2611
|
-
message,
|
|
2612
|
-
position,
|
|
2613
|
-
onDismiss
|
|
2614
|
-
}) {
|
|
2615
|
-
useEffect8(() => {
|
|
2616
|
-
const timer = setTimeout(onDismiss, 5000);
|
|
2617
|
-
return () => clearTimeout(timer);
|
|
2618
|
-
}, [onDismiss]);
|
|
2619
|
-
return /* @__PURE__ */ jsxs5("button", {
|
|
2620
|
-
type: "button",
|
|
2621
|
-
className: cn("skippr:absolute skippr:bottom-full skippr:mb-3", "skippr:max-w-64 skippr:rounded-xl skippr:bg-card skippr:shadow-lg", "skippr:border skippr:border-border skippr:px-4 skippr:py-3", "skippr:text-sm skippr:text-foreground skippr:leading-relaxed skippr:text-left", "skippr:animate-[skippr-fade-in_0.3s_ease-out]", "skippr:cursor-pointer", position === "right" ? "skippr:right-0" : "skippr:left-0"),
|
|
2622
|
-
onClick: onDismiss,
|
|
2623
|
-
"aria-label": "Dismiss",
|
|
2624
|
-
children: [
|
|
2625
|
-
message,
|
|
2626
|
-
/* @__PURE__ */ jsx5("span", {
|
|
2627
|
-
className: cn("skippr:absolute skippr:top-full skippr:size-2.5", "skippr:border-l skippr:border-t skippr:border-border skippr:bg-card", "skippr:rotate-[225deg]", position === "right" ? "skippr:right-5" : "skippr:left-5", "skippr:-mt-[5px]")
|
|
2295
|
+
message,
|
|
2296
|
+
/* @__PURE__ */ jsx4("span", {
|
|
2297
|
+
className: cn("skippr:absolute skippr:top-full skippr:size-2.5", "skippr:border-l skippr:border-t skippr:border-border skippr:bg-card", "skippr:rotate-[225deg]", position === "right" ? "skippr:right-5" : "skippr:left-5", "skippr:-mt-[5px]")
|
|
2628
2298
|
})
|
|
2629
2299
|
]
|
|
2630
2300
|
});
|
|
@@ -2634,42 +2304,117 @@ function MinimizedBubble({
|
|
|
2634
2304
|
welcomeDismissed,
|
|
2635
2305
|
onDismissWelcome
|
|
2636
2306
|
}) {
|
|
2637
|
-
const ctx =
|
|
2307
|
+
const ctx = useContext2(LiveAgentContext);
|
|
2638
2308
|
if (!ctx) {
|
|
2639
2309
|
throw new Error("MinimizedBubble must be used within a <LiveAgent> provider");
|
|
2640
2310
|
}
|
|
2641
2311
|
const {
|
|
2642
|
-
isConnected,
|
|
2643
2312
|
isStarting,
|
|
2644
|
-
isPaused,
|
|
2645
|
-
isPausing,
|
|
2646
2313
|
position,
|
|
2647
2314
|
adoptionGoals,
|
|
2648
|
-
|
|
2649
|
-
|
|
2315
|
+
startAdoptionSession,
|
|
2316
|
+
hasModuleSelector,
|
|
2317
|
+
isAuthenticated,
|
|
2318
|
+
availableModules,
|
|
2319
|
+
hasResolvedModules,
|
|
2320
|
+
selectModule,
|
|
2321
|
+
expandPanel
|
|
2650
2322
|
} = ctx;
|
|
2651
|
-
const
|
|
2652
|
-
|
|
2323
|
+
const [goalsAutoHidden, setGoalsAutoHidden] = useState6(false);
|
|
2324
|
+
const [isLauncherHovered, setIsLauncherHovered] = useState6(false);
|
|
2325
|
+
const [visitHref, setVisitHref] = useState6(() => window.location.href);
|
|
2326
|
+
const revealedHrefRef = useRef5(null);
|
|
2327
|
+
const hoverContainerRef = useRef5(null);
|
|
2328
|
+
useEffect8(() => subscribeToLocationChange(() => setVisitHref(window.location.href)), []);
|
|
2329
|
+
useEffect8(() => {
|
|
2330
|
+
const el = hoverContainerRef.current;
|
|
2331
|
+
if (!el)
|
|
2332
|
+
return;
|
|
2333
|
+
const onEnter = () => setIsLauncherHovered(true);
|
|
2334
|
+
const onLeave = () => setIsLauncherHovered(false);
|
|
2335
|
+
el.addEventListener("mouseenter", onEnter);
|
|
2336
|
+
el.addEventListener("mouseleave", onLeave);
|
|
2337
|
+
return () => {
|
|
2338
|
+
el.removeEventListener("mouseenter", onEnter);
|
|
2339
|
+
el.removeEventListener("mouseleave", onLeave);
|
|
2340
|
+
};
|
|
2341
|
+
}, []);
|
|
2342
|
+
const actionableModules = hasModuleSelector ? availableModules.filter((module) => {
|
|
2343
|
+
const state = getModuleSessionState(module.currentSession, module.mode);
|
|
2344
|
+
return state !== "completed" && state !== "expired";
|
|
2345
|
+
}) : [];
|
|
2346
|
+
const alwaysOnModule = actionableModules.find((module) => module.mode === AGENT_MODE.AlwaysOn);
|
|
2347
|
+
const pillCandidates = actionableModules.filter((module) => module.mode !== AGENT_MODE.AlwaysOn);
|
|
2348
|
+
const onboardingModule = pillCandidates.find((module) => module.type === "onboarding");
|
|
2349
|
+
const modulePills = onboardingModule ? [onboardingModule] : pillCandidates.slice(0, MAX_MODULE_PILLS).reverse();
|
|
2350
|
+
const goalsEligible = adoptionGoals.length > 0 && !onboardingModule && (!hasModuleSelector || hasResolvedModules);
|
|
2351
|
+
useEffect8(() => {
|
|
2352
|
+
if (!goalsEligible)
|
|
2353
|
+
return;
|
|
2354
|
+
if (revealedHrefRef.current === visitHref) {
|
|
2355
|
+
setGoalsAutoHidden(true);
|
|
2356
|
+
return;
|
|
2357
|
+
}
|
|
2358
|
+
revealedHrefRef.current = visitHref;
|
|
2359
|
+
setGoalsAutoHidden(false);
|
|
2360
|
+
const timer = setTimeout(() => setGoalsAutoHidden(true), GOALS_AUTO_HIDE_MS);
|
|
2361
|
+
return () => clearTimeout(timer);
|
|
2362
|
+
}, [goalsEligible, visitHref]);
|
|
2363
|
+
const matchedGoals = goalsEligible ? adoptionGoals.slice(0, MAX_GOAL_BUBBLES) : [];
|
|
2364
|
+
const goalsHidden = goalsAutoHidden && !isLauncherHovered;
|
|
2365
|
+
const [goalsUnmounted, setGoalsUnmounted] = useState6(false);
|
|
2366
|
+
useEffect8(() => {
|
|
2367
|
+
if (!goalsHidden) {
|
|
2368
|
+
setGoalsUnmounted(false);
|
|
2369
|
+
return;
|
|
2370
|
+
}
|
|
2371
|
+
const exitTotalMs = GOAL_FADE_OUT_MS + GOAL_EXIT_STAGGER_MS * (MAX_GOAL_BUBBLES - 1);
|
|
2372
|
+
const timer = setTimeout(() => setGoalsUnmounted(true), exitTotalMs);
|
|
2373
|
+
return () => clearTimeout(timer);
|
|
2374
|
+
}, [goalsHidden]);
|
|
2375
|
+
const visibleGoals = goalsUnmounted ? [] : matchedGoals;
|
|
2376
|
+
const launchDefaultSession = () => {
|
|
2377
|
+
if (isStarting)
|
|
2378
|
+
return;
|
|
2379
|
+
if (!hasModuleSelector || !isAuthenticated) {
|
|
2380
|
+
expandPanel();
|
|
2381
|
+
return;
|
|
2382
|
+
}
|
|
2383
|
+
const target = alwaysOnModule ?? onboardingModule ?? pillCandidates[0];
|
|
2384
|
+
if (target) {
|
|
2385
|
+
selectModule(target.id);
|
|
2386
|
+
return;
|
|
2387
|
+
}
|
|
2388
|
+
expandPanel();
|
|
2389
|
+
};
|
|
2390
|
+
return /* @__PURE__ */ jsxs4("div", {
|
|
2391
|
+
ref: hoverContainerRef,
|
|
2392
|
+
className: cn("skippr:fixed skippr:bottom-12 skippr:z-[9999]", "skippr:flex skippr:items-center skippr:gap-2", position === "right" ? "skippr:right-3" : "skippr:left-3"),
|
|
2653
2393
|
children: [
|
|
2654
|
-
/* @__PURE__ */
|
|
2655
|
-
|
|
2656
|
-
className: cn("skippr:fixed skippr:bottom-6 skippr:z-[9999]", "skippr:flex skippr:items-center skippr:gap-2", position === "right" ? "skippr:right-6" : "skippr:left-6"),
|
|
2394
|
+
(modulePills.length > 0 || visibleGoals.length > 0) && /* @__PURE__ */ jsxs4("div", {
|
|
2395
|
+
className: cn("skippr:absolute skippr:bottom-full skippr:mb-3 skippr:flex skippr:flex-col skippr:gap-2", position === "right" ? "skippr:right-0 skippr:items-end" : "skippr:left-0 skippr:items-start"),
|
|
2657
2396
|
children: [
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
onDismiss: onDismissWelcome
|
|
2670
|
-
}),
|
|
2671
|
-
inSession ? /* @__PURE__ */ jsx5(ConnectedLauncher, {}) : /* @__PURE__ */ jsx5(IdleLauncher, {})
|
|
2397
|
+
visibleGoals.map((goal, index2) => /* @__PURE__ */ jsx4(AdoptionBubble, {
|
|
2398
|
+
goal,
|
|
2399
|
+
onAttend: startAdoptionSession,
|
|
2400
|
+
appearDelayMs: (visibleGoals.length - 1 - index2) * GOAL_APPEAR_STAGGER_MS,
|
|
2401
|
+
exitDelayMs: (visibleGoals.length - 1 - index2) * GOAL_EXIT_STAGGER_MS,
|
|
2402
|
+
hidden: goalsHidden
|
|
2403
|
+
}, goal.goalId)),
|
|
2404
|
+
modulePills.map((module) => /* @__PURE__ */ jsx4(ModulePill, {
|
|
2405
|
+
module,
|
|
2406
|
+
onSelect: selectModule
|
|
2407
|
+
}, module.id))
|
|
2672
2408
|
]
|
|
2409
|
+
}),
|
|
2410
|
+
welcomeMessage && !welcomeDismissed && adoptionGoals.length === 0 && modulePills.length === 0 && /* @__PURE__ */ jsx4(WelcomeBubble, {
|
|
2411
|
+
message: welcomeMessage,
|
|
2412
|
+
position,
|
|
2413
|
+
onDismiss: onDismissWelcome
|
|
2414
|
+
}),
|
|
2415
|
+
/* @__PURE__ */ jsx4(IdleLauncher, {
|
|
2416
|
+
position,
|
|
2417
|
+
onClick: launchDefaultSession
|
|
2673
2418
|
})
|
|
2674
2419
|
]
|
|
2675
2420
|
});
|
|
@@ -2677,19 +2422,19 @@ function MinimizedBubble({
|
|
|
2677
2422
|
|
|
2678
2423
|
// src/components/PageActionHandler.tsx
|
|
2679
2424
|
import { useDataChannel as useDataChannel2 } from "@livekit/components-react/hooks";
|
|
2680
|
-
import { useCallback as
|
|
2425
|
+
import { useCallback as useCallback6, useEffect as useEffect10, useRef as useRef7, useState as useState8 } from "react";
|
|
2681
2426
|
|
|
2682
2427
|
// src/components/AgentActivityIndicator.tsx
|
|
2683
|
-
import { useEffect as useEffect9, useRef as
|
|
2684
|
-
import { jsx as
|
|
2428
|
+
import { useEffect as useEffect9, useRef as useRef6, useState as useState7 } from "react";
|
|
2429
|
+
import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
2685
2430
|
var Z_INDEX2 = 2147483646;
|
|
2686
2431
|
function centerOf(element) {
|
|
2687
2432
|
const rect = getRectInTopViewport(element);
|
|
2688
2433
|
return { left: rect.left + rect.width / 2, top: rect.top + rect.height / 2 };
|
|
2689
2434
|
}
|
|
2690
2435
|
function AgentActivityIndicator({ target }) {
|
|
2691
|
-
const [position, setPosition] =
|
|
2692
|
-
const frameRef =
|
|
2436
|
+
const [position, setPosition] = useState7(null);
|
|
2437
|
+
const frameRef = useRef6(null);
|
|
2693
2438
|
useEffect9(() => {
|
|
2694
2439
|
if (!target || !target.element.isConnected) {
|
|
2695
2440
|
setPosition(null);
|
|
@@ -2728,21 +2473,21 @@ function AgentActivityIndicator({ target }) {
|
|
|
2728
2473
|
zIndex: Z_INDEX2,
|
|
2729
2474
|
transition: "left 0.45s cubic-bezier(0.22, 1, 0.36, 1), top 0.45s cubic-bezier(0.22, 1, 0.36, 1)"
|
|
2730
2475
|
};
|
|
2731
|
-
return /* @__PURE__ */
|
|
2476
|
+
return /* @__PURE__ */ jsx5("div", {
|
|
2732
2477
|
"data-skippr-private": "true",
|
|
2733
2478
|
style: containerStyle,
|
|
2734
|
-
children: /* @__PURE__ */
|
|
2479
|
+
children: /* @__PURE__ */ jsxs5("div", {
|
|
2735
2480
|
className: "skippr:relative",
|
|
2736
2481
|
children: [
|
|
2737
|
-
/* @__PURE__ */
|
|
2482
|
+
/* @__PURE__ */ jsx5(MousePointer2, {
|
|
2738
2483
|
"aria-hidden": "true",
|
|
2739
2484
|
className: "skippr:h-5 skippr:w-5 skippr:text-cyan-500 skippr:drop-shadow-[0_1px_3px_rgba(0,0,0,0.35)] skippr:animate-skippr-press",
|
|
2740
2485
|
fill: "currentColor"
|
|
2741
2486
|
}),
|
|
2742
|
-
/* @__PURE__ */
|
|
2487
|
+
/* @__PURE__ */ jsx5("div", {
|
|
2743
2488
|
role: "status",
|
|
2744
2489
|
className: "skippr:absolute skippr:left-5 skippr:top-4 skippr:flex skippr:items-center skippr:gap-1.5 skippr:rounded-full skippr:bg-cyan-500 skippr:px-2.5 skippr:py-1 skippr:shadow-[0_4px_12px_rgba(0,0,0,0.18)]",
|
|
2745
|
-
children: /* @__PURE__ */
|
|
2490
|
+
children: /* @__PURE__ */ jsx5("span", {
|
|
2746
2491
|
className: "skippr:text-[11px] skippr:font-medium skippr:text-white skippr:whitespace-nowrap",
|
|
2747
2492
|
children: target.label
|
|
2748
2493
|
})
|
|
@@ -2753,7 +2498,7 @@ function AgentActivityIndicator({ target }) {
|
|
|
2753
2498
|
}
|
|
2754
2499
|
|
|
2755
2500
|
// src/components/PageActionHandler.tsx
|
|
2756
|
-
import { jsx as
|
|
2501
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
2757
2502
|
var INDICATOR_LINGER_MS = 1400;
|
|
2758
2503
|
var CURSOR_LEAD_BEFORE_ACTION_MS = 350;
|
|
2759
2504
|
var SETTLE_MS = 250;
|
|
@@ -2897,14 +2642,14 @@ function labelFor(action) {
|
|
|
2897
2642
|
}
|
|
2898
2643
|
}
|
|
2899
2644
|
function PageActionHandler() {
|
|
2900
|
-
const [activity, setActivity] =
|
|
2901
|
-
const mountedRef =
|
|
2902
|
-
const queueRef =
|
|
2903
|
-
const drainingRef =
|
|
2904
|
-
const timersRef =
|
|
2905
|
-
const wakesRef =
|
|
2906
|
-
const indicatorTimerRef =
|
|
2907
|
-
const sleep =
|
|
2645
|
+
const [activity, setActivity] = useState8(null);
|
|
2646
|
+
const mountedRef = useRef7(true);
|
|
2647
|
+
const queueRef = useRef7([]);
|
|
2648
|
+
const drainingRef = useRef7(false);
|
|
2649
|
+
const timersRef = useRef7(new Set);
|
|
2650
|
+
const wakesRef = useRef7(new Set);
|
|
2651
|
+
const indicatorTimerRef = useRef7(null);
|
|
2652
|
+
const sleep = useCallback6((ms) => {
|
|
2908
2653
|
return new Promise((resolve) => {
|
|
2909
2654
|
const wake = () => {
|
|
2910
2655
|
wakesRef.current.delete(wake);
|
|
@@ -2918,7 +2663,7 @@ function PageActionHandler() {
|
|
|
2918
2663
|
timersRef.current.add(timer);
|
|
2919
2664
|
});
|
|
2920
2665
|
}, []);
|
|
2921
|
-
const showActivity =
|
|
2666
|
+
const showActivity = useCallback6((target) => {
|
|
2922
2667
|
if (indicatorTimerRef.current) {
|
|
2923
2668
|
clearTimeout(indicatorTimerRef.current);
|
|
2924
2669
|
indicatorTimerRef.current = null;
|
|
@@ -2933,7 +2678,7 @@ function PageActionHandler() {
|
|
|
2933
2678
|
indicatorTimerRef.current = timer;
|
|
2934
2679
|
}
|
|
2935
2680
|
}, []);
|
|
2936
|
-
const processOne =
|
|
2681
|
+
const processOne = useCallback6(async (action) => {
|
|
2937
2682
|
if (action.type === "navigate") {
|
|
2938
2683
|
queueRef.current.length = 0;
|
|
2939
2684
|
if (!isSameOriginHttpUrl(action.url))
|
|
@@ -2959,7 +2704,7 @@ function PageActionHandler() {
|
|
|
2959
2704
|
runAgentAction(() => performAction(action, element));
|
|
2960
2705
|
await sleep(SETTLE_MS);
|
|
2961
2706
|
}, [showActivity, sleep]);
|
|
2962
|
-
const drain =
|
|
2707
|
+
const drain = useCallback6(async () => {
|
|
2963
2708
|
if (drainingRef.current)
|
|
2964
2709
|
return;
|
|
2965
2710
|
drainingRef.current = true;
|
|
@@ -2974,7 +2719,7 @@ function PageActionHandler() {
|
|
|
2974
2719
|
drainingRef.current = false;
|
|
2975
2720
|
}
|
|
2976
2721
|
}, [processOne]);
|
|
2977
|
-
const onMessage =
|
|
2722
|
+
const onMessage = useCallback6((msg) => {
|
|
2978
2723
|
const action = parsePageAction(msg.payload);
|
|
2979
2724
|
if (!action)
|
|
2980
2725
|
return;
|
|
@@ -3000,15 +2745,476 @@ function PageActionHandler() {
|
|
|
3000
2745
|
};
|
|
3001
2746
|
}, []);
|
|
3002
2747
|
useDataChannel2(PAGE_ACTIONS_TOPIC, onMessage);
|
|
3003
|
-
return /* @__PURE__ */
|
|
2748
|
+
return /* @__PURE__ */ jsx6(AgentActivityIndicator, {
|
|
3004
2749
|
target: activity
|
|
3005
2750
|
});
|
|
3006
2751
|
}
|
|
3007
2752
|
|
|
2753
|
+
// src/components/SessionControlBar.tsx
|
|
2754
|
+
import { useContext as useContext5 } from "react";
|
|
2755
|
+
|
|
2756
|
+
// src/hooks/useAgentVoiceState.ts
|
|
2757
|
+
import { useVoiceAssistant } from "@livekit/components-react/hooks";
|
|
2758
|
+
function useAgentVoiceState() {
|
|
2759
|
+
const { state } = useVoiceAssistant();
|
|
2760
|
+
return {
|
|
2761
|
+
state,
|
|
2762
|
+
isSpeaking: state === "speaking",
|
|
2763
|
+
isListening: state === "listening"
|
|
2764
|
+
};
|
|
2765
|
+
}
|
|
2766
|
+
|
|
2767
|
+
// src/hooks/useLiveAgent.ts
|
|
2768
|
+
import { useContext as useContext3 } from "react";
|
|
2769
|
+
function useLiveAgent() {
|
|
2770
|
+
const ctx = useContext3(LiveAgentContext);
|
|
2771
|
+
if (!ctx) {
|
|
2772
|
+
throw new Error("useLiveAgent must be used within a <LiveAgent> provider");
|
|
2773
|
+
}
|
|
2774
|
+
const {
|
|
2775
|
+
usesHostAuth,
|
|
2776
|
+
authFailed,
|
|
2777
|
+
connection,
|
|
2778
|
+
shouldConnect,
|
|
2779
|
+
historyMessages,
|
|
2780
|
+
phasesSnapshot,
|
|
2781
|
+
setPhasesSnapshot,
|
|
2782
|
+
hasResolvedModules,
|
|
2783
|
+
adoptionGoals,
|
|
2784
|
+
startAdoptionSession,
|
|
2785
|
+
...publicValue
|
|
2786
|
+
} = ctx;
|
|
2787
|
+
return publicValue;
|
|
2788
|
+
}
|
|
2789
|
+
|
|
2790
|
+
// src/hooks/useMediaControls.ts
|
|
2791
|
+
import { useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react/hooks";
|
|
2792
|
+
import { ScreenSharePresets as ScreenSharePresets2 } from "livekit-client";
|
|
2793
|
+
import { useCallback as useCallback7 } from "react";
|
|
2794
|
+
var SCREEN_SHARE_OPTIONS = {
|
|
2795
|
+
video: { displaySurface: "browser" },
|
|
2796
|
+
resolution: ScreenSharePresets2.h720fps30.resolution,
|
|
2797
|
+
contentHint: "detail"
|
|
2798
|
+
};
|
|
2799
|
+
function useMediaControls() {
|
|
2800
|
+
const { localParticipant } = useLocalParticipant3();
|
|
2801
|
+
const isMuted = !localParticipant.isMicrophoneEnabled;
|
|
2802
|
+
const isScreenSharing = localParticipant.isScreenShareEnabled;
|
|
2803
|
+
const toggleMute = useCallback7(async () => {
|
|
2804
|
+
try {
|
|
2805
|
+
await localParticipant.setMicrophoneEnabled(isMuted);
|
|
2806
|
+
} catch (error) {
|
|
2807
|
+
console.error("Failed to toggle microphone:", error);
|
|
2808
|
+
}
|
|
2809
|
+
}, [localParticipant, isMuted]);
|
|
2810
|
+
const toggleScreenShare = useCallback7(async () => {
|
|
2811
|
+
try {
|
|
2812
|
+
await localParticipant.setScreenShareEnabled(!isScreenSharing, SCREEN_SHARE_OPTIONS);
|
|
2813
|
+
} catch (error) {
|
|
2814
|
+
console.error("Failed to toggle screen share:", error);
|
|
2815
|
+
}
|
|
2816
|
+
}, [localParticipant, isScreenSharing]);
|
|
2817
|
+
return { isMuted, toggleMute, isScreenSharing, toggleScreenShare };
|
|
2818
|
+
}
|
|
2819
|
+
|
|
2820
|
+
// src/hooks/useMicLevel.ts
|
|
2821
|
+
import { useLocalParticipant as useLocalParticipant4 } from "@livekit/components-react/hooks";
|
|
2822
|
+
import { useEffect as useEffect11, useRef as useRef8, useState as useState9 } from "react";
|
|
2823
|
+
var MIC_BARS = 5;
|
|
2824
|
+
var IDLE_BAR_HEIGHT_PX = 5;
|
|
2825
|
+
var MAX_BAR_GROWTH_PX = 17;
|
|
2826
|
+
var BAR_NOISE_GATE = 0.25;
|
|
2827
|
+
var TALKING_LEVEL_THRESHOLD = 0.2;
|
|
2828
|
+
var TALKING_HOLD_MS = 400;
|
|
2829
|
+
function useMicLevel(enabled) {
|
|
2830
|
+
const { microphoneTrack } = useLocalParticipant4();
|
|
2831
|
+
const barRefs = useRef8([]);
|
|
2832
|
+
const [isTalking, setIsTalking] = useState9(false);
|
|
2833
|
+
const mediaStreamTrack = microphoneTrack?.track?.mediaStreamTrack;
|
|
2834
|
+
useEffect11(() => {
|
|
2835
|
+
if (!enabled || !mediaStreamTrack) {
|
|
2836
|
+
for (const bar of barRefs.current) {
|
|
2837
|
+
if (bar)
|
|
2838
|
+
bar.style.height = `${IDLE_BAR_HEIGHT_PX}px`;
|
|
2839
|
+
}
|
|
2840
|
+
setIsTalking(false);
|
|
2841
|
+
return;
|
|
2842
|
+
}
|
|
2843
|
+
const AudioContextCtor = window.AudioContext ?? window.webkitAudioContext;
|
|
2844
|
+
const audioContext = new AudioContextCtor;
|
|
2845
|
+
const analyser = audioContext.createAnalyser();
|
|
2846
|
+
analyser.fftSize = 64;
|
|
2847
|
+
analyser.smoothingTimeConstant = 0.6;
|
|
2848
|
+
audioContext.createMediaStreamSource(new MediaStream([mediaStreamTrack])).connect(analyser);
|
|
2849
|
+
const frequencyData = new Uint8Array(analyser.frequencyBinCount);
|
|
2850
|
+
let rafId = 0;
|
|
2851
|
+
let talkingHoldUntil = 0;
|
|
2852
|
+
const tick = () => {
|
|
2853
|
+
analyser.getByteFrequencyData(frequencyData);
|
|
2854
|
+
let levelSum = 0;
|
|
2855
|
+
for (let i = 0;i < MIC_BARS; i++) {
|
|
2856
|
+
const binIndex = 1 + Math.floor(i / MIC_BARS * (frequencyData.length - 2));
|
|
2857
|
+
const level = (frequencyData[binIndex] ?? 0) / 255;
|
|
2858
|
+
const gatedLevel = Math.max(0, level - BAR_NOISE_GATE) / (1 - BAR_NOISE_GATE);
|
|
2859
|
+
levelSum += gatedLevel;
|
|
2860
|
+
const bar = barRefs.current[i];
|
|
2861
|
+
if (bar) {
|
|
2862
|
+
bar.style.height = `${IDLE_BAR_HEIGHT_PX + Math.min(1, gatedLevel * 1.8) * MAX_BAR_GROWTH_PX}px`;
|
|
2863
|
+
}
|
|
2864
|
+
}
|
|
2865
|
+
const now = performance.now();
|
|
2866
|
+
if (levelSum / MIC_BARS > TALKING_LEVEL_THRESHOLD) {
|
|
2867
|
+
talkingHoldUntil = now + TALKING_HOLD_MS;
|
|
2868
|
+
}
|
|
2869
|
+
const talking = now < talkingHoldUntil;
|
|
2870
|
+
setIsTalking((prev) => prev === talking ? prev : talking);
|
|
2871
|
+
rafId = requestAnimationFrame(tick);
|
|
2872
|
+
};
|
|
2873
|
+
rafId = requestAnimationFrame(tick);
|
|
2874
|
+
return () => {
|
|
2875
|
+
cancelAnimationFrame(rafId);
|
|
2876
|
+
audioContext.close().catch(() => {});
|
|
2877
|
+
setIsTalking(false);
|
|
2878
|
+
};
|
|
2879
|
+
}, [enabled, mediaStreamTrack]);
|
|
2880
|
+
return { barRefs, isTalking };
|
|
2881
|
+
}
|
|
2882
|
+
|
|
2883
|
+
// src/hooks/usePhaseUpdates.ts
|
|
2884
|
+
import { useCallback as useCallback8, useContext as useContext4, useEffect as useEffect13 } from "react";
|
|
2885
|
+
|
|
2886
|
+
// src/hooks/useAgentState.ts
|
|
2887
|
+
import { useRemoteParticipants } from "@livekit/components-react/hooks";
|
|
2888
|
+
import { useEffect as useEffect12, useState as useState10 } from "react";
|
|
2889
|
+
function useAgentState(attributeKey, parse, initial) {
|
|
2890
|
+
const [value, setValue] = useState10(initial);
|
|
2891
|
+
const remoteParticipants = useRemoteParticipants();
|
|
2892
|
+
useEffect12(() => {
|
|
2893
|
+
const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
|
|
2894
|
+
if (agentParticipant) {
|
|
2895
|
+
const attr = agentParticipant.attributes?.[attributeKey];
|
|
2896
|
+
if (attr) {
|
|
2897
|
+
const parsed = parse(attr);
|
|
2898
|
+
if (parsed)
|
|
2899
|
+
setValue(parsed);
|
|
2900
|
+
}
|
|
2901
|
+
}
|
|
2902
|
+
const handlers = new Map;
|
|
2903
|
+
for (const p of remoteParticipants) {
|
|
2904
|
+
const handler = (changedAttributes) => {
|
|
2905
|
+
if (changedAttributes[attributeKey]) {
|
|
2906
|
+
const parsed = parse(changedAttributes[attributeKey]);
|
|
2907
|
+
if (parsed)
|
|
2908
|
+
setValue(parsed);
|
|
2909
|
+
} else if (p.attributes?.[attributeKey]) {
|
|
2910
|
+
const parsed = parse(p.attributes[attributeKey]);
|
|
2911
|
+
if (parsed)
|
|
2912
|
+
setValue(parsed);
|
|
2913
|
+
}
|
|
2914
|
+
};
|
|
2915
|
+
handlers.set(p, handler);
|
|
2916
|
+
p.on("attributesChanged", handler);
|
|
2917
|
+
}
|
|
2918
|
+
return () => {
|
|
2919
|
+
for (const [p, handler] of handlers) {
|
|
2920
|
+
p.off("attributesChanged", handler);
|
|
2921
|
+
}
|
|
2922
|
+
};
|
|
2923
|
+
}, [remoteParticipants, attributeKey, parse]);
|
|
2924
|
+
return value;
|
|
2925
|
+
}
|
|
2926
|
+
|
|
2927
|
+
// src/hooks/usePhaseUpdates.ts
|
|
2928
|
+
function parsePhases(json) {
|
|
2929
|
+
try {
|
|
2930
|
+
const data = JSON.parse(json);
|
|
2931
|
+
if (data.type === "phase_update" && Array.isArray(data.phases)) {
|
|
2932
|
+
return data.phases;
|
|
2933
|
+
}
|
|
2934
|
+
} catch {}
|
|
2935
|
+
return null;
|
|
2936
|
+
}
|
|
2937
|
+
function usePhaseUpdates() {
|
|
2938
|
+
const parse = useCallback8(parsePhases, []);
|
|
2939
|
+
const livePhases = useAgentState("phases", parse, []);
|
|
2940
|
+
const ctx = useContext4(LiveAgentContext);
|
|
2941
|
+
useEffect13(() => {
|
|
2942
|
+
if (livePhases.length > 0)
|
|
2943
|
+
ctx?.setPhasesSnapshot(livePhases);
|
|
2944
|
+
}, [livePhases, ctx?.setPhasesSnapshot]);
|
|
2945
|
+
const phases = livePhases.length > 0 ? livePhases : ctx?.phasesSnapshot ?? [];
|
|
2946
|
+
return { phases };
|
|
2947
|
+
}
|
|
2948
|
+
|
|
2949
|
+
// src/components/SessionControlBar.tsx
|
|
2950
|
+
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
2951
|
+
var STANDBY_BAR_WIDTH = 168;
|
|
2952
|
+
var READY_BAR_WIDTH = 176;
|
|
2953
|
+
var TEXT_BAR_WIDTH = 64;
|
|
2954
|
+
var SCREEN_SHARE_EXTRA_WIDTH = 56;
|
|
2955
|
+
var MIC_REGION_WIDTH = 104;
|
|
2956
|
+
var MIC_SQUARE_WIDTH = 48;
|
|
2957
|
+
var SQUARE_BUTTON = "skippr:flex skippr:size-12 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-2xl skippr:cursor-pointer skippr:transition-colors";
|
|
2958
|
+
function AgentActivity({ state }) {
|
|
2959
|
+
return /* @__PURE__ */ jsxs6("span", {
|
|
2960
|
+
role: "status",
|
|
2961
|
+
className: "skippr:flex skippr:h-5 skippr:w-12 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:text-bubble",
|
|
2962
|
+
"aria-label": `Agent is ${state}`,
|
|
2963
|
+
children: [
|
|
2964
|
+
state === "speaking" && /* @__PURE__ */ jsxs6("span", {
|
|
2965
|
+
className: "skippr:flex skippr:h-5 skippr:items-center skippr:gap-[2px]",
|
|
2966
|
+
children: [
|
|
2967
|
+
/* @__PURE__ */ jsx7("span", {
|
|
2968
|
+
className: "skippr:h-2 skippr:w-[2px] skippr:rounded-full skippr:bg-current skippr:[animation:skippr-speak_1.1s_ease-in-out_infinite]"
|
|
2969
|
+
}),
|
|
2970
|
+
/* @__PURE__ */ jsx7("span", {
|
|
2971
|
+
className: "skippr:h-4 skippr:w-[2px] skippr:rounded-full skippr:bg-current skippr:[animation:skippr-speak_1.1s_ease-in-out_0.15s_infinite]"
|
|
2972
|
+
}),
|
|
2973
|
+
/* @__PURE__ */ jsx7("span", {
|
|
2974
|
+
className: "skippr:h-2.5 skippr:w-[2px] skippr:rounded-full skippr:bg-current skippr:[animation:skippr-speak_1.1s_ease-in-out_0.3s_infinite]"
|
|
2975
|
+
}),
|
|
2976
|
+
/* @__PURE__ */ jsx7("span", {
|
|
2977
|
+
className: "skippr:h-3.5 skippr:w-[2px] skippr:rounded-full skippr:bg-current skippr:[animation:skippr-speak_1.1s_ease-in-out_0.45s_infinite]"
|
|
2978
|
+
})
|
|
2979
|
+
]
|
|
2980
|
+
}),
|
|
2981
|
+
state === "thinking" && /* @__PURE__ */ jsxs6("span", {
|
|
2982
|
+
className: "skippr:flex skippr:items-center skippr:gap-[3px]",
|
|
2983
|
+
children: [
|
|
2984
|
+
/* @__PURE__ */ jsx7("span", {
|
|
2985
|
+
className: "skippr:size-[5px] skippr:rounded-full skippr:bg-current skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
2986
|
+
}),
|
|
2987
|
+
/* @__PURE__ */ jsx7("span", {
|
|
2988
|
+
className: "skippr:size-[5px] skippr:rounded-full skippr:bg-current skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
2989
|
+
}),
|
|
2990
|
+
/* @__PURE__ */ jsx7("span", {
|
|
2991
|
+
className: "skippr:size-[5px] skippr:rounded-full skippr:bg-current skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
2992
|
+
})
|
|
2993
|
+
]
|
|
2994
|
+
}),
|
|
2995
|
+
state === "listening" && /* @__PURE__ */ jsxs6("svg", {
|
|
2996
|
+
viewBox: "0 0 24 24",
|
|
2997
|
+
className: "skippr:size-5",
|
|
2998
|
+
fill: "none",
|
|
2999
|
+
stroke: "currentColor",
|
|
3000
|
+
strokeWidth: "2",
|
|
3001
|
+
strokeLinecap: "round",
|
|
3002
|
+
strokeLinejoin: "round",
|
|
3003
|
+
"aria-hidden": "true",
|
|
3004
|
+
children: [
|
|
3005
|
+
/* @__PURE__ */ jsx7("path", {
|
|
3006
|
+
d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
|
|
3007
|
+
}),
|
|
3008
|
+
/* @__PURE__ */ jsx7("circle", {
|
|
3009
|
+
cx: "12",
|
|
3010
|
+
cy: "12",
|
|
3011
|
+
r: "2.5",
|
|
3012
|
+
fill: "currentColor",
|
|
3013
|
+
stroke: "none",
|
|
3014
|
+
className: "skippr:origin-center skippr:[animation:skippr-banner-look_2.4s_ease-in-out_infinite]"
|
|
3015
|
+
})
|
|
3016
|
+
]
|
|
3017
|
+
})
|
|
3018
|
+
]
|
|
3019
|
+
});
|
|
3020
|
+
}
|
|
3021
|
+
function SessionControlBar() {
|
|
3022
|
+
const {
|
|
3023
|
+
expandPanel,
|
|
3024
|
+
minimizePanel,
|
|
3025
|
+
isPanelOpen,
|
|
3026
|
+
pauseSession,
|
|
3027
|
+
isPausing,
|
|
3028
|
+
captureMode,
|
|
3029
|
+
setSidebarTab,
|
|
3030
|
+
activeModule,
|
|
3031
|
+
position
|
|
3032
|
+
} = useLiveAgent();
|
|
3033
|
+
const textMode = useContext5(LiveAgentContext)?.textMode ?? false;
|
|
3034
|
+
const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
|
|
3035
|
+
const { state } = useAgentVoiceState();
|
|
3036
|
+
const { phases } = usePhaseUpdates();
|
|
3037
|
+
const isReady = state === "listening" || state === "thinking" || state === "speaking";
|
|
3038
|
+
const { barRefs, isTalking } = useMicLevel(isReady && !isMuted && !textMode);
|
|
3039
|
+
const showScreenShareToggle = captureMode === "screenshare";
|
|
3040
|
+
const screenShareExtra = showScreenShareToggle ? SCREEN_SHARE_EXTRA_WIDTH : 0;
|
|
3041
|
+
let barWidth = STANDBY_BAR_WIDTH;
|
|
3042
|
+
if (isReady) {
|
|
3043
|
+
barWidth = textMode ? TEXT_BAR_WIDTH + screenShareExtra : READY_BAR_WIDTH + screenShareExtra;
|
|
3044
|
+
}
|
|
3045
|
+
const agendaModule = activeModule && activeModule.mode !== AGENT_MODE.AlwaysOn && activeModule.totalPhases > 0 ? activeModule : null;
|
|
3046
|
+
const agendaProgress = phases.length > 0 ? {
|
|
3047
|
+
completed: phases.filter((phase) => phase.status === "completed").length,
|
|
3048
|
+
total: phases.length
|
|
3049
|
+
} : agendaModule ? {
|
|
3050
|
+
completed: agendaModule.currentSession?.currentPhaseIndex ?? 0,
|
|
3051
|
+
total: agendaModule.totalPhases
|
|
3052
|
+
} : null;
|
|
3053
|
+
const currentPhaseName = phases.find((phase) => phase.status === "active")?.name ?? phases.find((phase) => phase.status === "pending")?.name;
|
|
3054
|
+
const openAgenda = () => {
|
|
3055
|
+
setSidebarTab("agenda");
|
|
3056
|
+
expandPanel();
|
|
3057
|
+
};
|
|
3058
|
+
const togglePanel = () => {
|
|
3059
|
+
if (isPanelOpen) {
|
|
3060
|
+
minimizePanel();
|
|
3061
|
+
return;
|
|
3062
|
+
}
|
|
3063
|
+
setSidebarTab(agendaModule && !textMode ? "agenda" : "chat");
|
|
3064
|
+
expandPanel();
|
|
3065
|
+
};
|
|
3066
|
+
return /* @__PURE__ */ jsxs6("div", {
|
|
3067
|
+
className: cn("skippr:fixed skippr:bottom-12 skippr:z-[9999]", position === "right" ? "skippr:right-3" : "skippr:left-3"),
|
|
3068
|
+
children: [
|
|
3069
|
+
!isPanelOpen && agendaModule && agendaProgress && /* @__PURE__ */ jsx7("div", {
|
|
3070
|
+
className: cn("skippr:absolute skippr:bottom-full skippr:mb-3", position === "right" ? "skippr:right-0" : "skippr:left-0"),
|
|
3071
|
+
children: /* @__PURE__ */ jsx7(ModulePill, {
|
|
3072
|
+
module: agendaModule,
|
|
3073
|
+
onSelect: openAgenda,
|
|
3074
|
+
progress: agendaProgress,
|
|
3075
|
+
label: currentPhaseName ?? agendaModule.name,
|
|
3076
|
+
isLive: true
|
|
3077
|
+
})
|
|
3078
|
+
}),
|
|
3079
|
+
/* @__PURE__ */ jsxs6("div", {
|
|
3080
|
+
style: { width: barWidth },
|
|
3081
|
+
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)]"),
|
|
3082
|
+
children: [
|
|
3083
|
+
!isReady && /* @__PURE__ */ jsxs6("span", {
|
|
3084
|
+
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]",
|
|
3085
|
+
children: [
|
|
3086
|
+
/* @__PURE__ */ jsxs6("span", {
|
|
3087
|
+
className: "skippr:flex skippr:items-center skippr:gap-[3px]",
|
|
3088
|
+
children: [
|
|
3089
|
+
/* @__PURE__ */ jsx7("span", {
|
|
3090
|
+
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-bubble skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
3091
|
+
}),
|
|
3092
|
+
/* @__PURE__ */ jsx7("span", {
|
|
3093
|
+
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-bubble skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
3094
|
+
}),
|
|
3095
|
+
/* @__PURE__ */ jsx7("span", {
|
|
3096
|
+
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-bubble skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
3097
|
+
})
|
|
3098
|
+
]
|
|
3099
|
+
}),
|
|
3100
|
+
/* @__PURE__ */ jsx7("span", {
|
|
3101
|
+
children: "Standing by…"
|
|
3102
|
+
})
|
|
3103
|
+
]
|
|
3104
|
+
}),
|
|
3105
|
+
isReady && /* @__PURE__ */ jsxs6("div", {
|
|
3106
|
+
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:[animation:skippr-stage-fade_240ms_ease-out]",
|
|
3107
|
+
children: [
|
|
3108
|
+
!textMode && /* @__PURE__ */ jsxs6("div", {
|
|
3109
|
+
className: "skippr:relative skippr:h-12",
|
|
3110
|
+
style: { width: MIC_REGION_WIDTH },
|
|
3111
|
+
children: [
|
|
3112
|
+
!isTalking && /* @__PURE__ */ jsx7("span", {
|
|
3113
|
+
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]",
|
|
3114
|
+
children: /* @__PURE__ */ jsx7(AgentActivity, {
|
|
3115
|
+
state
|
|
3116
|
+
})
|
|
3117
|
+
}),
|
|
3118
|
+
/* @__PURE__ */ jsxs6("div", {
|
|
3119
|
+
className: "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:transition-[width] skippr:duration-300 skippr:ease-out",
|
|
3120
|
+
style: { width: isTalking ? MIC_REGION_WIDTH : MIC_SQUARE_WIDTH },
|
|
3121
|
+
children: [
|
|
3122
|
+
/* @__PURE__ */ jsx7("button", {
|
|
3123
|
+
type: "button",
|
|
3124
|
+
onClick: () => void toggleMute(),
|
|
3125
|
+
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
3126
|
+
className: cn("skippr:flex skippr:shrink-0 skippr:items-center skippr:justify-center skippr:cursor-pointer skippr:transition-colors", isMuted ? "skippr:text-red-400 skippr:hover:text-red-300" : "skippr:text-white skippr:hover:text-white/80"),
|
|
3127
|
+
children: isMuted ? /* @__PURE__ */ jsx7(MicOff, {
|
|
3128
|
+
className: "skippr:size-5"
|
|
3129
|
+
}) : /* @__PURE__ */ jsx7(Mic, {
|
|
3130
|
+
className: "skippr:size-5"
|
|
3131
|
+
})
|
|
3132
|
+
}),
|
|
3133
|
+
/* @__PURE__ */ jsx7("span", {
|
|
3134
|
+
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"),
|
|
3135
|
+
children: Array.from({ length: MIC_BARS }).map((_, index2) => /* @__PURE__ */ jsx7("span", {
|
|
3136
|
+
ref: (el) => {
|
|
3137
|
+
barRefs.current[index2] = el;
|
|
3138
|
+
},
|
|
3139
|
+
className: "skippr:w-[3px] skippr:rounded-full skippr:bg-white skippr:transition-[height] skippr:duration-75",
|
|
3140
|
+
style: { height: 5 }
|
|
3141
|
+
}, index2))
|
|
3142
|
+
})
|
|
3143
|
+
]
|
|
3144
|
+
})
|
|
3145
|
+
]
|
|
3146
|
+
}),
|
|
3147
|
+
showScreenShareToggle && /* @__PURE__ */ jsx7("button", {
|
|
3148
|
+
type: "button",
|
|
3149
|
+
onClick: () => void toggleScreenShare(),
|
|
3150
|
+
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
3151
|
+
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"),
|
|
3152
|
+
children: isScreenSharing ? /* @__PURE__ */ jsx7(MonitorOff, {
|
|
3153
|
+
className: "skippr:size-5"
|
|
3154
|
+
}) : /* @__PURE__ */ jsx7(Monitor, {
|
|
3155
|
+
className: "skippr:size-5"
|
|
3156
|
+
})
|
|
3157
|
+
}),
|
|
3158
|
+
/* @__PURE__ */ jsx7("button", {
|
|
3159
|
+
type: "button",
|
|
3160
|
+
onClick: togglePanel,
|
|
3161
|
+
"aria-label": isPanelOpen ? "Close panel" : agendaModule && !textMode ? "Open agenda" : "Open chat",
|
|
3162
|
+
className: cn(SQUARE_BUTTON, "skippr:text-neutral-700", textMode ? "skippr:hover:bg-neutral-100" : "skippr:bg-neutral-100 skippr:hover:bg-neutral-200"),
|
|
3163
|
+
children: /* @__PURE__ */ jsx7(MessageSquare, {
|
|
3164
|
+
className: "skippr:size-5"
|
|
3165
|
+
})
|
|
3166
|
+
})
|
|
3167
|
+
]
|
|
3168
|
+
}, textMode ? "ready-text" : "ready"),
|
|
3169
|
+
isReady && /* @__PURE__ */ jsxs6("button", {
|
|
3170
|
+
type: "button",
|
|
3171
|
+
onClick: () => void pauseSession(),
|
|
3172
|
+
disabled: isPausing,
|
|
3173
|
+
"aria-label": "Pause session",
|
|
3174
|
+
"aria-busy": isPausing,
|
|
3175
|
+
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:opacity-100 skippr:cursor-default" : "skippr:opacity-0 skippr:cursor-pointer skippr:hover:bg-[#3a384b] skippr:group-hover:opacity-100 skippr:focus-visible:opacity-100"),
|
|
3176
|
+
children: [
|
|
3177
|
+
/* @__PURE__ */ jsx7(X, {
|
|
3178
|
+
className: cn("skippr:size-3.5 skippr:transition-opacity skippr:duration-200", isPausing && "skippr:opacity-40"),
|
|
3179
|
+
strokeWidth: 2.5
|
|
3180
|
+
}),
|
|
3181
|
+
isPausing && /* @__PURE__ */ jsxs6("svg", {
|
|
3182
|
+
viewBox: "0 0 24 24",
|
|
3183
|
+
fill: "none",
|
|
3184
|
+
"aria-hidden": "true",
|
|
3185
|
+
className: "skippr:absolute skippr:inset-0 skippr:size-full skippr:animate-spin skippr:motion-reduce:hidden",
|
|
3186
|
+
children: [
|
|
3187
|
+
/* @__PURE__ */ jsx7("circle", {
|
|
3188
|
+
cx: "12",
|
|
3189
|
+
cy: "12",
|
|
3190
|
+
r: "10.5",
|
|
3191
|
+
stroke: "white",
|
|
3192
|
+
strokeOpacity: "0.2",
|
|
3193
|
+
strokeWidth: "1.5"
|
|
3194
|
+
}),
|
|
3195
|
+
/* @__PURE__ */ jsx7("circle", {
|
|
3196
|
+
cx: "12",
|
|
3197
|
+
cy: "12",
|
|
3198
|
+
r: "10.5",
|
|
3199
|
+
stroke: "white",
|
|
3200
|
+
strokeWidth: "1.5",
|
|
3201
|
+
strokeLinecap: "round",
|
|
3202
|
+
strokeDasharray: "17 49"
|
|
3203
|
+
})
|
|
3204
|
+
]
|
|
3205
|
+
})
|
|
3206
|
+
]
|
|
3207
|
+
})
|
|
3208
|
+
]
|
|
3209
|
+
})
|
|
3210
|
+
]
|
|
3211
|
+
});
|
|
3212
|
+
}
|
|
3213
|
+
|
|
3008
3214
|
// src/components/ShadowHost.tsx
|
|
3009
|
-
import { useLayoutEffect, useRef as
|
|
3215
|
+
import { useLayoutEffect, useRef as useRef9, useState as useState11 } from "react";
|
|
3010
3216
|
import { createPortal } from "react-dom";
|
|
3011
|
-
import { jsx as jsx8, Fragment
|
|
3217
|
+
import { jsx as jsx8, Fragment } from "react/jsx-runtime";
|
|
3012
3218
|
var PROPERTIES_STYLE_ID = "skippr-tw-properties";
|
|
3013
3219
|
var PROPERTY_RULE = /@property\s+[^{]+\{[^}]*\}/g;
|
|
3014
3220
|
function hoistTailwindProperties(css) {
|
|
@@ -3023,10 +3229,10 @@ function hoistTailwindProperties(css) {
|
|
|
3023
3229
|
return css.replace(PROPERTY_RULE, "");
|
|
3024
3230
|
}
|
|
3025
3231
|
function ShadowHost({ children }) {
|
|
3026
|
-
const hostRef =
|
|
3027
|
-
const [shadowRoot, setShadowRoot] =
|
|
3232
|
+
const hostRef = useRef9(null);
|
|
3233
|
+
const [shadowRoot, setShadowRoot] = useState11(null);
|
|
3028
3234
|
const css = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
|
3029
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--skippr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--skippr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--skippr-color-red-50:oklch(97.1% .013 17.38);--skippr-color-red-400:oklch(70.4% .191 22.216);--skippr-color-red-700:oklch(50.5% .213 27.518);--skippr-color-amber-400:oklch(82.8% .189 84.429);--skippr-color-emerald-400:oklch(76.5% .177 163.223);--skippr-color-cyan-400:oklch(78.9% .154 211.53);--skippr-color-cyan-500:oklch(71.5% .143 215.221);--skippr-color-cyan-900:oklch(39.8% .07 227.392);--skippr-color-white:#fff;--skippr-spacing:.25rem;--skippr-text-xs:.75rem;--skippr-text-xs--line-height:calc(1/.75);--skippr-text-sm:.875rem;--skippr-text-sm--line-height:calc(1.25/.875);--skippr-font-weight-medium:500;--skippr-font-weight-semibold:600;--skippr-tracking-wide:.025em;--skippr-tracking-wider:.05em;--skippr-leading-tight:1.25;--skippr-leading-snug:1.375;--skippr-leading-relaxed:1.625;--skippr-ease-in-out:cubic-bezier(.4,0,.2,1);--skippr-animate-spin:spin 1s linear infinite;--skippr-animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--skippr-animate-bounce:bounce 1s infinite;--skippr-blur-sm:8px;--skippr-default-transition-duration:.15s;--skippr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--skippr-default-font-family:var(--skippr-font-sans);--skippr-default-mono-font-family:var(--skippr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--skippr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--skippr-default-font-feature-settings,normal);font-variation-settings:var(--skippr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--skippr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--skippr-default-mono-font-feature-settings,normal);font-variation-settings:var(--skippr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.skippr\\:pointer-events-none{pointer-events:none}.skippr\\:absolute{position:absolute}.skippr\\:fixed{position:fixed}.skippr\\:relative{position:relative}.skippr\\:sticky{position:sticky}.skippr\\:inset-0{inset:calc(var(--skippr-spacing)*0)}.skippr\\:top-0{top:calc(var(--skippr-spacing)*0)}.skippr\\:top-4{top:calc(var(--skippr-spacing)*4)}.skippr\\:top-full{top:100%}.skippr\\:right-0{right:calc(var(--skippr-spacing)*0)}.skippr\\:right-3{right:calc(var(--skippr-spacing)*3)}.skippr\\:right-5{right:calc(var(--skippr-spacing)*5)}.skippr\\:right-6{right:calc(var(--skippr-spacing)*6)}.skippr\\:-bottom-2{bottom:calc(var(--skippr-spacing)*-2)}.skippr\\:-bottom-9{bottom:calc(var(--skippr-spacing)*-9)}.skippr\\:bottom-0{bottom:calc(var(--skippr-spacing)*0)}.skippr\\:bottom-6{bottom:calc(var(--skippr-spacing)*6)}.skippr\\:bottom-20{bottom:calc(var(--skippr-spacing)*20)}.skippr\\:bottom-\\[88px\\]{bottom:88px}.skippr\\:bottom-full{bottom:100%}.skippr\\:left-0{left:calc(var(--skippr-spacing)*0)}.skippr\\:left-1\\/2{left:50%}.skippr\\:left-3{left:calc(var(--skippr-spacing)*3)}.skippr\\:left-5{left:calc(var(--skippr-spacing)*5)}.skippr\\:left-6{left:calc(var(--skippr-spacing)*6)}.skippr\\:z-10{z-index:10}.skippr\\:z-\\[9998\\]{z-index:9998}.skippr\\:z-\\[9999\\]{z-index:9999}.skippr\\:col-span-2{grid-column:span 2/span 2}.skippr\\:mx-auto{margin-inline:auto}.skippr\\:-mt-\\[5px\\]{margin-top:-5px}.skippr\\:mt-0\\.5{margin-top:calc(var(--skippr-spacing)*.5)}.skippr\\:mt-1{margin-top:calc(var(--skippr-spacing)*1)}.skippr\\:mt-1\\.5{margin-top:calc(var(--skippr-spacing)*1.5)}.skippr\\:mt-3{margin-top:calc(var(--skippr-spacing)*3)}.skippr\\:mb-1\\.5{margin-bottom:calc(var(--skippr-spacing)*1.5)}.skippr\\:mb-2{margin-bottom:calc(var(--skippr-spacing)*2)}.skippr\\:mb-3{margin-bottom:calc(var(--skippr-spacing)*3)}.skippr\\:mb-4{margin-bottom:calc(var(--skippr-spacing)*4)}.skippr\\:line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.skippr\\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.skippr\\:flex{display:flex}.skippr\\:grid{display:grid}.skippr\\:inline-flex{display:inline-flex}.skippr\\:size-1{width:calc(var(--skippr-spacing)*1);height:calc(var(--skippr-spacing)*1)}.skippr\\:size-1\\.5{width:calc(var(--skippr-spacing)*1.5);height:calc(var(--skippr-spacing)*1.5)}.skippr\\:size-2{width:calc(var(--skippr-spacing)*2);height:calc(var(--skippr-spacing)*2)}.skippr\\:size-2\\.5{width:calc(var(--skippr-spacing)*2.5);height:calc(var(--skippr-spacing)*2.5)}.skippr\\:size-3\\.5{width:calc(var(--skippr-spacing)*3.5);height:calc(var(--skippr-spacing)*3.5)}.skippr\\:size-4{width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}.skippr\\:size-5{width:calc(var(--skippr-spacing)*5);height:calc(var(--skippr-spacing)*5)}.skippr\\:size-6{width:calc(var(--skippr-spacing)*6);height:calc(var(--skippr-spacing)*6)}.skippr\\:size-7{width:calc(var(--skippr-spacing)*7);height:calc(var(--skippr-spacing)*7)}.skippr\\:size-8{width:calc(var(--skippr-spacing)*8);height:calc(var(--skippr-spacing)*8)}.skippr\\:size-9{width:calc(var(--skippr-spacing)*9);height:calc(var(--skippr-spacing)*9)}.skippr\\:size-10{width:calc(var(--skippr-spacing)*10);height:calc(var(--skippr-spacing)*10)}.skippr\\:size-11{width:calc(var(--skippr-spacing)*11);height:calc(var(--skippr-spacing)*11)}.skippr\\:size-12{width:calc(var(--skippr-spacing)*12);height:calc(var(--skippr-spacing)*12)}.skippr\\:size-full{width:100%;height:100%}.skippr\\:h-0{height:calc(var(--skippr-spacing)*0)}.skippr\\:h-0\\.5{height:calc(var(--skippr-spacing)*.5)}.skippr\\:h-1{height:calc(var(--skippr-spacing)*1)}.skippr\\:h-1\\.5{height:calc(var(--skippr-spacing)*1.5)}.skippr\\:h-2{height:calc(var(--skippr-spacing)*2)}.skippr\\:h-3{height:calc(var(--skippr-spacing)*3)}.skippr\\:h-3\\.5{height:calc(var(--skippr-spacing)*3.5)}.skippr\\:h-4{height:calc(var(--skippr-spacing)*4)}.skippr\\:h-5{height:calc(var(--skippr-spacing)*5)}.skippr\\:h-6{height:calc(var(--skippr-spacing)*6)}.skippr\\:h-8{height:calc(var(--skippr-spacing)*8)}.skippr\\:h-9{height:calc(var(--skippr-spacing)*9)}.skippr\\:h-10{height:calc(var(--skippr-spacing)*10)}.skippr\\:h-12{height:calc(var(--skippr-spacing)*12)}.skippr\\:h-\\[min\\(460px\\,calc\\(100vh-200px\\)\\)\\]{height:min(460px,100vh - 200px)}.skippr\\:h-full{height:100%}.skippr\\:min-h-0{min-height:calc(var(--skippr-spacing)*0)}.skippr\\:w-0{width:calc(var(--skippr-spacing)*0)}.skippr\\:w-3{width:calc(var(--skippr-spacing)*3)}.skippr\\:w-4{width:calc(var(--skippr-spacing)*4)}.skippr\\:w-5{width:calc(var(--skippr-spacing)*5)}.skippr\\:w-9{width:calc(var(--skippr-spacing)*9)}.skippr\\:w-10{width:calc(var(--skippr-spacing)*10)}.skippr\\:w-\\[2px\\]{width:2px}.skippr\\:w-full{width:100%}.skippr\\:max-w-64{max-width:calc(var(--skippr-spacing)*64)}.skippr\\:max-w-72{max-width:calc(var(--skippr-spacing)*72)}.skippr\\:max-w-\\[80\\%\\]{max-width:80%}.skippr\\:min-w-0{min-width:calc(var(--skippr-spacing)*0)}.skippr\\:flex-1{flex:1}.skippr\\:shrink-0{flex-shrink:0}.skippr\\:origin-bottom-left{transform-origin:0 100%}.skippr\\:origin-bottom-right{transform-origin:100% 100%}.skippr\\:origin-center{transform-origin:50%}.skippr\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:scale-0{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:rotate-\\[225deg\\]{rotate:225deg}.skippr\\:animate-\\[skippr-banner-look_2\\.4s_ease-in-out_infinite\\]{animation:2.4s ease-in-out infinite skippr-banner-look}.skippr\\:animate-\\[skippr-bubble-in_0\\.28s_ease-out\\]{animation:.28s ease-out skippr-bubble-in}.skippr\\:animate-\\[skippr-fade-in_0\\.3s_ease-out\\]{animation:.3s ease-out skippr-fade-in}.skippr\\:animate-\\[skippr-pill-content_0\\.22s_ease-out\\]{animation:.22s ease-out skippr-pill-content}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.3s_infinite\\]{animation:1.1s ease-in-out .3s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.6s_infinite\\]{animation:1.1s ease-in-out .6s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.15s_infinite\\]{animation:1.1s ease-in-out .15s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.45s_infinite\\]{animation:1.1s ease-in-out .45s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-speak}.skippr\\:animate-bounce{animation:var(--skippr-animate-bounce)}.skippr\\:animate-ping{animation:var(--skippr-animate-ping)}.skippr\\:animate-skippr-annotation-pulse{animation:1.8s ease-in-out infinite skippr-annotation-pulse}.skippr\\:animate-skippr-press{animation:.5s ease-in-out skippr-press}.skippr\\:animate-skippr-tab-fade{animation:.2s ease-out skippr-tab-fade}.skippr\\:animate-skippr-thinking-dot{animation:1.2s ease-in-out infinite skippr-thinking-dot}.skippr\\:animate-spin{animation:var(--skippr-animate-spin)}.skippr\\:cursor-pointer{cursor:pointer}.skippr\\:resize-none{resize:none}.skippr\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.skippr\\:flex-col{flex-direction:column}.skippr\\:items-center{align-items:center}.skippr\\:items-end{align-items:flex-end}.skippr\\:items-start{align-items:flex-start}.skippr\\:justify-between{justify-content:space-between}.skippr\\:justify-center{justify-content:center}.skippr\\:justify-end{justify-content:flex-end}.skippr\\:gap-0\\.5{gap:calc(var(--skippr-spacing)*.5)}.skippr\\:gap-1{gap:calc(var(--skippr-spacing)*1)}.skippr\\:gap-1\\.5{gap:calc(var(--skippr-spacing)*1.5)}.skippr\\:gap-2{gap:calc(var(--skippr-spacing)*2)}.skippr\\:gap-2\\.5{gap:calc(var(--skippr-spacing)*2.5)}.skippr\\:gap-3{gap:calc(var(--skippr-spacing)*3)}.skippr\\:gap-\\[2px\\]{gap:2px}.skippr\\:gap-\\[3px\\]{gap:3px}:where(.skippr\\:space-y-0\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}.skippr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.skippr\\:overflow-hidden{overflow:hidden}.skippr\\:overflow-y-auto{overflow-y:auto}.skippr\\:rounded-2xl{border-radius:1.125rem}.skippr\\:rounded-\\[1rem\\]{border-radius:1rem}.skippr\\:rounded-\\[10px\\]{border-radius:10px}.skippr\\:rounded-\\[14px\\]{border-radius:14px}.skippr\\:rounded-full{border-radius:3.40282e38px}.skippr\\:rounded-lg{border-radius:.625rem}.skippr\\:rounded-md{border-radius:.5rem}.skippr\\:rounded-sm{border-radius:.375rem}.skippr\\:rounded-xl{border-radius:.875rem}.skippr\\:border{border-style:var(--tw-border-style);border-width:1px}.skippr\\:border-0{border-style:var(--tw-border-style);border-width:0}.skippr\\:border-2{border-style:var(--tw-border-style);border-width:2px}.skippr\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.skippr\\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.skippr\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.skippr\\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.skippr\\:border-border{border-color:oklch(92.3% .003 48.717)}.skippr\\:border-cyan-400{border-color:var(--skippr-color-cyan-400)}.skippr\\:border-destructive\\/20{border-color:oklab(61.4357% .15892 .0698893/.2)}.skippr\\:border-input{border-color:oklch(92.3% .003 48.717)}.skippr\\:border-primary\\/20{border-color:oklab(29.9244% .0107414 -.0305411/.2)}.skippr\\:border-r-border{border-right-color:oklch(92.3% .003 48.717)}.skippr\\:border-l-border{border-left-color:oklch(92.3% .003 48.717)}.skippr\\:bg-amber-400{background-color:var(--skippr-color-amber-400)}.skippr\\:bg-background{background-color:oklch(100% 0 0)}.skippr\\:bg-bubble{background-color:#2d2b3d}.skippr\\:bg-bubble\\/15{background-color:oklab(29.9244% .0107414 -.0305411/.15)}.skippr\\:bg-bubble\\/95{background-color:oklab(29.9244% .0107414 -.0305411/.95)}.skippr\\:bg-card{background-color:oklch(100% 0 0)}.skippr\\:bg-current{background-color:currentColor}.skippr\\:bg-cyan-400{background-color:var(--skippr-color-cyan-400)}.skippr\\:bg-cyan-500{background-color:var(--skippr-color-cyan-500)}.skippr\\:bg-destructive{background-color:#d94f4f}.skippr\\:bg-destructive\\/10{background-color:oklab(61.4357% .15892 .0698893/.1)}.skippr\\:bg-destructive\\/15{background-color:oklab(61.4357% .15892 .0698893/.15)}.skippr\\:bg-emerald-400{background-color:var(--skippr-color-emerald-400)}.skippr\\:bg-foreground{background-color:oklch(14.7% .004 49.25)}.skippr\\:bg-muted{background-color:oklch(97% .001 106.424)}.skippr\\:bg-muted-foreground\\/20{background-color:oklab(55.3% .00687528 .0110332/.2)}.skippr\\:bg-muted-foreground\\/40{background-color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:bg-muted\\/50{background-color:oklab(97% -.000282743 .000959196/.5)}.skippr\\:bg-primary{background-color:#2d2b3d}.skippr\\:bg-primary-foreground\\/15{background-color:oklab(100% 0 5.96046e-8/.15)}.skippr\\:bg-primary-foreground\\/20{background-color:oklab(100% 0 5.96046e-8/.2)}.skippr\\:bg-primary\\/10{background-color:oklab(29.9244% .0107414 -.0305411/.1)}.skippr\\:bg-red-50{background-color:var(--skippr-color-red-50)}.skippr\\:bg-red-400{background-color:var(--skippr-color-red-400)}.skippr\\:bg-secondary{background-color:#ffdfb5}.skippr\\:bg-transparent{background-color:#0000}.skippr\\:bg-white{background-color:var(--skippr-color-white)}.skippr\\:bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.skippr\\:from-background{--tw-gradient-from:oklch(100% 0 0);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.skippr\\:to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.skippr\\:fill-primary\\/30{fill:oklab(29.9244% .0107414 -.0305411/.3)}.skippr\\:p-2{padding:calc(var(--skippr-spacing)*2)}.skippr\\:p-3{padding:calc(var(--skippr-spacing)*3)}.skippr\\:p-3\\.5{padding:calc(var(--skippr-spacing)*3.5)}.skippr\\:p-4{padding:calc(var(--skippr-spacing)*4)}.skippr\\:p-6{padding:calc(var(--skippr-spacing)*6)}.skippr\\:px-1{padding-inline:calc(var(--skippr-spacing)*1)}.skippr\\:px-1\\.5{padding-inline:calc(var(--skippr-spacing)*1.5)}.skippr\\:px-2{padding-inline:calc(var(--skippr-spacing)*2)}.skippr\\:px-2\\.5{padding-inline:calc(var(--skippr-spacing)*2.5)}.skippr\\:px-3{padding-inline:calc(var(--skippr-spacing)*3)}.skippr\\:px-4{padding-inline:calc(var(--skippr-spacing)*4)}.skippr\\:px-6{padding-inline:calc(var(--skippr-spacing)*6)}.skippr\\:px-8{padding-inline:calc(var(--skippr-spacing)*8)}.skippr\\:py-0\\.5{padding-block:calc(var(--skippr-spacing)*.5)}.skippr\\:py-1{padding-block:calc(var(--skippr-spacing)*1)}.skippr\\:py-1\\.5{padding-block:calc(var(--skippr-spacing)*1.5)}.skippr\\:py-2{padding-block:calc(var(--skippr-spacing)*2)}.skippr\\:py-2\\.5{padding-block:calc(var(--skippr-spacing)*2.5)}.skippr\\:py-3{padding-block:calc(var(--skippr-spacing)*3)}.skippr\\:py-4{padding-block:calc(var(--skippr-spacing)*4)}.skippr\\:pt-3{padding-top:calc(var(--skippr-spacing)*3)}.skippr\\:pr-1\\.5{padding-right:calc(var(--skippr-spacing)*1.5)}.skippr\\:pb-5{padding-bottom:calc(var(--skippr-spacing)*5)}.skippr\\:pl-3\\.5{padding-left:calc(var(--skippr-spacing)*3.5)}.skippr\\:text-center{text-align:center}.skippr\\:text-left{text-align:left}.skippr\\:font-mono{font-family:var(--skippr-font-mono)}.skippr\\:text-sm{font-size:var(--skippr-text-sm);line-height:var(--tw-leading,var(--skippr-text-sm--line-height))}.skippr\\:text-xs{font-size:var(--skippr-text-xs);line-height:var(--tw-leading,var(--skippr-text-xs--line-height))}.skippr\\:text-\\[9px\\]{font-size:9px}.skippr\\:text-\\[10px\\]{font-size:10px}.skippr\\:text-\\[11px\\]{font-size:11px}.skippr\\:leading-5{--tw-leading:calc(var(--skippr-spacing)*5);line-height:calc(var(--skippr-spacing)*5)}.skippr\\:leading-relaxed{--tw-leading:var(--skippr-leading-relaxed);line-height:var(--skippr-leading-relaxed)}.skippr\\:leading-snug{--tw-leading:var(--skippr-leading-snug);line-height:var(--skippr-leading-snug)}.skippr\\:leading-tight{--tw-leading:var(--skippr-leading-tight);line-height:var(--skippr-leading-tight)}.skippr\\:font-medium{--tw-font-weight:var(--skippr-font-weight-medium);font-weight:var(--skippr-font-weight-medium)}.skippr\\:font-semibold{--tw-font-weight:var(--skippr-font-weight-semibold);font-weight:var(--skippr-font-weight-semibold)}.skippr\\:tracking-wide{--tw-tracking:var(--skippr-tracking-wide);letter-spacing:var(--skippr-tracking-wide)}.skippr\\:tracking-wider{--tw-tracking:var(--skippr-tracking-wider);letter-spacing:var(--skippr-tracking-wider)}.skippr\\:whitespace-nowrap{white-space:nowrap}.skippr\\:text-background{color:oklch(100% 0 0)}.skippr\\:text-bubble{color:#2d2b3d}.skippr\\:text-chart-3{color:oklch(66.6% .179 58.318)}.skippr\\:text-cyan-500{color:var(--skippr-color-cyan-500)}.skippr\\:text-cyan-900{color:var(--skippr-color-cyan-900)}.skippr\\:text-destructive{color:#d94f4f}.skippr\\:text-destructive-foreground{color:oklch(100% 0 0)}.skippr\\:text-foreground{color:oklch(14.7% .004 49.25)}.skippr\\:text-muted-foreground{color:oklch(55.3% .013 58.071)}.skippr\\:text-muted-foreground\\/30{color:oklab(55.3% .00687528 .0110332/.3)}.skippr\\:text-muted-foreground\\/40{color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:text-muted-foreground\\/60{color:oklab(55.3% .00687528 .0110332/.6)}.skippr\\:text-muted-foreground\\/70{color:oklab(55.3% .00687528 .0110332/.7)}.skippr\\:text-primary{color:#2d2b3d}.skippr\\:text-primary-foreground{color:#fff}.skippr\\:text-primary-foreground\\/70{color:oklab(100% 0 5.96046e-8/.7)}.skippr\\:text-red-700{color:var(--skippr-color-red-700)}.skippr\\:text-secondary-foreground{color:#613700}.skippr\\:text-white,.skippr\\:text-white\\/70{color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:text-white\\/70{color:color-mix(in oklab,var(--skippr-color-white)70%,transparent)}}.skippr\\:uppercase{text-transform:uppercase}.skippr\\:line-through{text-decoration-line:line-through}.skippr\\:placeholder-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}.skippr\\:opacity-0{opacity:0}.skippr\\:opacity-75{opacity:.75}.skippr\\:opacity-100{opacity:1}.skippr\\:shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.12\\)\\]{--tw-shadow:0 4px 12px var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 4px 12px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_16px_rgba\\(0\\,0\\,0\\,0\\.15\\)\\,0_2px_4px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow:0 4px 16px var(--tw-shadow-color,#00000026),0 2px 4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_16px_rgba\\(45\\,43\\,61\\,0\\.45\\)\\,0_2px_4px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow:0 4px 16px var(--tw-shadow-color,#2d2b3d73),0 2px 4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_16px_rgba\\(217\\,79\\,79\\,0\\.45\\)\\,0_2px_4px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow:0 4px 16px var(--tw-shadow-color,#d94f4f73),0 2px 4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_24px_rgba\\(45\\,43\\,61\\,0\\.35\\)\\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,#2d2b3d59);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_30px_rgba\\(0\\,0\\,0\\,0\\.16\\)\\,0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\]{--tw-shadow:0 8px 30px var(--tw-shadow-color,#00000029),0 4px 12px var(--tw-shadow-color,#00000014);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:ring-foreground\\/10{--tw-ring-color:oklab(14.7% .00261104 .00303026/.1)}.skippr\\:ring-offset-background{--tw-ring-offset-color:oklch(100% 0 0)}.skippr\\:drop-shadow-\\[0_1px_3px_rgba\\(0\\,0\\,0\\,0\\.35\\)\\]{--tw-drop-shadow-size:drop-shadow(0 1px 3px var(--tw-drop-shadow-color,#00000059));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.skippr\\:backdrop-blur-sm{--tw-backdrop-blur:blur(var(--skippr-blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.skippr\\:transition-\\[opacity\\,transform\\]{transition-property:opacity,transform;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-\\[width\\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:duration-150{--tw-duration:.15s;transition-duration:.15s}.skippr\\:duration-300{--tw-duration:.3s;transition-duration:.3s}.skippr\\:ease-in-out{--tw-ease:var(--skippr-ease-in-out);transition-timing-function:var(--skippr-ease-in-out)}.skippr\\:outline-none{--tw-outline-style:none;outline-style:none}.skippr\\:\\[animation-delay\\:0ms\\]{animation-delay:0s}.skippr\\:\\[animation-delay\\:150ms\\]{animation-delay:.15s}.skippr\\:\\[animation-delay\\:200ms\\]{animation-delay:.2s}.skippr\\:\\[animation-delay\\:300ms\\]{animation-delay:.3s}.skippr\\:\\[animation-delay\\:400ms\\]{animation-delay:.4s}.skippr\\:group-focus-within\\:scale-100:is(:where(.skippr\\:group):focus-within *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-focus-within\\:opacity-100:is(:where(.skippr\\:group):focus-within *){opacity:1}@media (hover:hover){.skippr\\:group-hover\\:scale-100:is(:where(.skippr\\:group):hover *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-hover\\:opacity-100:is(:where(.skippr\\:group):hover *){opacity:1}}.skippr\\:placeholder\\:text-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}@media (hover:hover){.skippr\\:hover\\:-translate-y-0\\.5:hover{--tw-translate-y:calc(var(--skippr-spacing)*-.5);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:hover\\:bg-accent:hover{background-color:#e7e5e4}.skippr\\:hover\\:bg-bubble:hover{background-color:#2d2b3d}.skippr\\:hover\\:bg-destructive\\/20:hover{background-color:oklab(61.4357% .15892 .0698893/.2)}.skippr\\:hover\\:bg-destructive\\/25:hover{background-color:oklab(61.4357% .15892 .0698893/.25)}.skippr\\:hover\\:bg-destructive\\/90:hover{background-color:oklab(61.4357% .15892 .0698893/.9)}.skippr\\:hover\\:bg-muted:hover{background-color:oklch(97% .001 106.424)}.skippr\\:hover\\:bg-muted\\/50:hover{background-color:oklab(97% -.000282743 .000959196/.5)}.skippr\\:hover\\:bg-muted\\/80:hover{background-color:oklab(97% -.000282743 .000959196/.8)}.skippr\\:hover\\:bg-primary-foreground\\/10:hover{background-color:oklab(100% 0 5.96046e-8/.1)}.skippr\\:hover\\:bg-primary\\/90:hover{background-color:oklab(29.9244% .0107414 -.0305411/.9)}.skippr\\:hover\\:bg-secondary\\/80:hover{background-color:oklab(91.9963% .0175391 .0626889/.8)}.skippr\\:hover\\:bg-white\\/15:hover{background-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:hover\\:bg-white\\/15:hover{background-color:color-mix(in oklab,var(--skippr-color-white)15%,transparent)}}.skippr\\:hover\\:text-accent-foreground:hover{color:oklch(21.6% .006 56.043)}.skippr\\:hover\\:text-foreground:hover{color:oklch(14.7% .004 49.25)}.skippr\\:hover\\:text-primary-foreground:hover{color:#fff}.skippr\\:hover\\:text-white:hover{color:var(--skippr-color-white)}.skippr\\:hover\\:opacity-90:hover{opacity:.9}.skippr\\:hover\\:shadow-\\[0_6px_24px_rgba\\(45\\,43\\,61\\,0\\.55\\)\\,0_4px_8px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]:hover{--tw-shadow:0 6px 24px var(--tw-shadow-color,#2d2b3d8c),0 4px 8px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:hover\\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}.skippr\\:focus-visible\\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:focus-visible\\:ring-ring:focus-visible{--tw-ring-color:oklch(70.9% .01 56.259)}.skippr\\:focus-visible\\:ring-white\\/70:focus-visible{--tw-ring-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:focus-visible\\:ring-white\\/70:focus-visible{--tw-ring-color:color-mix(in oklab,var(--skippr-color-white)70%,transparent)}}.skippr\\:focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.skippr\\:focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.skippr\\:focus-visible\\:ring-inset:focus-visible{--tw-ring-inset:inset}.skippr\\:active\\:translate-y-0:active{--tw-translate-y:calc(var(--skippr-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:disabled\\:pointer-events-none:disabled{pointer-events:none}.skippr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.skippr\\:disabled\\:opacity-50:disabled{opacity:.5}.skippr\\:disabled\\:opacity-60:disabled{opacity:.6}.skippr\\:\\[\\&_svg\\]\\:pointer-events-none svg{pointer-events:none}.skippr\\:\\[\\&_svg\\]\\:shrink-0 svg{flex-shrink:0}.skippr\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 svg:not([class*=size-]){width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}}@keyframes skippr-tap{0%{transform:scale(1)}45%{transform:scale(.7)}to{transform:scale(1)}}@keyframes skippr-press{0%{transform:scale(1)}55%{transform:scale(1)}85%{transform:scale(.68)}to{transform:scale(1)}}@keyframes skippr-tab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-speak{0%,to{opacity:.6;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-thinking-dot{0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}@keyframes skippr-pulse-ring{0%,to{box-shadow:0 0 #2d2b3d66}50%{box-shadow:0 0 0 10px #2d2b3d00}}@keyframes skippr-annotation-pulse{0%,to{box-shadow:0 0 #22d3ee73}50%{box-shadow:0 0 0 10px #22d3ee00}}@keyframes skippr-speak-ripple{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}@keyframes skippr-bar{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}@keyframes skippr-breathe{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes skippr-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-wave{0%,to{opacity:.4;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-bubble-in{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes skippr-pill-content{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes skippr-banner-look{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.skippr-no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.skippr-no-scrollbar::-webkit-scrollbar{display:none}:host{color:var(--color-foreground)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}`;
|
|
3235
|
+
@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-300:oklch(80.8% .114 19.571);--skippr-color-red-400:oklch(70.4% .191 22.216);--skippr-color-red-700:oklch(50.5% .213 27.518);--skippr-color-amber-50:oklch(98.7% .022 95.277);--skippr-color-amber-100:oklch(96.2% .059 95.617);--skippr-color-amber-400:oklch(82.8% .189 84.429);--skippr-color-amber-700:oklch(55.5% .163 48.998);--skippr-color-amber-950:oklch(27.9% .077 45.635);--skippr-color-emerald-400:oklch(76.5% .177 163.223);--skippr-color-emerald-500:oklch(69.6% .17 162.48);--skippr-color-cyan-400:oklch(78.9% .154 211.53);--skippr-color-cyan-500:oklch(71.5% .143 215.221);--skippr-color-cyan-900:oklch(39.8% .07 227.392);--skippr-color-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-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-4{top:calc(var(--skippr-spacing)*4)}.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-2{bottom:calc(var(--skippr-spacing)*-2)}.skippr\\:-bottom-9{bottom:calc(var(--skippr-spacing)*-9)}.skippr\\:bottom-6{bottom:calc(var(--skippr-spacing)*6)}.skippr\\:bottom-12{bottom:calc(var(--skippr-spacing)*12)}.skippr\\:bottom-20{bottom:calc(var(--skippr-spacing)*20)}.skippr\\:bottom-\\[88px\\]{bottom:88px}.skippr\\:bottom-\\[124px\\]{bottom:124px}.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\\: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-2\\.5{height:calc(var(--skippr-spacing)*2.5)}.skippr\\:h-3{height:calc(var(--skippr-spacing)*3)}.skippr\\:h-3\\.5{height:calc(var(--skippr-spacing)*3.5)}.skippr\\:h-4{height:calc(var(--skippr-spacing)*4)}.skippr\\:h-5{height:calc(var(--skippr-spacing)*5)}.skippr\\:h-6{height:calc(var(--skippr-spacing)*6)}.skippr\\:h-8{height:calc(var(--skippr-spacing)*8)}.skippr\\:h-9{height:calc(var(--skippr-spacing)*9)}.skippr\\:h-10{height:calc(var(--skippr-spacing)*10)}.skippr\\:h-12{height:calc(var(--skippr-spacing)*12)}.skippr\\:h-16{height:calc(var(--skippr-spacing)*16)}.skippr\\:h-\\[18\\.5px\\]{height:18.5px}.skippr\\:h-\\[50px\\]{height:50px}.skippr\\:h-\\[min\\(460px\\,calc\\(100vh-200px\\)\\)\\]{height:min(460px,100vh - 200px)}.skippr\\:h-full{height:100%}.skippr\\:min-h-0{min-height:calc(var(--skippr-spacing)*0)}.skippr\\:w-0{width:calc(var(--skippr-spacing)*0)}.skippr\\:w-3{width:calc(var(--skippr-spacing)*3)}.skippr\\:w-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-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\\:-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-\\[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-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-speak_1\\.1s_ease-in-out_0\\.3s_infinite\\]{animation:1.1s ease-in-out .3s infinite skippr-speak}.skippr\\:\\[animation\\:skippr-speak_1\\.1s_ease-in-out_0\\.15s_infinite\\]{animation:1.1s ease-in-out .15s infinite skippr-speak}.skippr\\:\\[animation\\:skippr-speak_1\\.1s_ease-in-out_0\\.45s_infinite\\]{animation:1.1s ease-in-out .45s infinite skippr-speak}.skippr\\:\\[animation\\:skippr-speak_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-speak}.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-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-pointer{cursor:pointer}.skippr\\:resize-none{resize:none}.skippr\\:flex-col{flex-direction:column}.skippr\\:items-center{align-items:center}.skippr\\:items-end{align-items:flex-end}.skippr\\:items-start{align-items:flex-start}.skippr\\:justify-between{justify-content:space-between}.skippr\\:justify-center{justify-content:center}.skippr\\:justify-end{justify-content:flex-end}.skippr\\:gap-1{gap:calc(var(--skippr-spacing)*1)}.skippr\\:gap-1\\.5{gap:calc(var(--skippr-spacing)*1.5)}.skippr\\:gap-2{gap:calc(var(--skippr-spacing)*2)}.skippr\\:gap-2\\.5{gap:calc(var(--skippr-spacing)*2.5)}.skippr\\:gap-3{gap:calc(var(--skippr-spacing)*3)}.skippr\\:gap-\\[2px\\]{gap:2px}.skippr\\:gap-\\[3px\\]{gap:3px}:where(.skippr\\:space-y-0\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}.skippr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.skippr\\:overflow-hidden{overflow:hidden}.skippr\\:overflow-y-auto{overflow-y:auto}.skippr\\:rounded-2xl{border-radius:1.125rem}.skippr\\:rounded-\\[1rem\\]{border-radius:1rem}.skippr\\:rounded-\\[10px\\]{border-radius:10px}.skippr\\:rounded-\\[14px\\]{border-radius:14px}.skippr\\:rounded-\\[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\\:border{border-style:var(--tw-border-style);border-width:1px}.skippr\\:border-0{border-style:var(--tw-border-style);border-width:0}.skippr\\:border-2{border-style:var(--tw-border-style);border-width:2px}.skippr\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.skippr\\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.skippr\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.skippr\\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.skippr\\:border-border{border-color:oklch(92.3% .003 48.717)}.skippr\\:border-cyan-400{border-color:var(--skippr-color-cyan-400)}.skippr\\:border-input{border-color:oklch(92.3% .003 48.717)}.skippr\\:border-primary\\/20{border-color:oklab(29.9244% .0107414 -.0305411/.2)}.skippr\\:border-r-border{border-right-color:oklch(92.3% .003 48.717)}.skippr\\:border-l-border{border-left-color:oklch(92.3% .003 48.717)}.skippr\\:bg-amber-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-cyan-400{background-color:var(--skippr-color-cyan-400)}.skippr\\:bg-cyan-500{background-color:var(--skippr-color-cyan-500)}.skippr\\:bg-destructive{background-color:#d94f4f}.skippr\\:bg-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-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-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-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-3{padding-top:calc(var(--skippr-spacing)*3)}.skippr\\:pr-3{padding-right:calc(var(--skippr-spacing)*3)}.skippr\\:pb-1{padding-bottom:calc(var(--skippr-spacing)*1)}.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-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-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-cyan-500{color:var(--skippr-color-cyan-500)}.skippr\\:text-cyan-900{color:var(--skippr-color-cyan-900)}.skippr\\:text-destructive{color:#d94f4f}.skippr\\:text-foreground{color:oklch(14.7% .004 49.25)}.skippr\\:text-muted-foreground{color:oklch(55.3% .013 58.071)}.skippr\\:text-muted-foreground\\/30{color:oklab(55.3% .00687528 .0110332/.3)}.skippr\\:text-muted-foreground\\/40{color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:text-muted-foreground\\/60{color:oklab(55.3% .00687528 .0110332/.6)}.skippr\\:text-muted-foreground\\/70{color:oklab(55.3% .00687528 .0110332/.7)}.skippr\\:text-neutral-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-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_12px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 4px 12px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_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-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-foreground\\/10{--tw-ring-color:oklab(14.7% .00261104 .00303026/.1)}.skippr\\:ring-offset-background{--tw-ring-offset-color:oklch(100% 0 0)}.skippr\\:drop-shadow-\\[0_1px_3px_rgba\\(0\\,0\\,0\\,0\\.35\\)\\]{--tw-drop-shadow-size:drop-shadow(0 1px 3px var(--tw-drop-shadow-color,#00000059));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.skippr\\:backdrop-blur-sm{--tw-backdrop-blur:blur(var(--skippr-blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.skippr\\:transition-\\[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\\]{transition-property:opacity,transform;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-\\[width\\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-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\\:\\[animation-delay\\:0ms\\]{animation-delay:0s}.skippr\\:\\[animation-delay\\:150ms\\]{animation-delay:.15s}.skippr\\:\\[animation-delay\\:200ms\\]{animation-delay:.2s}.skippr\\:\\[animation-delay\\:300ms\\]{animation-delay:.3s}.skippr\\:\\[animation-delay\\:400ms\\]{animation-delay:.4s}.skippr\\:group-focus-within\\:scale-100:is(:where(.skippr\\:group):focus-within *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-focus-within\\:opacity-100:is(:where(.skippr\\:group):focus-within *){opacity:1}@media (hover:hover){.skippr\\:group-hover\\:scale-100:is(:where(.skippr\\:group):hover *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-hover\\:opacity-100:is(:where(.skippr\\:group):hover *){opacity:1}}.skippr\\:placeholder\\:text-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}@media (hover:hover){.skippr\\:hover\\:-translate-y-0\\.5:hover{--tw-translate-y:calc(var(--skippr-spacing)*-.5);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:hover\\: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-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-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\\:text-red-300:hover{color:var(--skippr-color-red-300)}.skippr\\:hover\\:text-white\\/80:hover{color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:hover\\:text-white\\/80:hover{color:color-mix(in oklab,var(--skippr-color-white)80%,transparent)}}.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\\:opacity-100:focus-visible{opacity:1}.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-tab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-speak{0%,to{opacity:.6;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-thinking-dot{0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}@keyframes skippr-pulse-ring{0%,to{box-shadow:0 0 #2d2b3d66}50%{box-shadow:0 0 0 10px #2d2b3d00}}@keyframes skippr-annotation-pulse{0%,to{box-shadow:0 0 #22d3ee73}50%{box-shadow:0 0 0 10px #22d3ee00}}@keyframes skippr-speak-ripple{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}@keyframes skippr-bar{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}@keyframes skippr-breathe{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes skippr-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-wave{0%,to{opacity:.4;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-bubble-in{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes skippr-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-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}}`;
|
|
3030
3236
|
useLayoutEffect(() => {
|
|
3031
3237
|
const host = hostRef.current;
|
|
3032
3238
|
if (!host || !css)
|
|
@@ -3041,7 +3247,7 @@ function ShadowHost({ children }) {
|
|
|
3041
3247
|
setShadowRoot(root);
|
|
3042
3248
|
}, [css]);
|
|
3043
3249
|
if (!css)
|
|
3044
|
-
return /* @__PURE__ */ jsx8(
|
|
3250
|
+
return /* @__PURE__ */ jsx8(Fragment, {
|
|
3045
3251
|
children
|
|
3046
3252
|
});
|
|
3047
3253
|
return /* @__PURE__ */ jsx8("div", {
|
|
@@ -3051,14 +3257,14 @@ function ShadowHost({ children }) {
|
|
|
3051
3257
|
}
|
|
3052
3258
|
|
|
3053
3259
|
// src/components/Sidebar.tsx
|
|
3054
|
-
import { useContext as
|
|
3260
|
+
import { useContext as useContext8, useEffect as useEffect19 } from "react";
|
|
3055
3261
|
|
|
3056
3262
|
// src/hooks/useCombinedMessages.ts
|
|
3057
|
-
import { useContext as
|
|
3263
|
+
import { useContext as useContext6, useMemo as useMemo5 } from "react";
|
|
3058
3264
|
|
|
3059
3265
|
// src/hooks/useChatMessages.ts
|
|
3060
|
-
import { useChat, useLocalParticipant as
|
|
3061
|
-
import { useMemo as
|
|
3266
|
+
import { useChat, useLocalParticipant as useLocalParticipant5 } from "@livekit/components-react/hooks";
|
|
3267
|
+
import { useMemo as useMemo3 } from "react";
|
|
3062
3268
|
|
|
3063
3269
|
// src/lib/filterSystemMessages.ts
|
|
3064
3270
|
var SYSTEM_MESSAGE_PATTERN = /^\[\w+\]$/;
|
|
@@ -3069,9 +3275,9 @@ function filterSystemMessages(messages) {
|
|
|
3069
3275
|
// src/hooks/useChatMessages.ts
|
|
3070
3276
|
function useChatMessages() {
|
|
3071
3277
|
const { chatMessages: rawMessages, send, isSending } = useChat();
|
|
3072
|
-
const { localParticipant } =
|
|
3278
|
+
const { localParticipant } = useLocalParticipant5();
|
|
3073
3279
|
const localIdentity = localParticipant.identity;
|
|
3074
|
-
const chatMessages =
|
|
3280
|
+
const chatMessages = useMemo3(() => {
|
|
3075
3281
|
const sortedMessages = rawMessages.map((msg) => ({
|
|
3076
3282
|
id: msg.id,
|
|
3077
3283
|
role: msg.from?.identity === localIdentity ? "user" : "assistant",
|
|
@@ -3085,128 +3291,62 @@ function useChatMessages() {
|
|
|
3085
3291
|
}
|
|
3086
3292
|
|
|
3087
3293
|
// src/hooks/useStreamingTranscript.ts
|
|
3088
|
-
import { useLocalParticipant as
|
|
3089
|
-
import { useMemo as
|
|
3294
|
+
import { useLocalParticipant as useLocalParticipant6, useTranscriptions } from "@livekit/components-react/hooks";
|
|
3295
|
+
import { useMemo as useMemo4 } from "react";
|
|
3090
3296
|
function useStreamingTranscript() {
|
|
3091
3297
|
const transcriptions = useTranscriptions();
|
|
3092
|
-
const { localParticipant } =
|
|
3298
|
+
const { localParticipant } = useLocalParticipant6();
|
|
3093
3299
|
const localIdentity = localParticipant.identity;
|
|
3094
|
-
const transcriptMessages =
|
|
3300
|
+
const transcriptMessages = useMemo4(() => filterSystemMessages(transcriptions.filter((stream) => stream.text.trim().length > 0).map((stream) => ({
|
|
3095
3301
|
id: stream.streamInfo.id,
|
|
3096
3302
|
role: stream.participantInfo.identity === localIdentity ? "user" : "assistant",
|
|
3097
3303
|
content: stream.text,
|
|
3098
|
-
source: "voice-transcript",
|
|
3099
|
-
timestamp: stream.streamInfo.timestamp
|
|
3100
|
-
}))), [transcriptions, localIdentity]);
|
|
3101
|
-
return { transcriptMessages };
|
|
3102
|
-
}
|
|
3103
|
-
|
|
3104
|
-
// src/hooks/useCombinedMessages.ts
|
|
3105
|
-
function mergeChatsIntoTranscripts(transcripts, chats) {
|
|
3106
|
-
const merged = [];
|
|
3107
|
-
let chatIndex = 0;
|
|
3108
|
-
for (const transcript of transcripts) {
|
|
3109
|
-
while (chatIndex < chats.length && (chats[chatIndex].timestamp ?? 0) <= (transcript.timestamp ?? 0)) {
|
|
3110
|
-
merged.push(chats[chatIndex]);
|
|
3111
|
-
chatIndex++;
|
|
3112
|
-
}
|
|
3113
|
-
merged.push(transcript);
|
|
3114
|
-
}
|
|
3115
|
-
while (chatIndex < chats.length) {
|
|
3116
|
-
merged.push(chats[chatIndex]);
|
|
3117
|
-
chatIndex++;
|
|
3118
|
-
}
|
|
3119
|
-
return merged;
|
|
3120
|
-
}
|
|
3121
|
-
function useCombinedMessages() {
|
|
3122
|
-
const { transcriptMessages } = useStreamingTranscript();
|
|
3123
|
-
const { chatMessages, sendChatMessage, isSendingChat } = useChatMessages();
|
|
3124
|
-
const { state: agentState } = useAgentVoiceState();
|
|
3125
|
-
const historyMessages = useContext4(LiveAgentContext)?.historyMessages ?? [];
|
|
3126
|
-
const liveMessages = useMemo4(() => {
|
|
3127
|
-
if (chatMessages.length === 0)
|
|
3128
|
-
return transcriptMessages;
|
|
3129
|
-
if (transcriptMessages.length === 0)
|
|
3130
|
-
return chatMessages;
|
|
3131
|
-
return mergeChatsIntoTranscripts(transcriptMessages, chatMessages);
|
|
3132
|
-
}, [transcriptMessages, chatMessages]);
|
|
3133
|
-
const allMessages = useMemo4(() => {
|
|
3134
|
-
if (historyMessages.length === 0)
|
|
3135
|
-
return liveMessages;
|
|
3136
|
-
const seenIds = new Set(liveMessages.map((message) => message.id));
|
|
3137
|
-
return [...historyMessages.filter((message) => !seenIds.has(message.id)), ...liveMessages];
|
|
3138
|
-
}, [historyMessages, liveMessages]);
|
|
3139
|
-
return { allMessages, agentState, sendChatMessage, isSendingChat };
|
|
3140
|
-
}
|
|
3141
|
-
|
|
3142
|
-
// src/hooks/usePhaseUpdates.ts
|
|
3143
|
-
import { useCallback as useCallback8, useContext as useContext5, useEffect as useEffect12 } from "react";
|
|
3144
|
-
|
|
3145
|
-
// src/hooks/useAgentState.ts
|
|
3146
|
-
import { useRemoteParticipants } from "@livekit/components-react/hooks";
|
|
3147
|
-
import { useEffect as useEffect11, useState as useState9 } from "react";
|
|
3148
|
-
function useAgentState(attributeKey, parse, initial) {
|
|
3149
|
-
const [value, setValue] = useState9(initial);
|
|
3150
|
-
const remoteParticipants = useRemoteParticipants();
|
|
3151
|
-
useEffect11(() => {
|
|
3152
|
-
const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
|
|
3153
|
-
if (agentParticipant) {
|
|
3154
|
-
const attr = agentParticipant.attributes?.[attributeKey];
|
|
3155
|
-
if (attr) {
|
|
3156
|
-
const parsed = parse(attr);
|
|
3157
|
-
if (parsed)
|
|
3158
|
-
setValue(parsed);
|
|
3159
|
-
}
|
|
3160
|
-
}
|
|
3161
|
-
const handlers = new Map;
|
|
3162
|
-
for (const p of remoteParticipants) {
|
|
3163
|
-
const handler = (changedAttributes) => {
|
|
3164
|
-
if (changedAttributes[attributeKey]) {
|
|
3165
|
-
const parsed = parse(changedAttributes[attributeKey]);
|
|
3166
|
-
if (parsed)
|
|
3167
|
-
setValue(parsed);
|
|
3168
|
-
} else if (p.attributes?.[attributeKey]) {
|
|
3169
|
-
const parsed = parse(p.attributes[attributeKey]);
|
|
3170
|
-
if (parsed)
|
|
3171
|
-
setValue(parsed);
|
|
3172
|
-
}
|
|
3173
|
-
};
|
|
3174
|
-
handlers.set(p, handler);
|
|
3175
|
-
p.on("attributesChanged", handler);
|
|
3176
|
-
}
|
|
3177
|
-
return () => {
|
|
3178
|
-
for (const [p, handler] of handlers) {
|
|
3179
|
-
p.off("attributesChanged", handler);
|
|
3180
|
-
}
|
|
3181
|
-
};
|
|
3182
|
-
}, [remoteParticipants, attributeKey, parse]);
|
|
3183
|
-
return value;
|
|
3304
|
+
source: "voice-transcript",
|
|
3305
|
+
timestamp: stream.streamInfo.timestamp
|
|
3306
|
+
}))), [transcriptions, localIdentity]);
|
|
3307
|
+
return { transcriptMessages };
|
|
3184
3308
|
}
|
|
3185
3309
|
|
|
3186
|
-
// src/hooks/
|
|
3187
|
-
function
|
|
3188
|
-
|
|
3189
|
-
|
|
3190
|
-
|
|
3191
|
-
|
|
3310
|
+
// src/hooks/useCombinedMessages.ts
|
|
3311
|
+
function mergeChatsIntoTranscripts(transcripts, chats) {
|
|
3312
|
+
const merged = [];
|
|
3313
|
+
let chatIndex = 0;
|
|
3314
|
+
for (const transcript of transcripts) {
|
|
3315
|
+
while (chatIndex < chats.length && (chats[chatIndex].timestamp ?? 0) <= (transcript.timestamp ?? 0)) {
|
|
3316
|
+
merged.push(chats[chatIndex]);
|
|
3317
|
+
chatIndex++;
|
|
3192
3318
|
}
|
|
3193
|
-
|
|
3194
|
-
|
|
3319
|
+
merged.push(transcript);
|
|
3320
|
+
}
|
|
3321
|
+
while (chatIndex < chats.length) {
|
|
3322
|
+
merged.push(chats[chatIndex]);
|
|
3323
|
+
chatIndex++;
|
|
3324
|
+
}
|
|
3325
|
+
return merged;
|
|
3195
3326
|
}
|
|
3196
|
-
function
|
|
3197
|
-
const
|
|
3198
|
-
const
|
|
3199
|
-
const
|
|
3200
|
-
|
|
3201
|
-
|
|
3202
|
-
|
|
3203
|
-
|
|
3204
|
-
|
|
3205
|
-
|
|
3327
|
+
function useCombinedMessages() {
|
|
3328
|
+
const { transcriptMessages } = useStreamingTranscript();
|
|
3329
|
+
const { chatMessages, sendChatMessage, isSendingChat } = useChatMessages();
|
|
3330
|
+
const { state: agentState } = useAgentVoiceState();
|
|
3331
|
+
const historyMessages = useContext6(LiveAgentContext)?.historyMessages ?? [];
|
|
3332
|
+
const liveMessages = useMemo5(() => {
|
|
3333
|
+
if (chatMessages.length === 0)
|
|
3334
|
+
return transcriptMessages;
|
|
3335
|
+
if (transcriptMessages.length === 0)
|
|
3336
|
+
return chatMessages;
|
|
3337
|
+
return mergeChatsIntoTranscripts(transcriptMessages, chatMessages);
|
|
3338
|
+
}, [transcriptMessages, chatMessages]);
|
|
3339
|
+
const allMessages = useMemo5(() => {
|
|
3340
|
+
if (historyMessages.length === 0)
|
|
3341
|
+
return liveMessages;
|
|
3342
|
+
const seenIds = new Set(liveMessages.map((message) => message.id));
|
|
3343
|
+
return [...historyMessages.filter((message) => !seenIds.has(message.id)), ...liveMessages];
|
|
3344
|
+
}, [historyMessages, liveMessages]);
|
|
3345
|
+
return { allMessages, agentState, sendChatMessage, isSendingChat };
|
|
3206
3346
|
}
|
|
3207
3347
|
|
|
3208
3348
|
// src/hooks/useSessionRemaining.ts
|
|
3209
|
-
import { useEffect as
|
|
3349
|
+
import { useEffect as useEffect14, useRef as useRef10, useState as useState12 } from "react";
|
|
3210
3350
|
|
|
3211
3351
|
// src/lib/format.ts
|
|
3212
3352
|
function formatTime(seconds) {
|
|
@@ -3222,9 +3362,9 @@ function parseNumber(s) {
|
|
|
3222
3362
|
// src/hooks/useSessionRemaining.ts
|
|
3223
3363
|
function useSessionRemaining() {
|
|
3224
3364
|
const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
|
|
3225
|
-
const endTimeRef =
|
|
3226
|
-
const [remaining, setRemaining] =
|
|
3227
|
-
|
|
3365
|
+
const endTimeRef = useRef10(null);
|
|
3366
|
+
const [remaining, setRemaining] = useState12(null);
|
|
3367
|
+
useEffect14(() => {
|
|
3228
3368
|
if (maxCallDuration === null || endTimeRef.current !== null)
|
|
3229
3369
|
return;
|
|
3230
3370
|
const endTime = Date.now() + maxCallDuration * 1000;
|
|
@@ -3240,11 +3380,44 @@ function useSessionRemaining() {
|
|
|
3240
3380
|
return remaining;
|
|
3241
3381
|
}
|
|
3242
3382
|
|
|
3383
|
+
// src/hooks/useTextMode.ts
|
|
3384
|
+
import { useLocalParticipant as useLocalParticipant7 } from "@livekit/components-react/hooks";
|
|
3385
|
+
import { useCallback as useCallback9, useContext as useContext7, useRef as useRef11 } from "react";
|
|
3386
|
+
var textEncoder3 = new TextEncoder;
|
|
3387
|
+
function useTextMode() {
|
|
3388
|
+
const ctx = useContext7(LiveAgentContext);
|
|
3389
|
+
if (!ctx) {
|
|
3390
|
+
throw new Error("useTextMode must be used within a <LiveAgent> provider");
|
|
3391
|
+
}
|
|
3392
|
+
const { textMode, setTextModeState, sidebarTab, setSidebarTab } = ctx;
|
|
3393
|
+
const { localParticipant } = useLocalParticipant7();
|
|
3394
|
+
const confirmedTextModeRef = useRef11(false);
|
|
3395
|
+
const toggleTextMode = useCallback9(async () => {
|
|
3396
|
+
const next = !textMode;
|
|
3397
|
+
setTextModeState(next);
|
|
3398
|
+
if (next && sidebarTab === "agenda") {
|
|
3399
|
+
setSidebarTab("chat");
|
|
3400
|
+
}
|
|
3401
|
+
try {
|
|
3402
|
+
await localParticipant.publishData(textEncoder3.encode(JSON.stringify({ textMode: next })), {
|
|
3403
|
+
reliable: true,
|
|
3404
|
+
topic: TEXT_MODE_TOPIC
|
|
3405
|
+
});
|
|
3406
|
+
await localParticipant.setMicrophoneEnabled(!next);
|
|
3407
|
+
confirmedTextModeRef.current = next;
|
|
3408
|
+
} catch (error) {
|
|
3409
|
+
setTextModeState(confirmedTextModeRef.current);
|
|
3410
|
+
console.error("Failed to switch session mode:", error);
|
|
3411
|
+
}
|
|
3412
|
+
}, [textMode, setTextModeState, sidebarTab, setSidebarTab, localParticipant]);
|
|
3413
|
+
return { textMode, toggleTextMode };
|
|
3414
|
+
}
|
|
3415
|
+
|
|
3243
3416
|
// src/hooks/useElapsedSeconds.ts
|
|
3244
|
-
import { useEffect as
|
|
3417
|
+
import { useEffect as useEffect15, useState as useState13 } from "react";
|
|
3245
3418
|
function useElapsedSeconds(isRunning) {
|
|
3246
|
-
const [elapsed, setElapsed] =
|
|
3247
|
-
|
|
3419
|
+
const [elapsed, setElapsed] = useState13(0);
|
|
3420
|
+
useEffect15(() => {
|
|
3248
3421
|
if (!isRunning) {
|
|
3249
3422
|
setElapsed(0);
|
|
3250
3423
|
return;
|
|
@@ -3342,7 +3515,7 @@ function LoadingDots({ label }) {
|
|
|
3342
3515
|
}
|
|
3343
3516
|
|
|
3344
3517
|
// src/components/LoginFlow.tsx
|
|
3345
|
-
import { useCallback as
|
|
3518
|
+
import { useCallback as useCallback10, useEffect as useEffect16, useRef as useRef12, useState as useState14 } from "react";
|
|
3346
3519
|
|
|
3347
3520
|
// src/components/ui/button.tsx
|
|
3348
3521
|
import { forwardRef as forwardRef3 } from "react";
|
|
@@ -3378,20 +3551,20 @@ import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
|
3378
3551
|
var OTP_LENGTH = 6;
|
|
3379
3552
|
var DIGIT_KEYS = ["d0", "d1", "d2", "d3", "d4", "d5"];
|
|
3380
3553
|
function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
3381
|
-
const [step, setStep] =
|
|
3382
|
-
const [email, setEmail] =
|
|
3383
|
-
const handleRequestOtp =
|
|
3554
|
+
const [step, setStep] = useState14("email");
|
|
3555
|
+
const [email, setEmail] = useState14("");
|
|
3556
|
+
const handleRequestOtp = useCallback10(async (emailValue) => {
|
|
3384
3557
|
const success = await requestOtp(emailValue);
|
|
3385
3558
|
if (success)
|
|
3386
3559
|
setStep("otp");
|
|
3387
3560
|
}, [requestOtp]);
|
|
3388
|
-
const handleVerifyOtp =
|
|
3561
|
+
const handleVerifyOtp = useCallback10(async (code) => {
|
|
3389
3562
|
await verifyOtp(email, code);
|
|
3390
3563
|
}, [verifyOtp, email]);
|
|
3391
|
-
const handleBack =
|
|
3564
|
+
const handleBack = useCallback10(() => {
|
|
3392
3565
|
setStep("email");
|
|
3393
3566
|
}, []);
|
|
3394
|
-
const handleResend =
|
|
3567
|
+
const handleResend = useCallback10(async () => {
|
|
3395
3568
|
await requestOtp(email);
|
|
3396
3569
|
}, [requestOtp, email]);
|
|
3397
3570
|
if (step === "otp") {
|
|
@@ -3468,30 +3641,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
3468
3641
|
});
|
|
3469
3642
|
}
|
|
3470
3643
|
function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
3471
|
-
const [digits, setDigits] =
|
|
3472
|
-
const [resendCooldown, setResendCooldown] =
|
|
3473
|
-
const inputRefs =
|
|
3474
|
-
const submittedRef =
|
|
3475
|
-
|
|
3644
|
+
const [digits, setDigits] = useState14(Array(OTP_LENGTH).fill(""));
|
|
3645
|
+
const [resendCooldown, setResendCooldown] = useState14(0);
|
|
3646
|
+
const inputRefs = useRef12([]);
|
|
3647
|
+
const submittedRef = useRef12(false);
|
|
3648
|
+
useEffect16(() => {
|
|
3476
3649
|
inputRefs.current[0]?.focus();
|
|
3477
3650
|
}, []);
|
|
3478
|
-
|
|
3651
|
+
useEffect16(() => {
|
|
3479
3652
|
if (error)
|
|
3480
3653
|
submittedRef.current = false;
|
|
3481
3654
|
}, [error]);
|
|
3482
|
-
|
|
3655
|
+
useEffect16(() => {
|
|
3483
3656
|
if (resendCooldown <= 0)
|
|
3484
3657
|
return;
|
|
3485
3658
|
const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
|
|
3486
3659
|
return () => clearTimeout(timer);
|
|
3487
3660
|
}, [resendCooldown]);
|
|
3488
|
-
const submitCode =
|
|
3661
|
+
const submitCode = useCallback10((code) => {
|
|
3489
3662
|
if (submittedRef.current || isSubmitting)
|
|
3490
3663
|
return;
|
|
3491
3664
|
submittedRef.current = true;
|
|
3492
3665
|
onSubmit(code);
|
|
3493
3666
|
}, [onSubmit, isSubmitting]);
|
|
3494
|
-
const handleDigitChange =
|
|
3667
|
+
const handleDigitChange = useCallback10((index2, value) => {
|
|
3495
3668
|
const digit = value.replace(/\D/g, "").slice(-1);
|
|
3496
3669
|
const newDigits = [...digits];
|
|
3497
3670
|
newDigits[index2] = digit;
|
|
@@ -3505,12 +3678,12 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3505
3678
|
submitCode(code);
|
|
3506
3679
|
}
|
|
3507
3680
|
}, [digits, submitCode]);
|
|
3508
|
-
const handleKeyDown =
|
|
3681
|
+
const handleKeyDown = useCallback10((index2, e) => {
|
|
3509
3682
|
if (e.key === "Backspace" && !digits[index2] && index2 > 0) {
|
|
3510
3683
|
inputRefs.current[index2 - 1]?.focus();
|
|
3511
3684
|
}
|
|
3512
3685
|
}, [digits]);
|
|
3513
|
-
const handlePaste =
|
|
3686
|
+
const handlePaste = useCallback10((e) => {
|
|
3514
3687
|
e.preventDefault();
|
|
3515
3688
|
const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, OTP_LENGTH);
|
|
3516
3689
|
if (pasted.length > 0) {
|
|
@@ -3619,101 +3792,18 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3619
3792
|
});
|
|
3620
3793
|
}
|
|
3621
3794
|
|
|
3622
|
-
// src/components/MeetingControls.tsx
|
|
3623
|
-
import { jsx as jsx13, jsxs as jsxs10, Fragment as Fragment4 } from "react/jsx-runtime";
|
|
3624
|
-
var CONTROL_BUTTON2 = "skippr:flex skippr:size-11 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-full skippr:transition-colors skippr:disabled:cursor-not-allowed skippr:disabled:opacity-60";
|
|
3625
|
-
var MUTED_BUTTON = "skippr:bg-muted skippr:text-foreground skippr:hover:bg-muted/80";
|
|
3626
|
-
function MeetingControls({
|
|
3627
|
-
onHangUp,
|
|
3628
|
-
onPause,
|
|
3629
|
-
onResume,
|
|
3630
|
-
isPaused = false,
|
|
3631
|
-
isPausing = false,
|
|
3632
|
-
showScreenShareToggle = true
|
|
3633
|
-
}) {
|
|
3634
|
-
const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
|
|
3635
|
-
const showPaused = isPaused || isPausing;
|
|
3636
|
-
return /* @__PURE__ */ jsxs10("div", {
|
|
3637
|
-
className: "skippr:shrink-0 skippr:border-t skippr:border-border skippr:bg-background skippr:px-4 skippr:py-4",
|
|
3638
|
-
children: [
|
|
3639
|
-
/* @__PURE__ */ jsxs10("div", {
|
|
3640
|
-
className: "skippr:flex skippr:items-center skippr:justify-center skippr:gap-3",
|
|
3641
|
-
children: [
|
|
3642
|
-
!showPaused && /* @__PURE__ */ jsxs10(Fragment4, {
|
|
3643
|
-
children: [
|
|
3644
|
-
/* @__PURE__ */ jsx13("button", {
|
|
3645
|
-
type: "button",
|
|
3646
|
-
onClick: toggleMute,
|
|
3647
|
-
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
3648
|
-
className: cn(CONTROL_BUTTON2, isMuted ? "skippr:bg-destructive/15 skippr:text-destructive skippr:hover:bg-destructive/25" : MUTED_BUTTON),
|
|
3649
|
-
children: isMuted ? /* @__PURE__ */ jsx13(MicOff, {
|
|
3650
|
-
className: "skippr:size-5"
|
|
3651
|
-
}) : /* @__PURE__ */ jsx13(Mic, {
|
|
3652
|
-
className: "skippr:size-5"
|
|
3653
|
-
})
|
|
3654
|
-
}),
|
|
3655
|
-
showScreenShareToggle && /* @__PURE__ */ jsx13("button", {
|
|
3656
|
-
type: "button",
|
|
3657
|
-
onClick: toggleScreenShare,
|
|
3658
|
-
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
3659
|
-
className: cn(CONTROL_BUTTON2, isScreenSharing ? "skippr:bg-bubble skippr:text-white skippr:hover:brightness-110" : MUTED_BUTTON),
|
|
3660
|
-
children: isScreenSharing ? /* @__PURE__ */ jsx13(MonitorOff, {
|
|
3661
|
-
className: "skippr:size-5"
|
|
3662
|
-
}) : /* @__PURE__ */ jsx13(Monitor, {
|
|
3663
|
-
className: "skippr:size-5"
|
|
3664
|
-
})
|
|
3665
|
-
})
|
|
3666
|
-
]
|
|
3667
|
-
}),
|
|
3668
|
-
showPaused ? onResume && /* @__PURE__ */ jsx13("button", {
|
|
3669
|
-
type: "button",
|
|
3670
|
-
onClick: onResume,
|
|
3671
|
-
disabled: isPausing,
|
|
3672
|
-
"aria-label": "Resume session",
|
|
3673
|
-
className: cn(CONTROL_BUTTON2, MUTED_BUTTON),
|
|
3674
|
-
children: /* @__PURE__ */ jsx13(Play, {
|
|
3675
|
-
className: "skippr:size-5"
|
|
3676
|
-
})
|
|
3677
|
-
}) : onPause && /* @__PURE__ */ jsx13("button", {
|
|
3678
|
-
type: "button",
|
|
3679
|
-
onClick: onPause,
|
|
3680
|
-
"aria-label": "Pause session",
|
|
3681
|
-
className: cn(CONTROL_BUTTON2, MUTED_BUTTON),
|
|
3682
|
-
children: /* @__PURE__ */ jsx13(Pause, {
|
|
3683
|
-
className: "skippr:size-5"
|
|
3684
|
-
})
|
|
3685
|
-
}),
|
|
3686
|
-
/* @__PURE__ */ jsx13("button", {
|
|
3687
|
-
type: "button",
|
|
3688
|
-
onClick: onHangUp,
|
|
3689
|
-
"aria-label": "End session",
|
|
3690
|
-
className: cn(CONTROL_BUTTON2, "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90"),
|
|
3691
|
-
children: /* @__PURE__ */ jsx13(PhoneOff, {
|
|
3692
|
-
className: "skippr:size-5"
|
|
3693
|
-
})
|
|
3694
|
-
})
|
|
3695
|
-
]
|
|
3696
|
-
}),
|
|
3697
|
-
/* @__PURE__ */ jsx13("p", {
|
|
3698
|
-
className: "skippr:mt-3 skippr:text-center skippr:text-[10px] skippr:text-muted-foreground",
|
|
3699
|
-
children: "Powered by Skippr"
|
|
3700
|
-
})
|
|
3701
|
-
]
|
|
3702
|
-
});
|
|
3703
|
-
}
|
|
3704
|
-
|
|
3705
3795
|
// src/components/MessageList.tsx
|
|
3706
|
-
import { useEffect as
|
|
3796
|
+
import { useEffect as useEffect18, useRef as useRef14 } from "react";
|
|
3707
3797
|
|
|
3708
3798
|
// src/components/ChatInput.tsx
|
|
3709
|
-
import { useEffect as
|
|
3710
|
-
import { jsx as
|
|
3799
|
+
import { useEffect as useEffect17, useRef as useRef13, useState as useState15 } from "react";
|
|
3800
|
+
import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
3711
3801
|
var MAX_INPUT_HEIGHT = 60;
|
|
3712
3802
|
function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
3713
|
-
const [inputText, setInputText] =
|
|
3714
|
-
const textareaRef =
|
|
3803
|
+
const [inputText, setInputText] = useState15("");
|
|
3804
|
+
const textareaRef = useRef13(null);
|
|
3715
3805
|
const canSend = inputText.trim().length > 0 && !isSendingChat;
|
|
3716
|
-
|
|
3806
|
+
useEffect17(() => {
|
|
3717
3807
|
if (autoFocus)
|
|
3718
3808
|
textareaRef.current?.focus();
|
|
3719
3809
|
}, [autoFocus]);
|
|
@@ -3744,13 +3834,13 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3744
3834
|
handleSubmit(e);
|
|
3745
3835
|
}
|
|
3746
3836
|
}
|
|
3747
|
-
return /* @__PURE__ */
|
|
3837
|
+
return /* @__PURE__ */ jsx13("form", {
|
|
3748
3838
|
onSubmit: handleSubmit,
|
|
3749
3839
|
className: "skippr:border-t skippr:border-border skippr:p-3",
|
|
3750
|
-
children: /* @__PURE__ */
|
|
3840
|
+
children: /* @__PURE__ */ jsxs10("div", {
|
|
3751
3841
|
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",
|
|
3752
3842
|
children: [
|
|
3753
|
-
/* @__PURE__ */
|
|
3843
|
+
/* @__PURE__ */ jsx13("textarea", {
|
|
3754
3844
|
ref: textareaRef,
|
|
3755
3845
|
rows: 1,
|
|
3756
3846
|
value: inputText,
|
|
@@ -3760,12 +3850,12 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3760
3850
|
className: "skippr:flex-1 skippr:resize-none skippr:overflow-y-auto skippr:bg-transparent skippr:text-sm skippr:leading-5 skippr:text-foreground skippr:placeholder:text-muted-foreground skippr:outline-none",
|
|
3761
3851
|
style: { maxHeight: `${MAX_INPUT_HEIGHT}px` }
|
|
3762
3852
|
}),
|
|
3763
|
-
/* @__PURE__ */
|
|
3853
|
+
/* @__PURE__ */ jsx13("button", {
|
|
3764
3854
|
type: "submit",
|
|
3765
3855
|
disabled: !canSend,
|
|
3766
3856
|
"aria-label": "Send message",
|
|
3767
3857
|
className: cn("skippr:flex skippr:size-8 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-lg skippr:transition-colors", canSend ? "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90" : "skippr:bg-muted-foreground/20 skippr:text-muted-foreground/60"),
|
|
3768
|
-
children: /* @__PURE__ */
|
|
3858
|
+
children: /* @__PURE__ */ jsx13(Send, {
|
|
3769
3859
|
className: "skippr:size-3.5"
|
|
3770
3860
|
})
|
|
3771
3861
|
})
|
|
@@ -3775,7 +3865,7 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3775
3865
|
}
|
|
3776
3866
|
|
|
3777
3867
|
// src/components/ChatMessage.tsx
|
|
3778
|
-
import { jsx as
|
|
3868
|
+
import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
3779
3869
|
function formatTimestamp(ts) {
|
|
3780
3870
|
return new Date(ts).toLocaleTimeString("en-US", {
|
|
3781
3871
|
hour: "numeric",
|
|
@@ -3785,23 +3875,23 @@ function formatTimestamp(ts) {
|
|
|
3785
3875
|
}
|
|
3786
3876
|
function ChatMessage({ message }) {
|
|
3787
3877
|
const isAgent = message.role === "assistant";
|
|
3788
|
-
return /* @__PURE__ */
|
|
3878
|
+
return /* @__PURE__ */ jsxs11("div", {
|
|
3789
3879
|
className: cn("skippr:flex skippr:gap-2", isAgent ? "skippr:items-start" : "skippr:justify-end"),
|
|
3790
3880
|
children: [
|
|
3791
|
-
isAgent && /* @__PURE__ */
|
|
3881
|
+
isAgent && /* @__PURE__ */ jsx14("div", {
|
|
3792
3882
|
className: "skippr:mt-0.5 skippr:flex skippr:size-7 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-md skippr:bg-primary",
|
|
3793
|
-
children: /* @__PURE__ */
|
|
3883
|
+
children: /* @__PURE__ */ jsx14(Sparkles, {
|
|
3794
3884
|
className: "skippr:size-3.5 skippr:text-primary-foreground"
|
|
3795
3885
|
})
|
|
3796
3886
|
}),
|
|
3797
|
-
/* @__PURE__ */
|
|
3887
|
+
/* @__PURE__ */ jsxs11("div", {
|
|
3798
3888
|
className: cn("skippr:flex skippr:max-w-[80%] skippr:flex-col", isAgent ? "skippr:items-start" : "skippr:items-end"),
|
|
3799
3889
|
children: [
|
|
3800
|
-
/* @__PURE__ */
|
|
3890
|
+
/* @__PURE__ */ jsx14("div", {
|
|
3801
3891
|
className: cn("skippr:rounded-2xl skippr:px-4 skippr:py-2.5 skippr:text-sm skippr:leading-relaxed", isAgent ? "skippr:border skippr:border-border skippr:bg-card skippr:text-foreground" : "skippr:bg-primary skippr:text-primary-foreground"),
|
|
3802
3892
|
children: message.content
|
|
3803
3893
|
}),
|
|
3804
|
-
message.timestamp && /* @__PURE__ */
|
|
3894
|
+
message.timestamp && /* @__PURE__ */ jsx14("span", {
|
|
3805
3895
|
className: "skippr:mt-1 skippr:px-1 skippr:text-[10px] skippr:text-muted-foreground/60",
|
|
3806
3896
|
children: formatTimestamp(message.timestamp)
|
|
3807
3897
|
})
|
|
@@ -3812,33 +3902,33 @@ function ChatMessage({ message }) {
|
|
|
3812
3902
|
}
|
|
3813
3903
|
|
|
3814
3904
|
// src/components/TypingIndicator.tsx
|
|
3815
|
-
import { jsx as
|
|
3905
|
+
import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
3816
3906
|
function TypingIndicator() {
|
|
3817
|
-
return /* @__PURE__ */
|
|
3907
|
+
return /* @__PURE__ */ jsxs12("div", {
|
|
3818
3908
|
className: "skippr:flex skippr:items-start skippr:gap-2 skippr:animate-skippr-tab-fade",
|
|
3819
3909
|
children: [
|
|
3820
|
-
/* @__PURE__ */
|
|
3910
|
+
/* @__PURE__ */ jsx15("div", {
|
|
3821
3911
|
className: "skippr:mt-0.5 skippr:flex skippr:size-7 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-md skippr:bg-primary",
|
|
3822
|
-
children: /* @__PURE__ */
|
|
3912
|
+
children: /* @__PURE__ */ jsx15(Sparkles, {
|
|
3823
3913
|
className: "skippr:size-3.5 skippr:text-primary-foreground"
|
|
3824
3914
|
})
|
|
3825
3915
|
}),
|
|
3826
|
-
/* @__PURE__ */
|
|
3916
|
+
/* @__PURE__ */ jsxs12("div", {
|
|
3827
3917
|
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",
|
|
3828
3918
|
children: [
|
|
3829
|
-
/* @__PURE__ */
|
|
3919
|
+
/* @__PURE__ */ jsx15("span", {
|
|
3830
3920
|
children: "Agent is analyzing your screen"
|
|
3831
3921
|
}),
|
|
3832
|
-
/* @__PURE__ */
|
|
3922
|
+
/* @__PURE__ */ jsxs12("span", {
|
|
3833
3923
|
className: "skippr:inline-flex skippr:items-center skippr:gap-[2px]",
|
|
3834
3924
|
children: [
|
|
3835
|
-
/* @__PURE__ */
|
|
3925
|
+
/* @__PURE__ */ jsx15("span", {
|
|
3836
3926
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:0ms]"
|
|
3837
3927
|
}),
|
|
3838
|
-
/* @__PURE__ */
|
|
3928
|
+
/* @__PURE__ */ jsx15("span", {
|
|
3839
3929
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:200ms]"
|
|
3840
3930
|
}),
|
|
3841
|
-
/* @__PURE__ */
|
|
3931
|
+
/* @__PURE__ */ jsx15("span", {
|
|
3842
3932
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:400ms]"
|
|
3843
3933
|
})
|
|
3844
3934
|
]
|
|
@@ -3850,7 +3940,7 @@ function TypingIndicator() {
|
|
|
3850
3940
|
}
|
|
3851
3941
|
|
|
3852
3942
|
// src/components/MessageList.tsx
|
|
3853
|
-
import { jsx as
|
|
3943
|
+
import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
3854
3944
|
function MessageList({
|
|
3855
3945
|
messages,
|
|
3856
3946
|
isStreaming,
|
|
@@ -3858,31 +3948,31 @@ function MessageList({
|
|
|
3858
3948
|
isSendingChat,
|
|
3859
3949
|
autoFocus = false
|
|
3860
3950
|
}) {
|
|
3861
|
-
const scrollRef =
|
|
3951
|
+
const scrollRef = useRef14(null);
|
|
3862
3952
|
const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
|
|
3863
|
-
|
|
3953
|
+
useEffect18(() => {
|
|
3864
3954
|
scrollRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
3865
3955
|
}, [messages.length, lastMessage?.content]);
|
|
3866
3956
|
const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
|
|
3867
|
-
return /* @__PURE__ */
|
|
3957
|
+
return /* @__PURE__ */ jsxs13("div", {
|
|
3868
3958
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
3869
3959
|
children: [
|
|
3870
|
-
/* @__PURE__ */
|
|
3960
|
+
/* @__PURE__ */ jsxs13("div", {
|
|
3871
3961
|
className: "skippr:min-h-0 skippr:flex-1 skippr:space-y-4 skippr:overflow-y-auto skippr:p-4",
|
|
3872
3962
|
children: [
|
|
3873
|
-
messages.length === 0 && !showTyping && /* @__PURE__ */
|
|
3963
|
+
messages.length === 0 && !showTyping && /* @__PURE__ */ jsx16(LoadingDots, {
|
|
3874
3964
|
label: "Waiting for conversation to begin..."
|
|
3875
3965
|
}),
|
|
3876
|
-
messages.map((message) => /* @__PURE__ */
|
|
3966
|
+
messages.map((message) => /* @__PURE__ */ jsx16(ChatMessage, {
|
|
3877
3967
|
message
|
|
3878
3968
|
}, message.id)),
|
|
3879
|
-
showTyping && /* @__PURE__ */
|
|
3880
|
-
/* @__PURE__ */
|
|
3969
|
+
showTyping && /* @__PURE__ */ jsx16(TypingIndicator, {}),
|
|
3970
|
+
/* @__PURE__ */ jsx16("div", {
|
|
3881
3971
|
ref: scrollRef
|
|
3882
3972
|
})
|
|
3883
3973
|
]
|
|
3884
3974
|
}),
|
|
3885
|
-
/* @__PURE__ */
|
|
3975
|
+
/* @__PURE__ */ jsx16(ChatInput, {
|
|
3886
3976
|
sendChatMessage,
|
|
3887
3977
|
isSendingChat,
|
|
3888
3978
|
autoFocus
|
|
@@ -3891,239 +3981,50 @@ function MessageList({
|
|
|
3891
3981
|
});
|
|
3892
3982
|
}
|
|
3893
3983
|
|
|
3894
|
-
// src/components/ModuleSelector.tsx
|
|
3895
|
-
import { useEffect as useEffect18, useRef as useRef12, useState as useState14 } from "react";
|
|
3896
|
-
import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
3897
|
-
var AGENT_TYPE_ICONS = {
|
|
3898
|
-
onboarding: UserPlus,
|
|
3899
|
-
demo: Rocket,
|
|
3900
|
-
training: GraduationCap,
|
|
3901
|
-
support: Headset
|
|
3902
|
-
};
|
|
3903
|
-
function getAgentIcon(type) {
|
|
3904
|
-
return AGENT_TYPE_ICONS[type] ?? Bot;
|
|
3905
|
-
}
|
|
3906
|
-
function ModuleSelector() {
|
|
3907
|
-
const {
|
|
3908
|
-
availableModules,
|
|
3909
|
-
isLoadingModules,
|
|
3910
|
-
modulesError,
|
|
3911
|
-
refetchModules,
|
|
3912
|
-
selectModule,
|
|
3913
|
-
isStarting,
|
|
3914
|
-
isDisconnecting,
|
|
3915
|
-
error
|
|
3916
|
-
} = useLiveAgent();
|
|
3917
|
-
const isBusy = isStarting || isDisconnecting;
|
|
3918
|
-
const scrollRef = useRef12(null);
|
|
3919
|
-
const [showScrollHint, setShowScrollHint] = useState14(false);
|
|
3920
|
-
const [isScrolled, setIsScrolled] = useState14(false);
|
|
3921
|
-
useEffect18(() => {
|
|
3922
|
-
const el = scrollRef.current;
|
|
3923
|
-
if (!el)
|
|
3924
|
-
return;
|
|
3925
|
-
function update() {
|
|
3926
|
-
if (!el)
|
|
3927
|
-
return;
|
|
3928
|
-
const overflows = el.scrollHeight > el.clientHeight + 1;
|
|
3929
|
-
const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 4;
|
|
3930
|
-
setShowScrollHint(overflows && !atBottom);
|
|
3931
|
-
setIsScrolled(el.scrollTop > 0);
|
|
3932
|
-
}
|
|
3933
|
-
update();
|
|
3934
|
-
el.addEventListener("scroll", update, { passive: true });
|
|
3935
|
-
const observer = new ResizeObserver(update);
|
|
3936
|
-
observer.observe(el);
|
|
3937
|
-
return () => {
|
|
3938
|
-
el.removeEventListener("scroll", update);
|
|
3939
|
-
observer.disconnect();
|
|
3940
|
-
};
|
|
3941
|
-
}, []);
|
|
3942
|
-
if (isLoadingModules && availableModules.length === 0) {
|
|
3943
|
-
return /* @__PURE__ */ jsx18("div", {
|
|
3944
|
-
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center skippr:p-6",
|
|
3945
|
-
children: /* @__PURE__ */ jsx18(LoadingDots, {
|
|
3946
|
-
label: "Loading modules..."
|
|
3947
|
-
})
|
|
3948
|
-
});
|
|
3949
|
-
}
|
|
3950
|
-
if (modulesError) {
|
|
3951
|
-
return /* @__PURE__ */ jsxs15("div", {
|
|
3952
|
-
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:p-6 skippr:text-center",
|
|
3953
|
-
children: [
|
|
3954
|
-
/* @__PURE__ */ jsx18("p", {
|
|
3955
|
-
className: "skippr:text-sm skippr:text-foreground",
|
|
3956
|
-
children: "Couldn't load modules."
|
|
3957
|
-
}),
|
|
3958
|
-
/* @__PURE__ */ jsx18("p", {
|
|
3959
|
-
className: "skippr:text-xs skippr:text-muted-foreground",
|
|
3960
|
-
children: modulesError
|
|
3961
|
-
}),
|
|
3962
|
-
/* @__PURE__ */ jsx18("button", {
|
|
3963
|
-
type: "button",
|
|
3964
|
-
onClick: () => void refetchModules(),
|
|
3965
|
-
className: "skippr:cursor-pointer skippr:rounded-lg skippr:bg-foreground skippr:px-3 skippr:py-1.5 skippr:text-xs skippr:font-medium skippr:text-background",
|
|
3966
|
-
children: "Try again"
|
|
3967
|
-
})
|
|
3968
|
-
]
|
|
3969
|
-
});
|
|
3970
|
-
}
|
|
3971
|
-
if (availableModules.length === 0) {
|
|
3972
|
-
return /* @__PURE__ */ jsx18("div", {
|
|
3973
|
-
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center skippr:p-6 skippr:text-center",
|
|
3974
|
-
children: /* @__PURE__ */ jsx18("p", {
|
|
3975
|
-
className: "skippr:text-sm skippr:text-muted-foreground",
|
|
3976
|
-
children: "No experts available."
|
|
3977
|
-
})
|
|
3978
|
-
});
|
|
3979
|
-
}
|
|
3980
|
-
return /* @__PURE__ */ jsxs15("div", {
|
|
3981
|
-
className: "skippr:relative skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
3982
|
-
children: [
|
|
3983
|
-
/* @__PURE__ */ jsxs15("div", {
|
|
3984
|
-
ref: scrollRef,
|
|
3985
|
-
className: "skippr-no-scrollbar skippr:flex-1 skippr:overflow-y-auto",
|
|
3986
|
-
children: [
|
|
3987
|
-
/* @__PURE__ */ jsx18("h3", {
|
|
3988
|
-
className: `skippr:sticky skippr:top-0 skippr:z-10 skippr:bg-background skippr:px-4 skippr:py-3 skippr:text-xs skippr:font-medium skippr:uppercase skippr:tracking-wider skippr:text-muted-foreground skippr:transition-shadow ${isScrolled ? "skippr:border-b skippr:border-border" : ""}`,
|
|
3989
|
-
children: "Choose an agent"
|
|
3990
|
-
}),
|
|
3991
|
-
/* @__PURE__ */ jsxs15("div", {
|
|
3992
|
-
className: "skippr:px-4 skippr:pt-3 skippr:pb-5",
|
|
3993
|
-
children: [
|
|
3994
|
-
error && /* @__PURE__ */ jsx18("div", {
|
|
3995
|
-
role: "alert",
|
|
3996
|
-
className: "skippr:mb-3 skippr:rounded-lg skippr:border skippr:border-destructive/20 skippr:bg-destructive/10 skippr:px-3 skippr:py-2 skippr:text-xs skippr:text-destructive",
|
|
3997
|
-
children: error
|
|
3998
|
-
}),
|
|
3999
|
-
/* @__PURE__ */ jsx18("div", {
|
|
4000
|
-
className: "skippr:grid skippr:grid-cols-2 skippr:gap-2.5",
|
|
4001
|
-
children: availableModules.map((module, index2) => {
|
|
4002
|
-
const isFeatured = index2 === 0;
|
|
4003
|
-
const isWide = index2 === availableModules.length - 1 && availableModules.length % 2 === 1;
|
|
4004
|
-
const Icon2 = getAgentIcon(module.type);
|
|
4005
|
-
const sessionState = getModuleSessionState(module.currentSession, module.mode);
|
|
4006
|
-
const isTerminal = sessionState === "completed" || sessionState === "expired";
|
|
4007
|
-
const base = "skippr:group skippr:flex skippr:cursor-pointer skippr:gap-3 skippr:rounded-xl skippr:text-left skippr:transition-colors skippr:disabled:cursor-not-allowed skippr:disabled:opacity-50";
|
|
4008
|
-
const layout = isWide ? "skippr:items-center skippr:p-3.5 skippr:pb-5" : "skippr:flex-col skippr:items-start skippr:p-3.5";
|
|
4009
|
-
const variant = isFeatured ? "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90" : "skippr:bg-background skippr:ring-1 skippr:ring-foreground/10 skippr:hover:bg-muted/50";
|
|
4010
|
-
const span = isWide ? "skippr:col-span-2" : "";
|
|
4011
|
-
return /* @__PURE__ */ jsxs15("button", {
|
|
4012
|
-
type: "button",
|
|
4013
|
-
disabled: isBusy || isTerminal,
|
|
4014
|
-
onClick: () => selectModule(module.id),
|
|
4015
|
-
className: `${base} ${layout} ${variant} ${span}`,
|
|
4016
|
-
children: [
|
|
4017
|
-
/* @__PURE__ */ jsx18("div", {
|
|
4018
|
-
className: isFeatured ? "skippr:flex skippr:h-9 skippr:w-9 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-lg skippr:bg-primary-foreground/15" : "skippr:flex skippr:h-9 skippr:w-9 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-lg skippr:bg-muted",
|
|
4019
|
-
children: /* @__PURE__ */ jsx18(Icon2, {
|
|
4020
|
-
className: isFeatured ? "skippr:h-4 skippr:w-4" : "skippr:h-4 skippr:w-4 skippr:text-muted-foreground"
|
|
4021
|
-
})
|
|
4022
|
-
}),
|
|
4023
|
-
/* @__PURE__ */ jsxs15("div", {
|
|
4024
|
-
className: "skippr:min-w-0 skippr:w-full skippr:space-y-0.5",
|
|
4025
|
-
children: [
|
|
4026
|
-
/* @__PURE__ */ jsxs15("div", {
|
|
4027
|
-
className: "skippr:flex skippr:items-center skippr:gap-1.5",
|
|
4028
|
-
children: [
|
|
4029
|
-
/* @__PURE__ */ jsx18("p", {
|
|
4030
|
-
className: "skippr:line-clamp-1 skippr:text-sm skippr:font-semibold",
|
|
4031
|
-
children: module.name
|
|
4032
|
-
}),
|
|
4033
|
-
sessionState === "resume" && /* @__PURE__ */ jsxs15("span", {
|
|
4034
|
-
className: `skippr:inline-flex skippr:shrink-0 skippr:items-center skippr:gap-0.5 skippr:rounded-full skippr:px-1.5 skippr:py-0.5 skippr:text-[9px] skippr:font-medium skippr:uppercase skippr:tracking-wide ${isFeatured ? "skippr:bg-primary-foreground/20 skippr:text-primary-foreground" : "skippr:bg-bubble/15 skippr:text-bubble"}`,
|
|
4035
|
-
children: [
|
|
4036
|
-
/* @__PURE__ */ jsx18(Play, {
|
|
4037
|
-
className: "skippr:size-2.5"
|
|
4038
|
-
}),
|
|
4039
|
-
"Resume"
|
|
4040
|
-
]
|
|
4041
|
-
}),
|
|
4042
|
-
sessionState === "completed" && /* @__PURE__ */ jsxs15("span", {
|
|
4043
|
-
className: "skippr:inline-flex skippr:shrink-0 skippr:items-center skippr:gap-0.5 skippr:rounded-full skippr:bg-muted skippr:px-1.5 skippr:py-0.5 skippr:text-[9px] skippr:font-medium skippr:uppercase skippr:tracking-wide skippr:text-muted-foreground",
|
|
4044
|
-
children: [
|
|
4045
|
-
/* @__PURE__ */ jsx18(CircleCheck, {
|
|
4046
|
-
className: "skippr:size-2.5"
|
|
4047
|
-
}),
|
|
4048
|
-
"Completed"
|
|
4049
|
-
]
|
|
4050
|
-
}),
|
|
4051
|
-
sessionState === "expired" && /* @__PURE__ */ jsxs15("span", {
|
|
4052
|
-
className: "skippr:inline-flex skippr:shrink-0 skippr:items-center skippr:gap-0.5 skippr:rounded-full skippr:bg-muted skippr:px-1.5 skippr:py-0.5 skippr:text-[9px] skippr:font-medium skippr:uppercase skippr:tracking-wide skippr:text-muted-foreground",
|
|
4053
|
-
children: [
|
|
4054
|
-
/* @__PURE__ */ jsx18(Clock, {
|
|
4055
|
-
className: "skippr:size-2.5"
|
|
4056
|
-
}),
|
|
4057
|
-
"Expired"
|
|
4058
|
-
]
|
|
4059
|
-
})
|
|
4060
|
-
]
|
|
4061
|
-
}),
|
|
4062
|
-
module.description && /* @__PURE__ */ jsx18("p", {
|
|
4063
|
-
className: isFeatured ? "skippr:line-clamp-2 skippr:text-[11px] skippr:leading-snug skippr:text-primary-foreground/70" : "skippr:line-clamp-2 skippr:text-[11px] skippr:leading-snug skippr:text-muted-foreground",
|
|
4064
|
-
children: module.description
|
|
4065
|
-
})
|
|
4066
|
-
]
|
|
4067
|
-
})
|
|
4068
|
-
]
|
|
4069
|
-
}, module.id);
|
|
4070
|
-
})
|
|
4071
|
-
})
|
|
4072
|
-
]
|
|
4073
|
-
})
|
|
4074
|
-
]
|
|
4075
|
-
}),
|
|
4076
|
-
showScrollHint && /* @__PURE__ */ jsx18("div", {
|
|
4077
|
-
className: "skippr:pointer-events-none skippr:absolute skippr:bottom-0 skippr:left-0 skippr:right-0 skippr:h-12 skippr:bg-gradient-to-t skippr:from-background skippr:to-transparent"
|
|
4078
|
-
})
|
|
4079
|
-
]
|
|
4080
|
-
});
|
|
4081
|
-
}
|
|
4082
|
-
|
|
4083
3984
|
// src/components/SessionAgenda.tsx
|
|
4084
|
-
import { jsx as
|
|
3985
|
+
import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
4085
3986
|
function SessionAgenda({ phases, hasStarted }) {
|
|
4086
3987
|
if (phases.length === 0 || !hasStarted) {
|
|
4087
|
-
return /* @__PURE__ */
|
|
3988
|
+
return /* @__PURE__ */ jsx17("div", {
|
|
4088
3989
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
4089
|
-
children: /* @__PURE__ */
|
|
3990
|
+
children: /* @__PURE__ */ jsx17(LoadingDots, {
|
|
4090
3991
|
label: "Waiting for agenda to load..."
|
|
4091
3992
|
})
|
|
4092
3993
|
});
|
|
4093
3994
|
}
|
|
4094
|
-
return /* @__PURE__ */
|
|
3995
|
+
return /* @__PURE__ */ jsx17("div", {
|
|
4095
3996
|
className: "skippr:flex-1 skippr:overflow-y-auto skippr:px-4 skippr:py-4",
|
|
4096
|
-
children: /* @__PURE__ */
|
|
3997
|
+
children: /* @__PURE__ */ jsx17("div", {
|
|
4097
3998
|
className: "skippr:space-y-1",
|
|
4098
3999
|
children: phases.map((phase) => {
|
|
4099
4000
|
const isActive = phase.status === "active";
|
|
4100
4001
|
const isCompleted = phase.status === "completed";
|
|
4101
|
-
return /* @__PURE__ */
|
|
4002
|
+
return /* @__PURE__ */ jsxs14("div", {
|
|
4102
4003
|
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"),
|
|
4103
4004
|
children: [
|
|
4104
|
-
/* @__PURE__ */
|
|
4005
|
+
/* @__PURE__ */ jsx17("div", {
|
|
4105
4006
|
className: "skippr:mt-0.5",
|
|
4106
|
-
children: isCompleted ? /* @__PURE__ */
|
|
4007
|
+
children: isCompleted ? /* @__PURE__ */ jsx17(CircleCheck, {
|
|
4107
4008
|
className: "skippr:size-4 skippr:text-chart-3"
|
|
4108
|
-
}) : isActive ? /* @__PURE__ */
|
|
4009
|
+
}) : isActive ? /* @__PURE__ */ jsx17(Circle, {
|
|
4109
4010
|
className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
|
|
4110
|
-
}) : /* @__PURE__ */
|
|
4011
|
+
}) : /* @__PURE__ */ jsx17(Circle, {
|
|
4111
4012
|
className: "skippr:size-4 skippr:text-muted-foreground/30"
|
|
4112
4013
|
})
|
|
4113
4014
|
}),
|
|
4114
|
-
/* @__PURE__ */
|
|
4015
|
+
/* @__PURE__ */ jsxs14("div", {
|
|
4115
4016
|
className: "skippr:min-w-0 skippr:flex-1",
|
|
4116
4017
|
children: [
|
|
4117
|
-
/* @__PURE__ */
|
|
4018
|
+
/* @__PURE__ */ jsx17("p", {
|
|
4118
4019
|
className: cn("skippr:text-sm", isCompleted && "skippr:text-muted-foreground skippr:line-through", isActive && "skippr:font-medium skippr:text-foreground", phase.status === "pending" && "skippr:text-muted-foreground"),
|
|
4119
4020
|
children: phase.name
|
|
4120
4021
|
}),
|
|
4121
|
-
phase.highlights.length > 0 && /* @__PURE__ */
|
|
4022
|
+
phase.highlights.length > 0 && /* @__PURE__ */ jsx17("ul", {
|
|
4122
4023
|
className: "skippr:mt-1 skippr:space-y-0.5",
|
|
4123
|
-
children: phase.highlights.map((text) => /* @__PURE__ */
|
|
4024
|
+
children: phase.highlights.map((text) => /* @__PURE__ */ jsxs14("li", {
|
|
4124
4025
|
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"),
|
|
4125
4026
|
children: [
|
|
4126
|
-
/* @__PURE__ */
|
|
4027
|
+
/* @__PURE__ */ jsx17("span", {
|
|
4127
4028
|
className: "skippr:size-1 skippr:shrink-0 skippr:rounded-full skippr:bg-current"
|
|
4128
4029
|
}),
|
|
4129
4030
|
text
|
|
@@ -4140,12 +4041,12 @@ function SessionAgenda({ phases, hasStarted }) {
|
|
|
4140
4041
|
}
|
|
4141
4042
|
|
|
4142
4043
|
// src/components/SessionWarningBanner.tsx
|
|
4143
|
-
import { jsx as
|
|
4044
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
4144
4045
|
var SESSION_WARNING_THRESHOLD_SECS = 60;
|
|
4145
4046
|
function SessionWarningBanner({ remaining }) {
|
|
4146
4047
|
if (remaining === null || remaining <= 0 || remaining > SESSION_WARNING_THRESHOLD_SECS)
|
|
4147
4048
|
return null;
|
|
4148
|
-
return /* @__PURE__ */
|
|
4049
|
+
return /* @__PURE__ */ jsx18("div", {
|
|
4149
4050
|
"data-testid": "session-warning-banner",
|
|
4150
4051
|
className: "skippr:bg-red-50 skippr:px-4 skippr:py-1.5 skippr:text-center skippr:text-xs skippr:font-medium skippr:text-red-700",
|
|
4151
4052
|
children: "Session ending soon"
|
|
@@ -4153,7 +4054,7 @@ function SessionWarningBanner({ remaining }) {
|
|
|
4153
4054
|
}
|
|
4154
4055
|
|
|
4155
4056
|
// src/components/StartSessionPrompt.tsx
|
|
4156
|
-
import { jsx as
|
|
4057
|
+
import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
4157
4058
|
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";
|
|
4158
4059
|
function StartSessionPrompt({
|
|
4159
4060
|
onStartSession,
|
|
@@ -4165,16 +4066,16 @@ function StartSessionPrompt({
|
|
|
4165
4066
|
canResume = false,
|
|
4166
4067
|
onResume
|
|
4167
4068
|
}) {
|
|
4168
|
-
return /* @__PURE__ */
|
|
4069
|
+
return /* @__PURE__ */ jsxs15("div", {
|
|
4169
4070
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:px-4",
|
|
4170
4071
|
children: [
|
|
4171
|
-
canResume && onResume ? /* @__PURE__ */
|
|
4072
|
+
canResume && onResume ? /* @__PURE__ */ jsx19("button", {
|
|
4172
4073
|
type: "button",
|
|
4173
4074
|
onClick: onResume,
|
|
4174
4075
|
disabled: isStarting,
|
|
4175
4076
|
className: PROMPT_BUTTON,
|
|
4176
4077
|
children: isStarting ? "Resuming..." : "Resume session"
|
|
4177
|
-
}) : /* @__PURE__ */
|
|
4078
|
+
}) : /* @__PURE__ */ jsx19("button", {
|
|
4178
4079
|
type: "button",
|
|
4179
4080
|
onClick: () => {
|
|
4180
4081
|
if (!agentId)
|
|
@@ -4185,7 +4086,7 @@ function StartSessionPrompt({
|
|
|
4185
4086
|
className: PROMPT_BUTTON,
|
|
4186
4087
|
children: isStarting ? "Starting..." : label
|
|
4187
4088
|
}),
|
|
4188
|
-
error && /* @__PURE__ */
|
|
4089
|
+
error && /* @__PURE__ */ jsx19("p", {
|
|
4189
4090
|
className: "skippr:text-xs skippr:text-destructive",
|
|
4190
4091
|
children: error
|
|
4191
4092
|
})
|
|
@@ -4194,7 +4095,7 @@ function StartSessionPrompt({
|
|
|
4194
4095
|
}
|
|
4195
4096
|
|
|
4196
4097
|
// src/components/Sidebar.tsx
|
|
4197
|
-
import { jsx as
|
|
4098
|
+
import { jsx as jsx20, jsxs as jsxs16, Fragment as Fragment2 } from "react/jsx-runtime";
|
|
4198
4099
|
function Sidebar({
|
|
4199
4100
|
hideControls = false,
|
|
4200
4101
|
hideHeader = false,
|
|
@@ -4209,10 +4110,8 @@ function Sidebar({
|
|
|
4209
4110
|
isPaused,
|
|
4210
4111
|
error,
|
|
4211
4112
|
startSession,
|
|
4212
|
-
pauseSession,
|
|
4213
4113
|
resumeSession,
|
|
4214
4114
|
resumableSession,
|
|
4215
|
-
disconnect,
|
|
4216
4115
|
isPanelOpen,
|
|
4217
4116
|
position,
|
|
4218
4117
|
isAuthenticated,
|
|
@@ -4224,13 +4123,11 @@ function Sidebar({
|
|
|
4224
4123
|
sidebarTab: activeTab,
|
|
4225
4124
|
setSidebarTab: setActiveTab,
|
|
4226
4125
|
autoFocusChat,
|
|
4227
|
-
captureMode,
|
|
4228
|
-
hasModuleSelector,
|
|
4229
4126
|
agentId,
|
|
4230
4127
|
agentMode,
|
|
4231
4128
|
agentControls
|
|
4232
4129
|
} = useLiveAgent();
|
|
4233
|
-
const internalCtx =
|
|
4130
|
+
const internalCtx = useContext8(LiveAgentContext);
|
|
4234
4131
|
const usesHostAuth = internalCtx?.usesHostAuth ?? false;
|
|
4235
4132
|
const authFailed = internalCtx?.authFailed ?? false;
|
|
4236
4133
|
const showAgenda = agentMode !== AGENT_MODE.AlwaysOn;
|
|
@@ -4250,21 +4147,19 @@ function Sidebar({
|
|
|
4250
4147
|
document.body.style.transition = "";
|
|
4251
4148
|
};
|
|
4252
4149
|
}, [isSidebar, isPanelOpen, position]);
|
|
4253
|
-
return /* @__PURE__ */
|
|
4254
|
-
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:
|
|
4150
|
+
return /* @__PURE__ */ jsxs16("div", {
|
|
4151
|
+
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:h-[min(460px,calc(100vh-200px))] skippr:rounded-2xl skippr:shadow-[0_8px_30px_rgba(0,0,0,0.16),0_4px_12px_rgba(0,0,0,0.08)]", isFloating && (isConnected || isStarting || isPausing ? "skippr:bottom-[124px]" : "skippr:bottom-[88px]"), isFloating && (position === "right" ? "skippr:right-6" : "skippr:left-6"), isFloating && "skippr:transition-[opacity,transform] skippr:duration-300 skippr:ease-in-out", isFloating && (position === "right" ? "skippr:origin-bottom-right" : "skippr:origin-bottom-left"), isFloating && !isPanelOpen && "skippr:scale-0 skippr:opacity-0 skippr:pointer-events-none", isFloating && isPanelOpen && "skippr:scale-100 skippr:opacity-100", isSidebar && "skippr:top-0 skippr:h-full", isSidebar && "skippr:transition-[width] skippr:duration-300 skippr:ease-in-out", isSidebar && position === "right" && "skippr:right-0 skippr:border-l skippr:border-l-border", isSidebar && position === "left" && "skippr:left-0 skippr:border-r skippr:border-r-border", isSidebar && !isPanelOpen && "skippr:w-0 skippr:border-0"),
|
|
4255
4152
|
style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined },
|
|
4256
4153
|
children: [
|
|
4257
|
-
!hideHeader && /* @__PURE__ */
|
|
4258
|
-
authFailed ? /* @__PURE__ */
|
|
4154
|
+
!hideHeader && /* @__PURE__ */ jsx20(ChatHeader, {}),
|
|
4155
|
+
authFailed ? /* @__PURE__ */ jsx20(AuthError, {}) : isAuthenticated ? /* @__PURE__ */ jsx20(AuthenticatedContent, {
|
|
4259
4156
|
isConnected,
|
|
4260
4157
|
isPaused,
|
|
4261
4158
|
isPausing,
|
|
4262
4159
|
isDisconnecting,
|
|
4263
4160
|
canResume: resumableSession !== null,
|
|
4264
4161
|
onStartSession: startSession,
|
|
4265
|
-
onPause: pauseSession,
|
|
4266
4162
|
onResume: resumeSession,
|
|
4267
|
-
onDisconnect: disconnect,
|
|
4268
4163
|
isStarting,
|
|
4269
4164
|
error,
|
|
4270
4165
|
activeTab,
|
|
@@ -4272,17 +4167,15 @@ function Sidebar({
|
|
|
4272
4167
|
hideControls,
|
|
4273
4168
|
startSessionLabel,
|
|
4274
4169
|
autoFocusChat,
|
|
4275
|
-
showScreenShareToggle: captureMode === "screenshare",
|
|
4276
|
-
hasModuleSelector,
|
|
4277
4170
|
agentId,
|
|
4278
4171
|
agentControls,
|
|
4279
4172
|
showAgenda
|
|
4280
|
-
}) : usesHostAuth || isValidating ? /* @__PURE__ */
|
|
4173
|
+
}) : usesHostAuth || isValidating ? /* @__PURE__ */ jsx20("div", {
|
|
4281
4174
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
4282
|
-
children: /* @__PURE__ */
|
|
4175
|
+
children: /* @__PURE__ */ jsx20(LoadingDots, {
|
|
4283
4176
|
label: "Loading..."
|
|
4284
4177
|
})
|
|
4285
|
-
}) : /* @__PURE__ */
|
|
4178
|
+
}) : /* @__PURE__ */ jsx20(LoginFlow, {
|
|
4286
4179
|
requestOtp,
|
|
4287
4180
|
verifyOtp,
|
|
4288
4181
|
error: authError,
|
|
@@ -4298,9 +4191,7 @@ function AuthenticatedContent({
|
|
|
4298
4191
|
isDisconnecting,
|
|
4299
4192
|
canResume,
|
|
4300
4193
|
onStartSession,
|
|
4301
|
-
onPause,
|
|
4302
4194
|
onResume,
|
|
4303
|
-
onDisconnect,
|
|
4304
4195
|
isStarting,
|
|
4305
4196
|
error,
|
|
4306
4197
|
activeTab,
|
|
@@ -4308,15 +4199,11 @@ function AuthenticatedContent({
|
|
|
4308
4199
|
hideControls,
|
|
4309
4200
|
startSessionLabel,
|
|
4310
4201
|
autoFocusChat,
|
|
4311
|
-
showScreenShareToggle,
|
|
4312
|
-
hasModuleSelector,
|
|
4313
4202
|
agentId,
|
|
4314
4203
|
agentControls,
|
|
4315
4204
|
showAgenda
|
|
4316
4205
|
}) {
|
|
4317
4206
|
const inSession = isConnected || isStarting || isPaused || isPausing;
|
|
4318
|
-
const showSelectorAsPrompt = hasModuleSelector && !inSession && !isDisconnecting;
|
|
4319
|
-
const showTabBar = !showSelectorAsPrompt;
|
|
4320
4207
|
const effectiveTab = showAgenda ? activeTab : "chat";
|
|
4321
4208
|
let transitionLabel = null;
|
|
4322
4209
|
if (isPausing) {
|
|
@@ -4326,63 +4213,63 @@ function AuthenticatedContent({
|
|
|
4326
4213
|
} else if (isPaused) {
|
|
4327
4214
|
transitionLabel = "Paused";
|
|
4328
4215
|
}
|
|
4329
|
-
return /* @__PURE__ */
|
|
4216
|
+
return /* @__PURE__ */ jsxs16(Fragment2, {
|
|
4330
4217
|
children: [
|
|
4331
|
-
isConnected && /* @__PURE__ */
|
|
4332
|
-
|
|
4218
|
+
isConnected && /* @__PURE__ */ jsx20(ConnectedBanner, {}),
|
|
4219
|
+
/* @__PURE__ */ jsxs16("div", {
|
|
4333
4220
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-2",
|
|
4334
4221
|
children: [
|
|
4335
|
-
/* @__PURE__ */
|
|
4222
|
+
/* @__PURE__ */ jsxs16("button", {
|
|
4336
4223
|
type: "button",
|
|
4337
4224
|
className: cn("skippr:relative skippr:inline-flex skippr:cursor-pointer skippr:items-center skippr:gap-1.5 skippr:rounded-lg skippr:px-3 skippr:py-2 skippr:text-sm skippr:font-medium skippr:transition-all", activeTab === "chat" ? "skippr:text-foreground" : "skippr:text-muted-foreground skippr:hover:text-foreground"),
|
|
4338
4225
|
onClick: () => onTabChange("chat"),
|
|
4339
4226
|
children: [
|
|
4340
|
-
/* @__PURE__ */
|
|
4227
|
+
/* @__PURE__ */ jsx20(MessageCircle, {
|
|
4341
4228
|
className: "skippr:size-3.5"
|
|
4342
4229
|
}),
|
|
4343
4230
|
"Chat",
|
|
4344
|
-
activeTab === "chat" && /* @__PURE__ */
|
|
4231
|
+
activeTab === "chat" && /* @__PURE__ */ jsx20("span", {
|
|
4345
4232
|
className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
4346
4233
|
})
|
|
4347
4234
|
]
|
|
4348
4235
|
}),
|
|
4349
|
-
showAgenda && /* @__PURE__ */
|
|
4236
|
+
showAgenda && /* @__PURE__ */ jsxs16("button", {
|
|
4350
4237
|
type: "button",
|
|
4351
4238
|
className: cn("skippr:relative skippr:inline-flex skippr:cursor-pointer skippr:items-center skippr:gap-1.5 skippr:rounded-lg skippr:px-3 skippr:py-2 skippr:text-sm skippr:font-medium skippr:transition-all", activeTab === "agenda" ? "skippr:text-foreground" : "skippr:text-muted-foreground skippr:hover:text-foreground"),
|
|
4352
4239
|
onClick: () => onTabChange("agenda"),
|
|
4353
4240
|
children: [
|
|
4354
|
-
/* @__PURE__ */
|
|
4241
|
+
/* @__PURE__ */ jsx20(Calendar, {
|
|
4355
4242
|
className: "skippr:size-3.5"
|
|
4356
4243
|
}),
|
|
4357
4244
|
"Agenda",
|
|
4358
|
-
activeTab === "agenda" && /* @__PURE__ */
|
|
4245
|
+
activeTab === "agenda" && /* @__PURE__ */ jsx20("span", {
|
|
4359
4246
|
className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
4360
4247
|
})
|
|
4361
4248
|
]
|
|
4362
4249
|
})
|
|
4363
4250
|
]
|
|
4364
4251
|
}),
|
|
4365
|
-
/* @__PURE__ */
|
|
4252
|
+
/* @__PURE__ */ jsx20("div", {
|
|
4366
4253
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
4367
|
-
children: isDisconnecting ? /* @__PURE__ */
|
|
4254
|
+
children: isDisconnecting ? /* @__PURE__ */ jsx20("div", {
|
|
4368
4255
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
4369
|
-
children: /* @__PURE__ */
|
|
4256
|
+
children: /* @__PURE__ */ jsx20(LoadingDots, {
|
|
4370
4257
|
label: "Ending session..."
|
|
4371
4258
|
})
|
|
4372
|
-
}) :
|
|
4259
|
+
}) : inSession ? /* @__PURE__ */ jsxs16(Fragment2, {
|
|
4373
4260
|
children: [
|
|
4374
|
-
transitionLabel && /* @__PURE__ */
|
|
4261
|
+
transitionLabel && /* @__PURE__ */ jsx20("div", {
|
|
4375
4262
|
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",
|
|
4376
4263
|
children: transitionLabel
|
|
4377
4264
|
}),
|
|
4378
|
-
/* @__PURE__ */
|
|
4265
|
+
/* @__PURE__ */ jsx20(ConnectedBody, {
|
|
4379
4266
|
activeTab: effectiveTab,
|
|
4380
4267
|
autoFocusChat
|
|
4381
4268
|
})
|
|
4382
4269
|
]
|
|
4383
|
-
}) : /* @__PURE__ */
|
|
4270
|
+
}) : /* @__PURE__ */ jsx20("div", {
|
|
4384
4271
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
|
|
4385
|
-
children: /* @__PURE__ */
|
|
4272
|
+
children: /* @__PURE__ */ jsx20(StartSessionPrompt, {
|
|
4386
4273
|
onStartSession,
|
|
4387
4274
|
agentId,
|
|
4388
4275
|
agentControls,
|
|
@@ -4394,29 +4281,58 @@ function AuthenticatedContent({
|
|
|
4394
4281
|
})
|
|
4395
4282
|
}, `${activeTab}-empty`)
|
|
4396
4283
|
}),
|
|
4397
|
-
|
|
4398
|
-
|
|
4399
|
-
|
|
4400
|
-
|
|
4401
|
-
|
|
4402
|
-
|
|
4403
|
-
|
|
4284
|
+
!hideControls && /* @__PURE__ */ jsxs16("div", {
|
|
4285
|
+
className: "skippr:shrink-0 skippr:border-t skippr:border-border",
|
|
4286
|
+
children: [
|
|
4287
|
+
isConnected && !isDisconnecting && /* @__PURE__ */ jsx20(ModeToggleRow, {}),
|
|
4288
|
+
/* @__PURE__ */ jsx20("div", {
|
|
4289
|
+
className: "skippr:px-4 skippr:py-3 skippr:text-center skippr:text-[10px] skippr:text-muted-foreground",
|
|
4290
|
+
children: "Powered by Skippr"
|
|
4291
|
+
})
|
|
4292
|
+
]
|
|
4404
4293
|
})
|
|
4405
4294
|
]
|
|
4406
4295
|
});
|
|
4407
4296
|
}
|
|
4297
|
+
function ModeToggleRow() {
|
|
4298
|
+
const { textMode, toggleTextMode } = useTextMode();
|
|
4299
|
+
return /* @__PURE__ */ jsx20("div", {
|
|
4300
|
+
className: "skippr:flex skippr:justify-center skippr:px-3 skippr:pt-3 skippr:pb-1",
|
|
4301
|
+
children: /* @__PURE__ */ jsx20("button", {
|
|
4302
|
+
type: "button",
|
|
4303
|
+
"aria-label": textMode ? "Switch to voice mode" : "Switch to text mode",
|
|
4304
|
+
className: "skippr:flex skippr:cursor-pointer skippr:items-center skippr:gap-2 skippr:rounded-xl skippr:bg-muted skippr:px-4 skippr:py-2 skippr:text-sm skippr:font-medium skippr:text-foreground skippr:transition-colors skippr:hover:bg-muted/70",
|
|
4305
|
+
onClick: () => void toggleTextMode(),
|
|
4306
|
+
children: textMode ? /* @__PURE__ */ jsxs16(Fragment2, {
|
|
4307
|
+
children: [
|
|
4308
|
+
/* @__PURE__ */ jsx20(Mic, {
|
|
4309
|
+
className: "skippr:size-4"
|
|
4310
|
+
}),
|
|
4311
|
+
"Voice mode"
|
|
4312
|
+
]
|
|
4313
|
+
}) : /* @__PURE__ */ jsxs16(Fragment2, {
|
|
4314
|
+
children: [
|
|
4315
|
+
/* @__PURE__ */ jsx20(MessageSquare, {
|
|
4316
|
+
className: "skippr:size-4"
|
|
4317
|
+
}),
|
|
4318
|
+
"Text mode"
|
|
4319
|
+
]
|
|
4320
|
+
})
|
|
4321
|
+
})
|
|
4322
|
+
});
|
|
4323
|
+
}
|
|
4408
4324
|
function AuthError() {
|
|
4409
|
-
return /* @__PURE__ */
|
|
4325
|
+
return /* @__PURE__ */ jsxs16("div", {
|
|
4410
4326
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:px-6 skippr:py-4 skippr:text-center",
|
|
4411
4327
|
children: [
|
|
4412
|
-
/* @__PURE__ */
|
|
4328
|
+
/* @__PURE__ */ jsx20(CircleAlert, {
|
|
4413
4329
|
className: "skippr:mb-3 skippr:size-7 skippr:text-destructive"
|
|
4414
4330
|
}),
|
|
4415
|
-
/* @__PURE__ */
|
|
4331
|
+
/* @__PURE__ */ jsx20("p", {
|
|
4416
4332
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
4417
4333
|
children: "We couldn't verify your session"
|
|
4418
4334
|
}),
|
|
4419
|
-
/* @__PURE__ */
|
|
4335
|
+
/* @__PURE__ */ jsx20("p", {
|
|
4420
4336
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
4421
4337
|
children: "Please contact administrator."
|
|
4422
4338
|
})
|
|
@@ -4425,7 +4341,7 @@ function AuthError() {
|
|
|
4425
4341
|
}
|
|
4426
4342
|
function ConnectedBanner() {
|
|
4427
4343
|
const remaining = useSessionRemaining();
|
|
4428
|
-
return /* @__PURE__ */
|
|
4344
|
+
return /* @__PURE__ */ jsx20(SessionWarningBanner, {
|
|
4429
4345
|
remaining
|
|
4430
4346
|
});
|
|
4431
4347
|
}
|
|
@@ -4436,17 +4352,17 @@ function ConnectedBody({
|
|
|
4436
4352
|
const { allMessages, agentState, sendChatMessage, isSendingChat } = useCombinedMessages();
|
|
4437
4353
|
const { phases } = usePhaseUpdates();
|
|
4438
4354
|
if (activeTab === "agenda") {
|
|
4439
|
-
return /* @__PURE__ */
|
|
4355
|
+
return /* @__PURE__ */ jsx20("div", {
|
|
4440
4356
|
className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto skippr:animate-skippr-tab-fade",
|
|
4441
|
-
children: /* @__PURE__ */
|
|
4357
|
+
children: /* @__PURE__ */ jsx20(SessionAgenda, {
|
|
4442
4358
|
phases,
|
|
4443
4359
|
hasStarted: allMessages.length > 0 || agentState === "speaking"
|
|
4444
4360
|
})
|
|
4445
4361
|
}, "agenda");
|
|
4446
4362
|
}
|
|
4447
|
-
return /* @__PURE__ */
|
|
4363
|
+
return /* @__PURE__ */ jsx20("div", {
|
|
4448
4364
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
|
|
4449
|
-
children: /* @__PURE__ */
|
|
4365
|
+
children: /* @__PURE__ */ jsx20(MessageList, {
|
|
4450
4366
|
messages: allMessages,
|
|
4451
4367
|
isStreaming: agentState === "speaking",
|
|
4452
4368
|
sendChatMessage,
|
|
@@ -4456,29 +4372,75 @@ function ConnectedBody({
|
|
|
4456
4372
|
}, "chat");
|
|
4457
4373
|
}
|
|
4458
4374
|
|
|
4375
|
+
// src/components/Logo.tsx
|
|
4376
|
+
import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
4377
|
+
function Logo({ className }) {
|
|
4378
|
+
return /* @__PURE__ */ jsxs17("svg", {
|
|
4379
|
+
width: "1em",
|
|
4380
|
+
height: "1em",
|
|
4381
|
+
viewBox: "0 0 200 200",
|
|
4382
|
+
fill: "none",
|
|
4383
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
4384
|
+
role: "img",
|
|
4385
|
+
"aria-label": "Skippr",
|
|
4386
|
+
className,
|
|
4387
|
+
children: [
|
|
4388
|
+
/* @__PURE__ */ jsx21("rect", {
|
|
4389
|
+
width: "200",
|
|
4390
|
+
height: "200",
|
|
4391
|
+
rx: "40",
|
|
4392
|
+
fill: "#2D2D3F"
|
|
4393
|
+
}),
|
|
4394
|
+
/* @__PURE__ */ jsxs17("g", {
|
|
4395
|
+
transform: "translate(100 100) scale(0.8) translate(-100 -100)",
|
|
4396
|
+
children: [
|
|
4397
|
+
/* @__PURE__ */ jsx21("path", {
|
|
4398
|
+
d: "M144.497 59C149.193 59 153 62.8071 153 67.5033V116.397C153 118.034 152.536 119.562 151.735 120.859L114.894 92.4811L114.894 92.4804C105.42 85.1648 91.2971 91.7058 91.297 104.015V124.901H54.5033C49.8071 124.901 46 121.094 46 116.397V67.5033C46 62.8071 49.8071 59 54.5033 59H144.497ZM101.272 104.015C101.272 100.172 105.736 98.0111 108.798 100.375L140.637 124.901H101.272V104.015Z",
|
|
4399
|
+
fill: "white"
|
|
4400
|
+
}),
|
|
4401
|
+
/* @__PURE__ */ jsx21("path", {
|
|
4402
|
+
d: "M108.798 99.8856C105.736 97.5211 101.271 99.6824 101.271 103.525V155.892C101.271 160.27 106.852 162.191 109.594 158.755L122.619 142.437C123.1 141.836 123.712 141.35 124.409 141.016C125.106 140.683 125.871 140.51 126.645 140.51H147.946C152.386 140.51 154.316 134.944 150.81 132.247L108.798 99.8856Z",
|
|
4403
|
+
className: "skippr:fill-brand"
|
|
4404
|
+
})
|
|
4405
|
+
]
|
|
4406
|
+
})
|
|
4407
|
+
]
|
|
4408
|
+
});
|
|
4409
|
+
}
|
|
4410
|
+
|
|
4459
4411
|
// src/components/SidebarTrigger.tsx
|
|
4460
|
-
import { jsx as
|
|
4412
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
4461
4413
|
function SidebarTrigger() {
|
|
4462
|
-
const {
|
|
4463
|
-
|
|
4414
|
+
const {
|
|
4415
|
+
isPanelOpen,
|
|
4416
|
+
togglePanel,
|
|
4417
|
+
minimizePanel,
|
|
4418
|
+
minimizable,
|
|
4419
|
+
position,
|
|
4420
|
+
isMinimized,
|
|
4421
|
+
isConnected,
|
|
4422
|
+
isStarting,
|
|
4423
|
+
isPausing
|
|
4424
|
+
} = useLiveAgent();
|
|
4425
|
+
if (isMinimized || isConnected || isStarting || isPausing)
|
|
4464
4426
|
return null;
|
|
4465
4427
|
const handleClick = isPanelOpen && minimizable ? minimizePanel : togglePanel;
|
|
4466
|
-
return /* @__PURE__ */
|
|
4428
|
+
return /* @__PURE__ */ jsx22("button", {
|
|
4467
4429
|
type: "button",
|
|
4468
4430
|
onClick: handleClick,
|
|
4469
4431
|
title: isPanelOpen ? "Close chat" : "Open chat",
|
|
4470
4432
|
"aria-label": isPanelOpen ? "Close chat" : "Open chat",
|
|
4471
4433
|
className: cn("skippr:fixed skippr:bottom-6 skippr:z-[9998]", "skippr:flex skippr:size-12 skippr:items-center skippr:justify-center", "skippr:shadow-[0_4px_16px_rgba(45,43,61,0.45),0_2px_4px_rgba(0,0,0,0.1)] skippr:transition-all", "skippr:cursor-pointer skippr:hover:brightness-110 skippr:hover:-translate-y-0.5 skippr:active:translate-y-0", isPanelOpen ? "skippr:rounded-[14px] skippr:bg-bubble skippr:text-white" : "skippr:rounded-[10px] skippr:overflow-hidden", position === "right" ? "skippr:right-6" : "skippr:left-6"),
|
|
4472
|
-
children: isPanelOpen ? /* @__PURE__ */
|
|
4434
|
+
children: isPanelOpen ? /* @__PURE__ */ jsx22(ChevronDown, {
|
|
4473
4435
|
className: "skippr:size-5"
|
|
4474
|
-
}) : /* @__PURE__ */
|
|
4436
|
+
}) : /* @__PURE__ */ jsx22(Logo, {
|
|
4475
4437
|
className: "skippr:size-12"
|
|
4476
4438
|
})
|
|
4477
4439
|
});
|
|
4478
4440
|
}
|
|
4479
4441
|
|
|
4480
4442
|
// src/components/LiveAgent.tsx
|
|
4481
|
-
import { jsx as
|
|
4443
|
+
import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
4482
4444
|
function LiveAgent(props) {
|
|
4483
4445
|
const {
|
|
4484
4446
|
agentId: hostAgentId,
|
|
@@ -4510,20 +4472,20 @@ function LiveAgent(props) {
|
|
|
4510
4472
|
const usesHostAuth = !!getUserToken || !!userToken || !!authTokenProp;
|
|
4511
4473
|
const effectiveAuthToken = usesHostAuth ? authTokenProp : auth.authToken ?? undefined;
|
|
4512
4474
|
const hasModuleSelector = !hostAgentId;
|
|
4513
|
-
const [activeModule, setActiveModule] =
|
|
4475
|
+
const [activeModule, setActiveModule] = useState16(null);
|
|
4514
4476
|
const agentId = hasModuleSelector ? activeModule?.id ?? null : hostAgentId;
|
|
4515
4477
|
const agentControls = hasModuleSelector ? activeModule?.controls : hostAgentControls;
|
|
4516
|
-
const minimizeOnSessionStart =
|
|
4478
|
+
const minimizeOnSessionStart = useCallback11(() => {
|
|
4517
4479
|
if (minimizable) {
|
|
4518
4480
|
setIsMinimized(true);
|
|
4519
4481
|
setIsPanelOpen(false);
|
|
4520
4482
|
}
|
|
4521
4483
|
}, [minimizable]);
|
|
4522
|
-
const expandOnSessionStartError =
|
|
4484
|
+
const expandOnSessionStartError = useCallback11(() => {
|
|
4523
4485
|
setIsMinimized(false);
|
|
4524
4486
|
setIsPanelOpen(true);
|
|
4525
4487
|
}, []);
|
|
4526
|
-
const minimizeOnSessionDisconnect =
|
|
4488
|
+
const minimizeOnSessionDisconnect = useCallback11(() => {
|
|
4527
4489
|
if (hasModuleSelector) {
|
|
4528
4490
|
setActiveModule(null);
|
|
4529
4491
|
}
|
|
@@ -4559,39 +4521,42 @@ function LiveAgent(props) {
|
|
|
4559
4521
|
onStartError: expandOnSessionStartError,
|
|
4560
4522
|
onDisconnect: minimizeOnSessionDisconnect
|
|
4561
4523
|
});
|
|
4562
|
-
const teardownInFlightRef =
|
|
4524
|
+
const teardownInFlightRef = useRef15(false);
|
|
4563
4525
|
teardownInFlightRef.current = isPaused || isPausing || isDisconnecting;
|
|
4564
|
-
const handleRoomDisconnected =
|
|
4526
|
+
const handleRoomDisconnected = useCallback11(() => {
|
|
4565
4527
|
if (teardownInFlightRef.current)
|
|
4566
4528
|
return;
|
|
4567
4529
|
disconnect();
|
|
4568
4530
|
}, [disconnect]);
|
|
4569
|
-
const
|
|
4570
|
-
const [isPanelOpen, setIsPanelOpen] =
|
|
4571
|
-
const [isMinimized, setIsMinimized] =
|
|
4572
|
-
const [sidebarTab, setSidebarTab] =
|
|
4573
|
-
const [phasesSnapshot, setPhasesSnapshot] =
|
|
4531
|
+
const isSessionLive = connection !== null || isStarting || isPausing || isDisconnecting;
|
|
4532
|
+
const [isPanelOpen, setIsPanelOpen] = useState16(defaultOpen);
|
|
4533
|
+
const [isMinimized, setIsMinimized] = useState16(minimizable && !defaultOpen);
|
|
4534
|
+
const [sidebarTab, setSidebarTab] = useState16("agenda");
|
|
4535
|
+
const [phasesSnapshot, setPhasesSnapshot] = useState16([]);
|
|
4536
|
+
const [textMode, setTextMode] = useState16(false);
|
|
4537
|
+
const isConnected = connection !== null;
|
|
4538
|
+
const showControlBar = isConnected || isStarting || isPausing;
|
|
4539
|
+
useEffect20(() => {
|
|
4540
|
+
if (!isConnected)
|
|
4541
|
+
setTextMode(false);
|
|
4542
|
+
}, [isConnected]);
|
|
4574
4543
|
const {
|
|
4575
4544
|
modules: availableModules,
|
|
4576
4545
|
isLoading: isLoadingModules,
|
|
4546
|
+
hasResolved: hasResolvedModules,
|
|
4577
4547
|
error: modulesError,
|
|
4578
4548
|
refetch: refetchModules
|
|
4579
4549
|
} = useAvailableModules({
|
|
4580
|
-
enabled: !
|
|
4550
|
+
enabled: !isSessionLive,
|
|
4581
4551
|
bearerToken,
|
|
4582
4552
|
authedFetch
|
|
4583
4553
|
});
|
|
4584
|
-
const
|
|
4585
|
-
|
|
4586
|
-
goals: adoptionGoals,
|
|
4587
|
-
dismissGoal: dismissAdoptionGoal,
|
|
4588
|
-
attendGoal
|
|
4589
|
-
} = useAdoptionGoals({
|
|
4590
|
-
enabled: !inSession && hasAlwaysOnModule,
|
|
4554
|
+
const { goals: adoptionGoals, attendGoal } = useAdoptionGoals({
|
|
4555
|
+
enabled: !isSessionLive,
|
|
4591
4556
|
bearerToken,
|
|
4592
4557
|
authedFetch
|
|
4593
4558
|
});
|
|
4594
|
-
const activeModuleForAgent =
|
|
4559
|
+
const activeModuleForAgent = useMemo6(() => {
|
|
4595
4560
|
if (activeModule)
|
|
4596
4561
|
return activeModule;
|
|
4597
4562
|
if (!hostAgentId)
|
|
@@ -4599,8 +4564,8 @@ function LiveAgent(props) {
|
|
|
4599
4564
|
return availableModules.find((m) => m.id === hostAgentId) ?? null;
|
|
4600
4565
|
}, [activeModule, hostAgentId, availableModules]);
|
|
4601
4566
|
const agentMode = activeModuleForAgent?.mode ?? null;
|
|
4602
|
-
const resumableSession =
|
|
4603
|
-
const resumeSession =
|
|
4567
|
+
const resumableSession = useMemo6(() => getResumableSession(activeModuleForAgent), [activeModuleForAgent]);
|
|
4568
|
+
const resumeSession = useCallback11(async () => {
|
|
4604
4569
|
if (!resumableSession)
|
|
4605
4570
|
return;
|
|
4606
4571
|
await startSession({
|
|
@@ -4609,7 +4574,7 @@ function LiveAgent(props) {
|
|
|
4609
4574
|
existingSessionId: resumableSession.id
|
|
4610
4575
|
});
|
|
4611
4576
|
}, [resumableSession, startSession, agentControls]);
|
|
4612
|
-
const selectModule =
|
|
4577
|
+
const selectModule = useCallback11((moduleId) => {
|
|
4613
4578
|
const found = availableModules.find((m) => m.id === moduleId);
|
|
4614
4579
|
if (!found)
|
|
4615
4580
|
return;
|
|
@@ -4620,7 +4585,7 @@ function LiveAgent(props) {
|
|
|
4620
4585
|
existingSessionId: getResumableSessionId(found.currentSession, found.mode)
|
|
4621
4586
|
});
|
|
4622
4587
|
}, [availableModules, startSession]);
|
|
4623
|
-
const startAdoptionSession =
|
|
4588
|
+
const startAdoptionSession = useCallback11((goal) => {
|
|
4624
4589
|
attendGoal(goal.goalId);
|
|
4625
4590
|
const found = availableModules.find((m) => m.id === goal.agentId);
|
|
4626
4591
|
if (found)
|
|
@@ -4631,9 +4596,9 @@ function LiveAgent(props) {
|
|
|
4631
4596
|
adoptionGoalId: goal.goalId
|
|
4632
4597
|
});
|
|
4633
4598
|
}, [attendGoal, availableModules, startSession]);
|
|
4634
|
-
const [welcomeDismissed, setWelcomeDismissed] =
|
|
4635
|
-
const dismissWelcome =
|
|
4636
|
-
const [currentPosition, setCurrentPosition] =
|
|
4599
|
+
const [welcomeDismissed, setWelcomeDismissed] = useState16(false);
|
|
4600
|
+
const dismissWelcome = useCallback11(() => setWelcomeDismissed(true), []);
|
|
4601
|
+
const [currentPosition, setCurrentPosition] = useState16(() => {
|
|
4637
4602
|
try {
|
|
4638
4603
|
const saved = localStorage.getItem("skippr_widget_position");
|
|
4639
4604
|
if (saved === "left" || saved === "right")
|
|
@@ -4641,28 +4606,31 @@ function LiveAgent(props) {
|
|
|
4641
4606
|
} catch {}
|
|
4642
4607
|
return position;
|
|
4643
4608
|
});
|
|
4644
|
-
const setPositionWithPersist =
|
|
4609
|
+
const setPositionWithPersist = useCallback11((pos) => {
|
|
4645
4610
|
setCurrentPosition(pos);
|
|
4646
4611
|
try {
|
|
4647
4612
|
localStorage.setItem("skippr_widget_position", pos);
|
|
4648
4613
|
} catch {}
|
|
4649
4614
|
}, []);
|
|
4650
|
-
const openPanel =
|
|
4651
|
-
const closePanel =
|
|
4652
|
-
const togglePanel =
|
|
4653
|
-
const expandPanel =
|
|
4615
|
+
const openPanel = useCallback11(() => setIsPanelOpen(true), []);
|
|
4616
|
+
const closePanel = useCallback11(() => setIsPanelOpen(false), []);
|
|
4617
|
+
const togglePanel = useCallback11(() => setIsPanelOpen((prev) => !prev), []);
|
|
4618
|
+
const expandPanel = useCallback11(() => {
|
|
4654
4619
|
setIsMinimized(false);
|
|
4655
4620
|
setIsPanelOpen(true);
|
|
4656
4621
|
}, []);
|
|
4657
|
-
const minimizePanel =
|
|
4622
|
+
const minimizePanel = useCallback11(() => {
|
|
4658
4623
|
if (!minimizable)
|
|
4659
4624
|
return;
|
|
4660
4625
|
setIsMinimized(true);
|
|
4661
4626
|
setIsPanelOpen(false);
|
|
4662
4627
|
}, [minimizable]);
|
|
4663
|
-
const
|
|
4628
|
+
const pauseSessionAndMinimize = useCallback11(async () => {
|
|
4629
|
+
await pauseSession();
|
|
4630
|
+
minimizePanel();
|
|
4631
|
+
}, [pauseSession, minimizePanel]);
|
|
4664
4632
|
const isAuthenticated = bearerToken !== null || auth.isAuthenticated;
|
|
4665
|
-
const ctx =
|
|
4633
|
+
const ctx = useMemo6(() => ({
|
|
4666
4634
|
connection,
|
|
4667
4635
|
shouldConnect,
|
|
4668
4636
|
isConnected,
|
|
@@ -4672,7 +4640,7 @@ function LiveAgent(props) {
|
|
|
4672
4640
|
error,
|
|
4673
4641
|
errorCode,
|
|
4674
4642
|
startSession,
|
|
4675
|
-
pauseSession,
|
|
4643
|
+
pauseSession: pauseSessionAndMinimize,
|
|
4676
4644
|
resumeSession,
|
|
4677
4645
|
disconnect,
|
|
4678
4646
|
isPaused,
|
|
@@ -4702,6 +4670,8 @@ function LiveAgent(props) {
|
|
|
4702
4670
|
isAuthSubmitting: auth.isSubmitting,
|
|
4703
4671
|
sidebarTab,
|
|
4704
4672
|
setSidebarTab,
|
|
4673
|
+
textMode,
|
|
4674
|
+
setTextModeState: setTextMode,
|
|
4705
4675
|
autoFocusChat,
|
|
4706
4676
|
captureMode,
|
|
4707
4677
|
agentId,
|
|
@@ -4714,8 +4684,8 @@ function LiveAgent(props) {
|
|
|
4714
4684
|
modulesError,
|
|
4715
4685
|
refetchModules,
|
|
4716
4686
|
selectModule,
|
|
4687
|
+
hasResolvedModules,
|
|
4717
4688
|
adoptionGoals,
|
|
4718
|
-
dismissAdoptionGoal,
|
|
4719
4689
|
startAdoptionSession
|
|
4720
4690
|
}), [
|
|
4721
4691
|
connection,
|
|
@@ -4727,7 +4697,7 @@ function LiveAgent(props) {
|
|
|
4727
4697
|
error,
|
|
4728
4698
|
errorCode,
|
|
4729
4699
|
startSession,
|
|
4730
|
-
|
|
4700
|
+
pauseSessionAndMinimize,
|
|
4731
4701
|
resumeSession,
|
|
4732
4702
|
disconnect,
|
|
4733
4703
|
isPaused,
|
|
@@ -4755,6 +4725,7 @@ function LiveAgent(props) {
|
|
|
4755
4725
|
auth.logout,
|
|
4756
4726
|
auth.isSubmitting,
|
|
4757
4727
|
sidebarTab,
|
|
4728
|
+
textMode,
|
|
4758
4729
|
autoFocusChat,
|
|
4759
4730
|
captureMode,
|
|
4760
4731
|
agentId,
|
|
@@ -4767,38 +4738,39 @@ function LiveAgent(props) {
|
|
|
4767
4738
|
modulesError,
|
|
4768
4739
|
refetchModules,
|
|
4769
4740
|
selectModule,
|
|
4741
|
+
hasResolvedModules,
|
|
4770
4742
|
adoptionGoals,
|
|
4771
|
-
dismissAdoptionGoal,
|
|
4772
4743
|
startAdoptionSession
|
|
4773
4744
|
]);
|
|
4774
|
-
return /* @__PURE__ */
|
|
4745
|
+
return /* @__PURE__ */ jsx23(LiveAgentContext.Provider, {
|
|
4775
4746
|
value: ctx,
|
|
4776
|
-
children: /* @__PURE__ */
|
|
4747
|
+
children: /* @__PURE__ */ jsxs18(LiveKitRoom, {
|
|
4777
4748
|
serverUrl: connection?.livekitUrl,
|
|
4778
4749
|
token: connection?.token,
|
|
4779
4750
|
connect: shouldConnect,
|
|
4780
4751
|
audio: true,
|
|
4781
4752
|
onDisconnected: handleRoomDisconnected,
|
|
4782
4753
|
children: [
|
|
4783
|
-
connection && /* @__PURE__ */
|
|
4784
|
-
connection && captureMode === "screenshare" && /* @__PURE__ */
|
|
4754
|
+
connection && !textMode && /* @__PURE__ */ jsx23(RoomAudioRenderer, {}),
|
|
4755
|
+
connection && captureMode === "screenshare" && /* @__PURE__ */ jsx23(AutoStartMedia, {
|
|
4785
4756
|
pendingScreenStream
|
|
4786
4757
|
}),
|
|
4787
|
-
connection && captureMode === "auto" && /* @__PURE__ */
|
|
4788
|
-
/* @__PURE__ */
|
|
4758
|
+
connection && captureMode === "auto" && /* @__PURE__ */ jsx23(DomCapture, {}),
|
|
4759
|
+
/* @__PURE__ */ jsxs18(ShadowHost, {
|
|
4789
4760
|
children: [
|
|
4790
|
-
connection && captureMode === "auto" && agentControls?.highlight && /* @__PURE__ */
|
|
4791
|
-
connection && captureMode === "auto" && agentControls?.actions && /* @__PURE__ */
|
|
4792
|
-
/* @__PURE__ */
|
|
4761
|
+
connection && captureMode === "auto" && agentControls?.highlight && /* @__PURE__ */ jsx23(HighlightOverlay, {}),
|
|
4762
|
+
connection && captureMode === "auto" && agentControls?.actions && /* @__PURE__ */ jsx23(PageActionHandler, {}),
|
|
4763
|
+
/* @__PURE__ */ jsxs18("div", {
|
|
4793
4764
|
id: WIDGET_ROOT_ID,
|
|
4794
4765
|
children: [
|
|
4795
|
-
isMinimized && /* @__PURE__ */
|
|
4766
|
+
isMinimized && !showControlBar && /* @__PURE__ */ jsx23(MinimizedBubble, {
|
|
4796
4767
|
welcomeMessage,
|
|
4797
4768
|
welcomeDismissed,
|
|
4798
4769
|
onDismissWelcome: dismissWelcome
|
|
4799
4770
|
}),
|
|
4800
|
-
/* @__PURE__ */
|
|
4801
|
-
/* @__PURE__ */
|
|
4771
|
+
showControlBar && !hideControls && /* @__PURE__ */ jsx23(SessionControlBar, {}),
|
|
4772
|
+
/* @__PURE__ */ jsx23(SidebarTrigger, {}),
|
|
4773
|
+
/* @__PURE__ */ jsx23(Sidebar, {
|
|
4802
4774
|
hideControls,
|
|
4803
4775
|
hideHeader,
|
|
4804
4776
|
startSessionLabel
|
|
@@ -4813,9 +4785,9 @@ function LiveAgent(props) {
|
|
|
4813
4785
|
});
|
|
4814
4786
|
}
|
|
4815
4787
|
// src/hooks/useIsLocalSpeaking.ts
|
|
4816
|
-
import { useIsSpeaking, useLocalParticipant as
|
|
4788
|
+
import { useIsSpeaking, useLocalParticipant as useLocalParticipant8 } from "@livekit/components-react/hooks";
|
|
4817
4789
|
function useIsLocalSpeaking() {
|
|
4818
|
-
const { localParticipant } =
|
|
4790
|
+
const { localParticipant } = useLocalParticipant8();
|
|
4819
4791
|
return useIsSpeaking(localParticipant);
|
|
4820
4792
|
}
|
|
4821
4793
|
export {
|