@skippr/live-agent-sdk 0.46.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 +1112 -1169
- package/dist/skippr-sdk.css +1 -1
- package/dist/skippr-sdk.js +152 -152
- 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 +5 -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/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,7 +8,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
|
|
|
8
8
|
|
|
9
9
|
// src/components/LiveAgent.tsx
|
|
10
10
|
import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react";
|
|
11
|
-
import { useCallback as
|
|
11
|
+
import { useCallback as 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";
|
|
@@ -142,14 +142,10 @@ function useAdoptionGoals({
|
|
|
142
142
|
body: JSON.stringify({ status })
|
|
143
143
|
}).catch((e) => console.warn("[Skippr] adoption status update failed", e));
|
|
144
144
|
}, [authedFetch]);
|
|
145
|
-
const dismissGoal = useCallback((goalId) => {
|
|
146
|
-
setCandidates((prev) => prev.filter((goal) => goal.goalId !== goalId));
|
|
147
|
-
postStatus(goalId, "dismissed" /* Dismissed */);
|
|
148
|
-
}, [postStatus]);
|
|
149
145
|
const attendGoal = useCallback((goalId) => {
|
|
150
146
|
postStatus(goalId, "attended" /* Attended */);
|
|
151
147
|
}, [postStatus]);
|
|
152
|
-
return { goals,
|
|
148
|
+
return { goals, attendGoal };
|
|
153
149
|
}
|
|
154
150
|
|
|
155
151
|
// src/hooks/useAuth.ts
|
|
@@ -315,9 +311,11 @@ function useAvailableModules({
|
|
|
315
311
|
}) {
|
|
316
312
|
const [modules, setModules] = useState3([]);
|
|
317
313
|
const [isLoading, setIsLoading] = useState3(false);
|
|
314
|
+
const [hasResolved, setHasResolved] = useState3(false);
|
|
318
315
|
const [error, setError] = useState3(null);
|
|
319
316
|
const fetchModules = useCallback3(async () => {
|
|
320
317
|
setIsLoading(true);
|
|
318
|
+
setHasResolved(false);
|
|
321
319
|
setError(null);
|
|
322
320
|
try {
|
|
323
321
|
const resp = await authedFetch(`${API_URL3}/v1/modules/available`);
|
|
@@ -331,6 +329,7 @@ function useAvailableModules({
|
|
|
331
329
|
setError(e instanceof Error ? e.message : "Failed to load modules");
|
|
332
330
|
} finally {
|
|
333
331
|
setIsLoading(false);
|
|
332
|
+
setHasResolved(true);
|
|
334
333
|
}
|
|
335
334
|
}, [authedFetch]);
|
|
336
335
|
useEffect3(() => {
|
|
@@ -341,6 +340,7 @@ function useAvailableModules({
|
|
|
341
340
|
return {
|
|
342
341
|
modules,
|
|
343
342
|
isLoading,
|
|
343
|
+
hasResolved,
|
|
344
344
|
error,
|
|
345
345
|
refetch: fetchModules
|
|
346
346
|
};
|
|
@@ -688,6 +688,7 @@ var DOM_SNAPSHOT_TOPIC = "skippr.dom-snapshot";
|
|
|
688
688
|
var DOM_EVENTS_TOPIC = "skippr.dom-events";
|
|
689
689
|
var HIGHLIGHT_TOPIC = "skippr.highlight";
|
|
690
690
|
var PAGE_ACTIONS_TOPIC = "skippr.page-actions";
|
|
691
|
+
var TEXT_MODE_TOPIC = "skippr.text-mode";
|
|
691
692
|
var NAME_MAX_CHARS = 80;
|
|
692
693
|
|
|
693
694
|
// src/lib/agentMode.ts
|
|
@@ -1775,16 +1776,12 @@ var __iconNode4 = [
|
|
|
1775
1776
|
["circle", { cx: "4", cy: "20", r: "2", key: "6kqj1y" }]
|
|
1776
1777
|
];
|
|
1777
1778
|
var Sparkles = createLucideIcon("sparkles", __iconNode4);
|
|
1778
|
-
// ../../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
|
|
1779
1780
|
var __iconNode5 = [
|
|
1780
|
-
["path", { d: "
|
|
1781
|
-
["
|
|
1782
|
-
["path", { d: "M2 14h2", key: "vft8re" }],
|
|
1783
|
-
["path", { d: "M20 14h2", key: "4cs60a" }],
|
|
1784
|
-
["path", { d: "M15 13v2", key: "1xurst" }],
|
|
1785
|
-
["path", { d: "M9 13v2", key: "rq6x2g" }]
|
|
1781
|
+
["path", { d: "M5 12h14", key: "1ays0h" }],
|
|
1782
|
+
["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
|
|
1786
1783
|
];
|
|
1787
|
-
var
|
|
1784
|
+
var ArrowRight = createLucideIcon("arrow-right", __iconNode5);
|
|
1788
1785
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/calendar.js
|
|
1789
1786
|
var __iconNode6 = [
|
|
1790
1787
|
["path", { d: "M8 2v4", key: "1cmpym" }],
|
|
@@ -1799,45 +1796,27 @@ var ChevronDown = createLucideIcon("chevron-down", __iconNode7);
|
|
|
1799
1796
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/circle.js
|
|
1800
1797
|
var __iconNode8 = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
|
|
1801
1798
|
var Circle = createLucideIcon("circle", __iconNode8);
|
|
1802
|
-
// ../../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
|
|
1803
1800
|
var __iconNode9 = [
|
|
1804
|
-
["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
|
|
1805
|
-
["path", { d: "M12 6v6l4 2", key: "mmk7yg" }]
|
|
1806
|
-
];
|
|
1807
|
-
var Clock = createLucideIcon("clock", __iconNode9);
|
|
1808
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/graduation-cap.js
|
|
1809
|
-
var __iconNode10 = [
|
|
1810
|
-
[
|
|
1811
|
-
"path",
|
|
1812
|
-
{
|
|
1813
|
-
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",
|
|
1814
|
-
key: "j76jl0"
|
|
1815
|
-
}
|
|
1816
|
-
],
|
|
1817
|
-
["path", { d: "M22 10v6", key: "1lu8f3" }],
|
|
1818
|
-
["path", { d: "M6 12.5V16a6 3 0 0 0 12 0v-3.5", key: "1r8lef" }]
|
|
1819
|
-
];
|
|
1820
|
-
var GraduationCap = createLucideIcon("graduation-cap", __iconNode10);
|
|
1821
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/headset.js
|
|
1822
|
-
var __iconNode11 = [
|
|
1823
1801
|
[
|
|
1824
1802
|
"path",
|
|
1825
1803
|
{
|
|
1826
|
-
d: "
|
|
1827
|
-
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"
|
|
1828
1806
|
}
|
|
1829
1807
|
],
|
|
1830
|
-
["path", { d: "
|
|
1808
|
+
["path", { d: "M9 18h6", key: "x1upvd" }],
|
|
1809
|
+
["path", { d: "M10 22h4", key: "ceow96" }]
|
|
1831
1810
|
];
|
|
1832
|
-
var
|
|
1811
|
+
var Lightbulb = createLucideIcon("lightbulb", __iconNode9);
|
|
1833
1812
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mail.js
|
|
1834
|
-
var
|
|
1813
|
+
var __iconNode10 = [
|
|
1835
1814
|
["path", { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7", key: "132q7q" }],
|
|
1836
1815
|
["rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", key: "izxlao" }]
|
|
1837
1816
|
];
|
|
1838
|
-
var Mail = createLucideIcon("mail",
|
|
1817
|
+
var Mail = createLucideIcon("mail", __iconNode10);
|
|
1839
1818
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-circle.js
|
|
1840
|
-
var
|
|
1819
|
+
var __iconNode11 = [
|
|
1841
1820
|
[
|
|
1842
1821
|
"path",
|
|
1843
1822
|
{
|
|
@@ -1846,9 +1825,9 @@ var __iconNode13 = [
|
|
|
1846
1825
|
}
|
|
1847
1826
|
]
|
|
1848
1827
|
];
|
|
1849
|
-
var MessageCircle = createLucideIcon("message-circle",
|
|
1828
|
+
var MessageCircle = createLucideIcon("message-circle", __iconNode11);
|
|
1850
1829
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/message-square.js
|
|
1851
|
-
var
|
|
1830
|
+
var __iconNode12 = [
|
|
1852
1831
|
[
|
|
1853
1832
|
"path",
|
|
1854
1833
|
{
|
|
@@ -1857,9 +1836,9 @@ var __iconNode14 = [
|
|
|
1857
1836
|
}
|
|
1858
1837
|
]
|
|
1859
1838
|
];
|
|
1860
|
-
var MessageSquare = createLucideIcon("message-square",
|
|
1839
|
+
var MessageSquare = createLucideIcon("message-square", __iconNode12);
|
|
1861
1840
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic-off.js
|
|
1862
|
-
var
|
|
1841
|
+
var __iconNode13 = [
|
|
1863
1842
|
["path", { d: "M12 19v3", key: "npa21l" }],
|
|
1864
1843
|
["path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33", key: "1gzdoj" }],
|
|
1865
1844
|
["path", { d: "M16.95 16.95A7 7 0 0 1 5 12v-2", key: "cqa7eg" }],
|
|
@@ -1867,40 +1846,40 @@ var __iconNode15 = [
|
|
|
1867
1846
|
["path", { d: "m2 2 20 20", key: "1ooewy" }],
|
|
1868
1847
|
["path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12", key: "r2i35w" }]
|
|
1869
1848
|
];
|
|
1870
|
-
var MicOff = createLucideIcon("mic-off",
|
|
1849
|
+
var MicOff = createLucideIcon("mic-off", __iconNode13);
|
|
1871
1850
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mic.js
|
|
1872
|
-
var
|
|
1851
|
+
var __iconNode14 = [
|
|
1873
1852
|
["path", { d: "M12 19v3", key: "npa21l" }],
|
|
1874
1853
|
["path", { d: "M19 10v2a7 7 0 0 1-14 0v-2", key: "1vc78b" }],
|
|
1875
1854
|
["rect", { x: "9", y: "2", width: "6", height: "13", rx: "3", key: "s6n7sd" }]
|
|
1876
1855
|
];
|
|
1877
|
-
var Mic = createLucideIcon("mic",
|
|
1856
|
+
var Mic = createLucideIcon("mic", __iconNode14);
|
|
1878
1857
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/minimize-2.js
|
|
1879
|
-
var
|
|
1858
|
+
var __iconNode15 = [
|
|
1880
1859
|
["path", { d: "m14 10 7-7", key: "oa77jy" }],
|
|
1881
1860
|
["path", { d: "M20 10h-6V4", key: "mjg0md" }],
|
|
1882
1861
|
["path", { d: "m3 21 7-7", key: "tjx5ai" }],
|
|
1883
1862
|
["path", { d: "M4 14h6v6", key: "rmj7iw" }]
|
|
1884
1863
|
];
|
|
1885
|
-
var Minimize2 = createLucideIcon("minimize-2",
|
|
1864
|
+
var Minimize2 = createLucideIcon("minimize-2", __iconNode15);
|
|
1886
1865
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor-off.js
|
|
1887
|
-
var
|
|
1866
|
+
var __iconNode16 = [
|
|
1888
1867
|
["path", { d: "M12 17v4", key: "1riwvh" }],
|
|
1889
1868
|
["path", { d: "M17 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 1.184-1.826", key: "cv7jms" }],
|
|
1890
1869
|
["path", { d: "m2 2 20 20", key: "1ooewy" }],
|
|
1891
1870
|
["path", { d: "M8 21h8", key: "1ev6f3" }],
|
|
1892
1871
|
["path", { d: "M8.656 3H20a2 2 0 0 1 2 2v10a2 2 0 0 1-.293 1.042", key: "z8ni2w" }]
|
|
1893
1872
|
];
|
|
1894
|
-
var MonitorOff = createLucideIcon("monitor-off",
|
|
1873
|
+
var MonitorOff = createLucideIcon("monitor-off", __iconNode16);
|
|
1895
1874
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor.js
|
|
1896
|
-
var
|
|
1875
|
+
var __iconNode17 = [
|
|
1897
1876
|
["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
|
|
1898
1877
|
["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
|
|
1899
1878
|
["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
|
|
1900
1879
|
];
|
|
1901
|
-
var Monitor = createLucideIcon("monitor",
|
|
1880
|
+
var Monitor = createLucideIcon("monitor", __iconNode17);
|
|
1902
1881
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mouse-pointer-2.js
|
|
1903
|
-
var
|
|
1882
|
+
var __iconNode18 = [
|
|
1904
1883
|
[
|
|
1905
1884
|
"path",
|
|
1906
1885
|
{
|
|
@@ -1909,65 +1888,9 @@ var __iconNode20 = [
|
|
|
1909
1888
|
}
|
|
1910
1889
|
]
|
|
1911
1890
|
];
|
|
1912
|
-
var MousePointer2 = createLucideIcon("mouse-pointer-2",
|
|
1913
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/pause.js
|
|
1914
|
-
var __iconNode21 = [
|
|
1915
|
-
["rect", { x: "14", y: "3", width: "5", height: "18", rx: "1", key: "kaeet6" }],
|
|
1916
|
-
["rect", { x: "5", y: "3", width: "5", height: "18", rx: "1", key: "1wsw3u" }]
|
|
1917
|
-
];
|
|
1918
|
-
var Pause = createLucideIcon("pause", __iconNode21);
|
|
1919
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/phone-off.js
|
|
1920
|
-
var __iconNode22 = [
|
|
1921
|
-
[
|
|
1922
|
-
"path",
|
|
1923
|
-
{
|
|
1924
|
-
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",
|
|
1925
|
-
key: "1wngk7"
|
|
1926
|
-
}
|
|
1927
|
-
],
|
|
1928
|
-
["path", { d: "M22 2 2 22", key: "y4kqgn" }],
|
|
1929
|
-
[
|
|
1930
|
-
"path",
|
|
1931
|
-
{
|
|
1932
|
-
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",
|
|
1933
|
-
key: "10hv5p"
|
|
1934
|
-
}
|
|
1935
|
-
]
|
|
1936
|
-
];
|
|
1937
|
-
var PhoneOff = createLucideIcon("phone-off", __iconNode22);
|
|
1938
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/play.js
|
|
1939
|
-
var __iconNode23 = [
|
|
1940
|
-
[
|
|
1941
|
-
"path",
|
|
1942
|
-
{
|
|
1943
|
-
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",
|
|
1944
|
-
key: "10ikf1"
|
|
1945
|
-
}
|
|
1946
|
-
]
|
|
1947
|
-
];
|
|
1948
|
-
var Play = createLucideIcon("play", __iconNode23);
|
|
1949
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/rocket.js
|
|
1950
|
-
var __iconNode24 = [
|
|
1951
|
-
["path", { d: "M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5", key: "qeys4" }],
|
|
1952
|
-
[
|
|
1953
|
-
"path",
|
|
1954
|
-
{
|
|
1955
|
-
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",
|
|
1956
|
-
key: "u4xsad"
|
|
1957
|
-
}
|
|
1958
|
-
],
|
|
1959
|
-
[
|
|
1960
|
-
"path",
|
|
1961
|
-
{
|
|
1962
|
-
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",
|
|
1963
|
-
key: "676m9"
|
|
1964
|
-
}
|
|
1965
|
-
],
|
|
1966
|
-
["path", { d: "M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05", key: "92ym6u" }]
|
|
1967
|
-
];
|
|
1968
|
-
var Rocket = createLucideIcon("rocket", __iconNode24);
|
|
1891
|
+
var MousePointer2 = createLucideIcon("mouse-pointer-2", __iconNode18);
|
|
1969
1892
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/send.js
|
|
1970
|
-
var
|
|
1893
|
+
var __iconNode19 = [
|
|
1971
1894
|
[
|
|
1972
1895
|
"path",
|
|
1973
1896
|
{
|
|
@@ -1977,21 +1900,13 @@ var __iconNode25 = [
|
|
|
1977
1900
|
],
|
|
1978
1901
|
["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
|
|
1979
1902
|
];
|
|
1980
|
-
var Send = createLucideIcon("send",
|
|
1981
|
-
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/user-plus.js
|
|
1982
|
-
var __iconNode26 = [
|
|
1983
|
-
["path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", key: "1yyitq" }],
|
|
1984
|
-
["circle", { cx: "9", cy: "7", r: "4", key: "nufk8" }],
|
|
1985
|
-
["line", { x1: "19", x2: "19", y1: "8", y2: "14", key: "1bvyxn" }],
|
|
1986
|
-
["line", { x1: "22", x2: "16", y1: "11", y2: "11", key: "1shjgl" }]
|
|
1987
|
-
];
|
|
1988
|
-
var UserPlus = createLucideIcon("user-plus", __iconNode26);
|
|
1903
|
+
var Send = createLucideIcon("send", __iconNode19);
|
|
1989
1904
|
// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/x.js
|
|
1990
|
-
var
|
|
1905
|
+
var __iconNode20 = [
|
|
1991
1906
|
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
|
|
1992
1907
|
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
|
|
1993
1908
|
];
|
|
1994
|
-
var X = createLucideIcon("x",
|
|
1909
|
+
var X = createLucideIcon("x", __iconNode20);
|
|
1995
1910
|
// src/components/HighlightOverlay.tsx
|
|
1996
1911
|
import { useCallback as useCallback5, useEffect as useEffect7, useRef as useRef4, useState as useState5 } from "react";
|
|
1997
1912
|
|
|
@@ -2228,60 +2143,7 @@ function HighlightOverlay() {
|
|
|
2228
2143
|
}
|
|
2229
2144
|
|
|
2230
2145
|
// src/components/MinimizedBubble.tsx
|
|
2231
|
-
import { useContext as
|
|
2232
|
-
|
|
2233
|
-
// src/hooks/useLiveAgent.ts
|
|
2234
|
-
import { useContext as useContext2 } from "react";
|
|
2235
|
-
function useLiveAgent() {
|
|
2236
|
-
const ctx = useContext2(LiveAgentContext);
|
|
2237
|
-
if (!ctx) {
|
|
2238
|
-
throw new Error("useLiveAgent must be used within a <LiveAgent> provider");
|
|
2239
|
-
}
|
|
2240
|
-
const {
|
|
2241
|
-
usesHostAuth,
|
|
2242
|
-
authFailed,
|
|
2243
|
-
connection,
|
|
2244
|
-
shouldConnect,
|
|
2245
|
-
historyMessages,
|
|
2246
|
-
phasesSnapshot,
|
|
2247
|
-
setPhasesSnapshot,
|
|
2248
|
-
adoptionGoals,
|
|
2249
|
-
dismissAdoptionGoal,
|
|
2250
|
-
startAdoptionSession,
|
|
2251
|
-
...publicValue
|
|
2252
|
-
} = ctx;
|
|
2253
|
-
return publicValue;
|
|
2254
|
-
}
|
|
2255
|
-
|
|
2256
|
-
// src/hooks/useMediaControls.ts
|
|
2257
|
-
import { useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react/hooks";
|
|
2258
|
-
import { ScreenSharePresets as ScreenSharePresets2 } from "livekit-client";
|
|
2259
|
-
import { useCallback as useCallback6 } from "react";
|
|
2260
|
-
var SCREEN_SHARE_OPTIONS = {
|
|
2261
|
-
video: { displaySurface: "browser" },
|
|
2262
|
-
resolution: ScreenSharePresets2.h720fps30.resolution,
|
|
2263
|
-
contentHint: "detail"
|
|
2264
|
-
};
|
|
2265
|
-
function useMediaControls() {
|
|
2266
|
-
const { localParticipant } = useLocalParticipant3();
|
|
2267
|
-
const isMuted = !localParticipant.isMicrophoneEnabled;
|
|
2268
|
-
const isScreenSharing = localParticipant.isScreenShareEnabled;
|
|
2269
|
-
const toggleMute = useCallback6(async () => {
|
|
2270
|
-
try {
|
|
2271
|
-
await localParticipant.setMicrophoneEnabled(isMuted);
|
|
2272
|
-
} catch (error) {
|
|
2273
|
-
console.error("Failed to toggle microphone:", error);
|
|
2274
|
-
}
|
|
2275
|
-
}, [localParticipant, isMuted]);
|
|
2276
|
-
const toggleScreenShare = useCallback6(async () => {
|
|
2277
|
-
try {
|
|
2278
|
-
await localParticipant.setScreenShareEnabled(!isScreenSharing, SCREEN_SHARE_OPTIONS);
|
|
2279
|
-
} catch (error) {
|
|
2280
|
-
console.error("Failed to toggle screen share:", error);
|
|
2281
|
-
}
|
|
2282
|
-
}, [localParticipant, isScreenSharing]);
|
|
2283
|
-
return { isMuted, toggleMute, isScreenSharing, toggleScreenShare };
|
|
2284
|
-
}
|
|
2146
|
+
import { useContext as useContext2, useEffect as useEffect8, useRef as useRef5, useState as useState6 } from "react";
|
|
2285
2147
|
|
|
2286
2148
|
// src/lib/utils.ts
|
|
2287
2149
|
import { clsx } from "clsx";
|
|
@@ -2292,414 +2154,267 @@ function cn(...inputs) {
|
|
|
2292
2154
|
|
|
2293
2155
|
// src/components/AdoptionBubble.tsx
|
|
2294
2156
|
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
2295
|
-
function AdoptionBubble({
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
}
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
})
|
|
2313
|
-
})
|
|
2314
|
-
]
|
|
2315
|
-
});
|
|
2316
|
-
}
|
|
2317
|
-
|
|
2318
|
-
// src/hooks/useAgentVoiceState.ts
|
|
2319
|
-
import { useVoiceAssistant } from "@livekit/components-react/hooks";
|
|
2320
|
-
function useAgentVoiceState() {
|
|
2321
|
-
const { state } = useVoiceAssistant();
|
|
2322
|
-
return {
|
|
2323
|
-
state,
|
|
2324
|
-
isSpeaking: state === "speaking",
|
|
2325
|
-
isListening: state === "listening"
|
|
2326
|
-
};
|
|
2327
|
-
}
|
|
2328
|
-
|
|
2329
|
-
// src/components/LauncherStatusPill.tsx
|
|
2330
|
-
import { jsx as jsx3, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
|
|
2331
|
-
function pillStatusFromAgent(state, canSeePage) {
|
|
2332
|
-
if (state === "speaking")
|
|
2333
|
-
return "talking";
|
|
2334
|
-
if (state === "thinking")
|
|
2335
|
-
return "thinking";
|
|
2336
|
-
return canSeePage ? "observing" : "connected";
|
|
2337
|
-
}
|
|
2338
|
-
function LauncherStatusPill() {
|
|
2339
|
-
const { isConnected, isStarting, isPaused, expandPanel, setSidebarTab, position, captureMode } = useLiveAgent();
|
|
2340
|
-
const { state } = useAgentVoiceState();
|
|
2341
|
-
const { isScreenSharing } = useMediaControls();
|
|
2342
|
-
const isStandingBy = isStarting && !isConnected;
|
|
2343
|
-
if (!isConnected && !isStandingBy && !isPaused)
|
|
2344
|
-
return null;
|
|
2345
|
-
const canSeePage = captureMode === "auto" || isScreenSharing;
|
|
2346
|
-
let status;
|
|
2347
|
-
if (isPaused) {
|
|
2348
|
-
status = "paused";
|
|
2349
|
-
} else if (isStandingBy) {
|
|
2350
|
-
status = "standing-by";
|
|
2351
|
-
} else {
|
|
2352
|
-
status = pillStatusFromAgent(state, canSeePage);
|
|
2353
|
-
}
|
|
2354
|
-
let ariaLabel;
|
|
2355
|
-
if (isStandingBy) {
|
|
2356
|
-
ariaLabel = "Skippr is standing by — click to open";
|
|
2357
|
-
} else if (isPaused) {
|
|
2358
|
-
ariaLabel = "Session paused — click to open";
|
|
2359
|
-
} else {
|
|
2360
|
-
ariaLabel = `Skippr is ${status} — click to open chat`;
|
|
2361
|
-
}
|
|
2362
|
-
const handleClick = () => {
|
|
2363
|
-
if (!isStandingBy)
|
|
2364
|
-
setSidebarTab("chat");
|
|
2365
|
-
expandPanel();
|
|
2366
|
-
};
|
|
2367
|
-
return /* @__PURE__ */ jsx3("button", {
|
|
2368
|
-
type: "button",
|
|
2369
|
-
onClick: handleClick,
|
|
2370
|
-
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"),
|
|
2371
|
-
"aria-label": ariaLabel,
|
|
2372
|
-
children: /* @__PURE__ */ jsxs3("span", {
|
|
2373
|
-
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"),
|
|
2374
2174
|
children: [
|
|
2375
|
-
|
|
2376
|
-
|
|
2377
|
-
|
|
2378
|
-
|
|
2379
|
-
|
|
2380
|
-
|
|
2381
|
-
]
|
|
2382
|
-
}),
|
|
2383
|
-
status === "observing" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2384
|
-
children: [
|
|
2385
|
-
/* @__PURE__ */ jsx3(ObservingIcon, {}),
|
|
2386
|
-
/* @__PURE__ */ jsx3("span", {
|
|
2387
|
-
children: "Skippr is observing"
|
|
2388
|
-
})
|
|
2389
|
-
]
|
|
2390
|
-
}),
|
|
2391
|
-
status === "connected" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2392
|
-
children: [
|
|
2393
|
-
/* @__PURE__ */ jsx3(ConnectedDot, {}),
|
|
2394
|
-
/* @__PURE__ */ jsx3("span", {
|
|
2395
|
-
children: "Skippr is connected"
|
|
2396
|
-
})
|
|
2397
|
-
]
|
|
2398
|
-
}),
|
|
2399
|
-
status === "talking" && /* @__PURE__ */ jsxs3(Fragment, {
|
|
2400
|
-
children: [
|
|
2401
|
-
/* @__PURE__ */ jsx3(SpeakingBars, {}),
|
|
2402
|
-
/* @__PURE__ */ jsx3("span", {
|
|
2403
|
-
children: "Skippr is talking"
|
|
2404
|
-
})
|
|
2405
|
-
]
|
|
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
|
+
})
|
|
2406
2181
|
}),
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
|
|
2410
|
-
/* @__PURE__ */ jsx3("span", {
|
|
2411
|
-
children: "Skippr is thinking"
|
|
2412
|
-
})
|
|
2413
|
-
]
|
|
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
|
|
2414
2185
|
}),
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
/* @__PURE__ */ jsx3(PausedDot, {}),
|
|
2418
|
-
/* @__PURE__ */ jsx3("span", {
|
|
2419
|
-
children: "Session paused"
|
|
2420
|
-
})
|
|
2421
|
-
]
|
|
2186
|
+
/* @__PURE__ */ jsx2(ArrowRight, {
|
|
2187
|
+
className: "skippr:h-3.5 skippr:w-3.5 skippr:shrink-0 skippr:text-amber-700"
|
|
2422
2188
|
})
|
|
2423
2189
|
]
|
|
2424
|
-
}
|
|
2190
|
+
})
|
|
2425
2191
|
});
|
|
2426
2192
|
}
|
|
2427
|
-
|
|
2428
|
-
|
|
2429
|
-
|
|
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"),
|
|
2430
2207
|
children: [
|
|
2431
|
-
/* @__PURE__ */ jsx3("span", {
|
|
2432
|
-
|
|
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
|
+
]
|
|
2433
2237
|
}),
|
|
2434
2238
|
/* @__PURE__ */ jsx3("span", {
|
|
2435
|
-
className: "skippr:
|
|
2239
|
+
className: "skippr:min-w-0 skippr:flex-1 skippr:truncate skippr:text-left",
|
|
2240
|
+
children: label ?? module.name
|
|
2241
|
+
}),
|
|
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
|
-
|
|
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"
|
|
2276
|
+
})
|
|
2277
|
+
})
|
|
2443
2278
|
});
|
|
2444
2279
|
}
|
|
2445
|
-
function
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
|
|
2449
|
-
|
|
2450
|
-
|
|
2451
|
-
|
|
2452
|
-
|
|
2453
|
-
|
|
2454
|
-
|
|
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",
|
|
2455
2294
|
children: [
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
/* @__PURE__ */ jsx3("circle", {
|
|
2460
|
-
cx: "12",
|
|
2461
|
-
cy: "12",
|
|
2462
|
-
r: "3",
|
|
2463
|
-
fill: "currentColor",
|
|
2464
|
-
stroke: "none",
|
|
2465
|
-
className: "skippr:origin-center skippr:animate-[skippr-banner-look_2.4s_ease-in-out_infinite]"
|
|
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]")
|
|
2466
2298
|
})
|
|
2467
2299
|
]
|
|
2468
2300
|
});
|
|
2469
2301
|
}
|
|
2470
|
-
function
|
|
2471
|
-
|
|
2472
|
-
|
|
2302
|
+
function MinimizedBubble({
|
|
2303
|
+
welcomeMessage,
|
|
2304
|
+
welcomeDismissed,
|
|
2305
|
+
onDismissWelcome
|
|
2306
|
+
}) {
|
|
2307
|
+
const ctx = useContext2(LiveAgentContext);
|
|
2308
|
+
if (!ctx) {
|
|
2309
|
+
throw new Error("MinimizedBubble must be used within a <LiveAgent> provider");
|
|
2310
|
+
}
|
|
2311
|
+
const {
|
|
2312
|
+
isStarting,
|
|
2313
|
+
position,
|
|
2314
|
+
adoptionGoals,
|
|
2315
|
+
startAdoptionSession,
|
|
2316
|
+
hasModuleSelector,
|
|
2317
|
+
isAuthenticated,
|
|
2318
|
+
availableModules,
|
|
2319
|
+
hasResolvedModules,
|
|
2320
|
+
selectModule,
|
|
2321
|
+
expandPanel
|
|
2322
|
+
} = ctx;
|
|
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"),
|
|
2473
2393
|
children: [
|
|
2474
|
-
/* @__PURE__ */
|
|
2475
|
-
className: "skippr:
|
|
2476
|
-
|
|
2477
|
-
|
|
2478
|
-
|
|
2479
|
-
|
|
2480
|
-
|
|
2481
|
-
|
|
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"),
|
|
2396
|
+
children: [
|
|
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))
|
|
2408
|
+
]
|
|
2482
2409
|
}),
|
|
2483
|
-
/* @__PURE__ */
|
|
2484
|
-
|
|
2410
|
+
welcomeMessage && !welcomeDismissed && adoptionGoals.length === 0 && modulePills.length === 0 && /* @__PURE__ */ jsx4(WelcomeBubble, {
|
|
2411
|
+
message: welcomeMessage,
|
|
2412
|
+
position,
|
|
2413
|
+
onDismiss: onDismissWelcome
|
|
2485
2414
|
}),
|
|
2486
|
-
/* @__PURE__ */
|
|
2487
|
-
|
|
2488
|
-
|
|
2489
|
-
]
|
|
2490
|
-
});
|
|
2491
|
-
}
|
|
2492
|
-
function ThinkingDots() {
|
|
2493
|
-
return /* @__PURE__ */ jsxs3("span", {
|
|
2494
|
-
className: "skippr:flex skippr:items-center skippr:gap-[3px]",
|
|
2495
|
-
children: [
|
|
2496
|
-
/* @__PURE__ */ jsx3("span", {
|
|
2497
|
-
className: "skippr:size-1 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
2498
|
-
}),
|
|
2499
|
-
/* @__PURE__ */ jsx3("span", {
|
|
2500
|
-
className: "skippr:size-1 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
2501
|
-
}),
|
|
2502
|
-
/* @__PURE__ */ jsx3("span", {
|
|
2503
|
-
className: "skippr:size-1 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
2504
|
-
})
|
|
2505
|
-
]
|
|
2506
|
-
});
|
|
2507
|
-
}
|
|
2508
|
-
|
|
2509
|
-
// src/components/Logo.tsx
|
|
2510
|
-
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
2511
|
-
function Logo({ className }) {
|
|
2512
|
-
return /* @__PURE__ */ jsxs4("svg", {
|
|
2513
|
-
width: "1em",
|
|
2514
|
-
height: "1em",
|
|
2515
|
-
viewBox: "0 0 200 200",
|
|
2516
|
-
fill: "none",
|
|
2517
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2518
|
-
role: "img",
|
|
2519
|
-
"aria-label": "Skippr",
|
|
2520
|
-
className,
|
|
2521
|
-
children: [
|
|
2522
|
-
/* @__PURE__ */ jsx4("rect", {
|
|
2523
|
-
width: "200",
|
|
2524
|
-
height: "200",
|
|
2525
|
-
rx: "40",
|
|
2526
|
-
fill: "#2D2D3F"
|
|
2527
|
-
}),
|
|
2528
|
-
/* @__PURE__ */ jsxs4("g", {
|
|
2529
|
-
transform: "translate(100 100) scale(0.8) translate(-100 -100)",
|
|
2530
|
-
children: [
|
|
2531
|
-
/* @__PURE__ */ jsx4("path", {
|
|
2532
|
-
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",
|
|
2533
|
-
fill: "white"
|
|
2534
|
-
}),
|
|
2535
|
-
/* @__PURE__ */ jsx4("path", {
|
|
2536
|
-
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",
|
|
2537
|
-
fill: "#2BC0AE"
|
|
2538
|
-
})
|
|
2539
|
-
]
|
|
2540
|
-
})
|
|
2541
|
-
]
|
|
2542
|
-
});
|
|
2543
|
-
}
|
|
2544
|
-
|
|
2545
|
-
// src/components/MinimizedBubble.tsx
|
|
2546
|
-
import { jsx as jsx5, jsxs as jsxs5, Fragment as Fragment2 } from "react/jsx-runtime";
|
|
2547
|
-
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";
|
|
2548
|
-
var CONTROL_SHADOW = "skippr:shadow-[0_4px_16px_rgba(0,0,0,0.15),0_2px_4px_rgba(0,0,0,0.1)]";
|
|
2549
|
-
function ConnectedLauncher() {
|
|
2550
|
-
const {
|
|
2551
|
-
expandPanel,
|
|
2552
|
-
disconnect,
|
|
2553
|
-
pauseSession,
|
|
2554
|
-
resumeSession,
|
|
2555
|
-
isPaused,
|
|
2556
|
-
isPausing,
|
|
2557
|
-
captureMode,
|
|
2558
|
-
setSidebarTab
|
|
2559
|
-
} = useLiveAgent();
|
|
2560
|
-
const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
|
|
2561
|
-
const showScreenShareToggle = captureMode === "screenshare";
|
|
2562
|
-
const showPaused = isPaused || isPausing;
|
|
2563
|
-
const openChat = () => {
|
|
2564
|
-
setSidebarTab("chat");
|
|
2565
|
-
expandPanel();
|
|
2566
|
-
};
|
|
2567
|
-
return /* @__PURE__ */ jsxs5(Fragment2, {
|
|
2568
|
-
children: [
|
|
2569
|
-
!showPaused && /* @__PURE__ */ jsxs5(Fragment2, {
|
|
2570
|
-
children: [
|
|
2571
|
-
/* @__PURE__ */ jsx5("button", {
|
|
2572
|
-
type: "button",
|
|
2573
|
-
onClick: toggleMute,
|
|
2574
|
-
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
2575
|
-
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"),
|
|
2576
|
-
children: isMuted ? /* @__PURE__ */ jsx5(MicOff, {
|
|
2577
|
-
className: "skippr:size-5"
|
|
2578
|
-
}) : /* @__PURE__ */ jsx5(Mic, {
|
|
2579
|
-
className: "skippr:size-5"
|
|
2580
|
-
})
|
|
2581
|
-
}),
|
|
2582
|
-
showScreenShareToggle && /* @__PURE__ */ jsx5("button", {
|
|
2583
|
-
type: "button",
|
|
2584
|
-
onClick: toggleScreenShare,
|
|
2585
|
-
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
2586
|
-
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"),
|
|
2587
|
-
children: isScreenSharing ? /* @__PURE__ */ jsx5(MonitorOff, {
|
|
2588
|
-
className: "skippr:size-5"
|
|
2589
|
-
}) : /* @__PURE__ */ jsx5(Monitor, {
|
|
2590
|
-
className: "skippr:size-5"
|
|
2591
|
-
})
|
|
2592
|
-
})
|
|
2593
|
-
]
|
|
2594
|
-
}),
|
|
2595
|
-
/* @__PURE__ */ jsx5("button", {
|
|
2596
|
-
type: "button",
|
|
2597
|
-
onClick: () => isPaused ? resumeSession() : pauseSession(),
|
|
2598
|
-
disabled: isPausing,
|
|
2599
|
-
"aria-label": showPaused ? "Resume session" : "Pause session",
|
|
2600
|
-
className: cn(CONTROL_BUTTON, CONTROL_SHADOW, "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted skippr:disabled:opacity-60"),
|
|
2601
|
-
children: showPaused ? /* @__PURE__ */ jsx5(Play, {
|
|
2602
|
-
className: "skippr:size-5"
|
|
2603
|
-
}) : /* @__PURE__ */ jsx5(Pause, {
|
|
2604
|
-
className: "skippr:size-5"
|
|
2605
|
-
})
|
|
2606
|
-
}),
|
|
2607
|
-
/* @__PURE__ */ jsx5("button", {
|
|
2608
|
-
type: "button",
|
|
2609
|
-
onClick: () => disconnect(),
|
|
2610
|
-
"aria-label": "End session",
|
|
2611
|
-
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)]"),
|
|
2612
|
-
children: /* @__PURE__ */ jsx5(PhoneOff, {
|
|
2613
|
-
className: "skippr:size-5"
|
|
2614
|
-
})
|
|
2615
|
-
}),
|
|
2616
|
-
!showPaused && /* @__PURE__ */ jsx5("button", {
|
|
2617
|
-
type: "button",
|
|
2618
|
-
onClick: openChat,
|
|
2619
|
-
"aria-label": "Open chat",
|
|
2620
|
-
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)]"),
|
|
2621
|
-
children: /* @__PURE__ */ jsx5(MessageSquare, {
|
|
2622
|
-
className: "skippr:size-5"
|
|
2623
|
-
})
|
|
2624
|
-
})
|
|
2625
|
-
]
|
|
2626
|
-
});
|
|
2627
|
-
}
|
|
2628
|
-
function IdleLauncher() {
|
|
2629
|
-
const { expandPanel } = useLiveAgent();
|
|
2630
|
-
return /* @__PURE__ */ jsx5("button", {
|
|
2631
|
-
type: "button",
|
|
2632
|
-
onClick: expandPanel,
|
|
2633
|
-
"aria-label": "Skippr assistant",
|
|
2634
|
-
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"),
|
|
2635
|
-
children: /* @__PURE__ */ jsx5(Logo, {
|
|
2636
|
-
className: "skippr:size-12"
|
|
2637
|
-
})
|
|
2638
|
-
});
|
|
2639
|
-
}
|
|
2640
|
-
function WelcomeBubble({
|
|
2641
|
-
message,
|
|
2642
|
-
position,
|
|
2643
|
-
onDismiss
|
|
2644
|
-
}) {
|
|
2645
|
-
useEffect8(() => {
|
|
2646
|
-
const timer = setTimeout(onDismiss, 5000);
|
|
2647
|
-
return () => clearTimeout(timer);
|
|
2648
|
-
}, [onDismiss]);
|
|
2649
|
-
return /* @__PURE__ */ jsxs5("button", {
|
|
2650
|
-
type: "button",
|
|
2651
|
-
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"),
|
|
2652
|
-
onClick: onDismiss,
|
|
2653
|
-
"aria-label": "Dismiss",
|
|
2654
|
-
children: [
|
|
2655
|
-
message,
|
|
2656
|
-
/* @__PURE__ */ jsx5("span", {
|
|
2657
|
-
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]")
|
|
2658
|
-
})
|
|
2659
|
-
]
|
|
2660
|
-
});
|
|
2661
|
-
}
|
|
2662
|
-
function MinimizedBubble({
|
|
2663
|
-
welcomeMessage,
|
|
2664
|
-
welcomeDismissed,
|
|
2665
|
-
onDismissWelcome
|
|
2666
|
-
}) {
|
|
2667
|
-
const ctx = useContext3(LiveAgentContext);
|
|
2668
|
-
if (!ctx) {
|
|
2669
|
-
throw new Error("MinimizedBubble must be used within a <LiveAgent> provider");
|
|
2670
|
-
}
|
|
2671
|
-
const {
|
|
2672
|
-
isConnected,
|
|
2673
|
-
isStarting,
|
|
2674
|
-
isPaused,
|
|
2675
|
-
isPausing,
|
|
2676
|
-
position,
|
|
2677
|
-
adoptionGoals,
|
|
2678
|
-
dismissAdoptionGoal,
|
|
2679
|
-
startAdoptionSession
|
|
2680
|
-
} = ctx;
|
|
2681
|
-
const inSession = isConnected || isPaused || isPausing;
|
|
2682
|
-
return /* @__PURE__ */ jsxs5(Fragment2, {
|
|
2683
|
-
children: [
|
|
2684
|
-
/* @__PURE__ */ jsx5(LauncherStatusPill, {}),
|
|
2685
|
-
/* @__PURE__ */ jsxs5("div", {
|
|
2686
|
-
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"),
|
|
2687
|
-
children: [
|
|
2688
|
-
!inSession && !isStarting && adoptionGoals.length > 0 && /* @__PURE__ */ jsx5("div", {
|
|
2689
|
-
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"),
|
|
2690
|
-
children: adoptionGoals.map((goal) => /* @__PURE__ */ jsx5(AdoptionBubble, {
|
|
2691
|
-
goal,
|
|
2692
|
-
onAttend: startAdoptionSession,
|
|
2693
|
-
onDismiss: dismissAdoptionGoal
|
|
2694
|
-
}, goal.goalId))
|
|
2695
|
-
}),
|
|
2696
|
-
welcomeMessage && !isConnected && !isStarting && !welcomeDismissed && adoptionGoals.length === 0 && /* @__PURE__ */ jsx5(WelcomeBubble, {
|
|
2697
|
-
message: welcomeMessage,
|
|
2698
|
-
position,
|
|
2699
|
-
onDismiss: onDismissWelcome
|
|
2700
|
-
}),
|
|
2701
|
-
inSession ? /* @__PURE__ */ jsx5(ConnectedLauncher, {}) : /* @__PURE__ */ jsx5(IdleLauncher, {})
|
|
2702
|
-
]
|
|
2415
|
+
/* @__PURE__ */ jsx4(IdleLauncher, {
|
|
2416
|
+
position,
|
|
2417
|
+
onClick: launchDefaultSession
|
|
2703
2418
|
})
|
|
2704
2419
|
]
|
|
2705
2420
|
});
|
|
@@ -2707,19 +2422,19 @@ function MinimizedBubble({
|
|
|
2707
2422
|
|
|
2708
2423
|
// src/components/PageActionHandler.tsx
|
|
2709
2424
|
import { useDataChannel as useDataChannel2 } from "@livekit/components-react/hooks";
|
|
2710
|
-
import { useCallback as
|
|
2425
|
+
import { useCallback as useCallback6, useEffect as useEffect10, useRef as useRef7, useState as useState8 } from "react";
|
|
2711
2426
|
|
|
2712
2427
|
// src/components/AgentActivityIndicator.tsx
|
|
2713
|
-
import { useEffect as useEffect9, useRef as
|
|
2714
|
-
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";
|
|
2715
2430
|
var Z_INDEX2 = 2147483646;
|
|
2716
2431
|
function centerOf(element) {
|
|
2717
2432
|
const rect = getRectInTopViewport(element);
|
|
2718
2433
|
return { left: rect.left + rect.width / 2, top: rect.top + rect.height / 2 };
|
|
2719
2434
|
}
|
|
2720
2435
|
function AgentActivityIndicator({ target }) {
|
|
2721
|
-
const [position, setPosition] =
|
|
2722
|
-
const frameRef =
|
|
2436
|
+
const [position, setPosition] = useState7(null);
|
|
2437
|
+
const frameRef = useRef6(null);
|
|
2723
2438
|
useEffect9(() => {
|
|
2724
2439
|
if (!target || !target.element.isConnected) {
|
|
2725
2440
|
setPosition(null);
|
|
@@ -2758,21 +2473,21 @@ function AgentActivityIndicator({ target }) {
|
|
|
2758
2473
|
zIndex: Z_INDEX2,
|
|
2759
2474
|
transition: "left 0.45s cubic-bezier(0.22, 1, 0.36, 1), top 0.45s cubic-bezier(0.22, 1, 0.36, 1)"
|
|
2760
2475
|
};
|
|
2761
|
-
return /* @__PURE__ */
|
|
2476
|
+
return /* @__PURE__ */ jsx5("div", {
|
|
2762
2477
|
"data-skippr-private": "true",
|
|
2763
2478
|
style: containerStyle,
|
|
2764
|
-
children: /* @__PURE__ */
|
|
2479
|
+
children: /* @__PURE__ */ jsxs5("div", {
|
|
2765
2480
|
className: "skippr:relative",
|
|
2766
2481
|
children: [
|
|
2767
|
-
/* @__PURE__ */
|
|
2482
|
+
/* @__PURE__ */ jsx5(MousePointer2, {
|
|
2768
2483
|
"aria-hidden": "true",
|
|
2769
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",
|
|
2770
2485
|
fill: "currentColor"
|
|
2771
2486
|
}),
|
|
2772
|
-
/* @__PURE__ */
|
|
2487
|
+
/* @__PURE__ */ jsx5("div", {
|
|
2773
2488
|
role: "status",
|
|
2774
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)]",
|
|
2775
|
-
children: /* @__PURE__ */
|
|
2490
|
+
children: /* @__PURE__ */ jsx5("span", {
|
|
2776
2491
|
className: "skippr:text-[11px] skippr:font-medium skippr:text-white skippr:whitespace-nowrap",
|
|
2777
2492
|
children: target.label
|
|
2778
2493
|
})
|
|
@@ -2783,7 +2498,7 @@ function AgentActivityIndicator({ target }) {
|
|
|
2783
2498
|
}
|
|
2784
2499
|
|
|
2785
2500
|
// src/components/PageActionHandler.tsx
|
|
2786
|
-
import { jsx as
|
|
2501
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
2787
2502
|
var INDICATOR_LINGER_MS = 1400;
|
|
2788
2503
|
var CURSOR_LEAD_BEFORE_ACTION_MS = 350;
|
|
2789
2504
|
var SETTLE_MS = 250;
|
|
@@ -2927,14 +2642,14 @@ function labelFor(action) {
|
|
|
2927
2642
|
}
|
|
2928
2643
|
}
|
|
2929
2644
|
function PageActionHandler() {
|
|
2930
|
-
const [activity, setActivity] =
|
|
2931
|
-
const mountedRef =
|
|
2932
|
-
const queueRef =
|
|
2933
|
-
const drainingRef =
|
|
2934
|
-
const timersRef =
|
|
2935
|
-
const wakesRef =
|
|
2936
|
-
const indicatorTimerRef =
|
|
2937
|
-
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) => {
|
|
2938
2653
|
return new Promise((resolve) => {
|
|
2939
2654
|
const wake = () => {
|
|
2940
2655
|
wakesRef.current.delete(wake);
|
|
@@ -2948,7 +2663,7 @@ function PageActionHandler() {
|
|
|
2948
2663
|
timersRef.current.add(timer);
|
|
2949
2664
|
});
|
|
2950
2665
|
}, []);
|
|
2951
|
-
const showActivity =
|
|
2666
|
+
const showActivity = useCallback6((target) => {
|
|
2952
2667
|
if (indicatorTimerRef.current) {
|
|
2953
2668
|
clearTimeout(indicatorTimerRef.current);
|
|
2954
2669
|
indicatorTimerRef.current = null;
|
|
@@ -2963,7 +2678,7 @@ function PageActionHandler() {
|
|
|
2963
2678
|
indicatorTimerRef.current = timer;
|
|
2964
2679
|
}
|
|
2965
2680
|
}, []);
|
|
2966
|
-
const processOne =
|
|
2681
|
+
const processOne = useCallback6(async (action) => {
|
|
2967
2682
|
if (action.type === "navigate") {
|
|
2968
2683
|
queueRef.current.length = 0;
|
|
2969
2684
|
if (!isSameOriginHttpUrl(action.url))
|
|
@@ -2989,7 +2704,7 @@ function PageActionHandler() {
|
|
|
2989
2704
|
runAgentAction(() => performAction(action, element));
|
|
2990
2705
|
await sleep(SETTLE_MS);
|
|
2991
2706
|
}, [showActivity, sleep]);
|
|
2992
|
-
const drain =
|
|
2707
|
+
const drain = useCallback6(async () => {
|
|
2993
2708
|
if (drainingRef.current)
|
|
2994
2709
|
return;
|
|
2995
2710
|
drainingRef.current = true;
|
|
@@ -3004,7 +2719,7 @@ function PageActionHandler() {
|
|
|
3004
2719
|
drainingRef.current = false;
|
|
3005
2720
|
}
|
|
3006
2721
|
}, [processOne]);
|
|
3007
|
-
const onMessage =
|
|
2722
|
+
const onMessage = useCallback6((msg) => {
|
|
3008
2723
|
const action = parsePageAction(msg.payload);
|
|
3009
2724
|
if (!action)
|
|
3010
2725
|
return;
|
|
@@ -3030,15 +2745,476 @@ function PageActionHandler() {
|
|
|
3030
2745
|
};
|
|
3031
2746
|
}, []);
|
|
3032
2747
|
useDataChannel2(PAGE_ACTIONS_TOPIC, onMessage);
|
|
3033
|
-
return /* @__PURE__ */
|
|
2748
|
+
return /* @__PURE__ */ jsx6(AgentActivityIndicator, {
|
|
3034
2749
|
target: activity
|
|
3035
2750
|
});
|
|
3036
2751
|
}
|
|
3037
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
|
+
|
|
3038
3214
|
// src/components/ShadowHost.tsx
|
|
3039
|
-
import { useLayoutEffect, useRef as
|
|
3215
|
+
import { useLayoutEffect, useRef as useRef9, useState as useState11 } from "react";
|
|
3040
3216
|
import { createPortal } from "react-dom";
|
|
3041
|
-
import { jsx as jsx8, Fragment
|
|
3217
|
+
import { jsx as jsx8, Fragment } from "react/jsx-runtime";
|
|
3042
3218
|
var PROPERTIES_STYLE_ID = "skippr-tw-properties";
|
|
3043
3219
|
var PROPERTY_RULE = /@property\s+[^{]+\{[^}]*\}/g;
|
|
3044
3220
|
function hoistTailwindProperties(css) {
|
|
@@ -3053,10 +3229,10 @@ function hoistTailwindProperties(css) {
|
|
|
3053
3229
|
return css.replace(PROPERTY_RULE, "");
|
|
3054
3230
|
}
|
|
3055
3231
|
function ShadowHost({ children }) {
|
|
3056
|
-
const hostRef =
|
|
3057
|
-
const [shadowRoot, setShadowRoot] =
|
|
3232
|
+
const hostRef = useRef9(null);
|
|
3233
|
+
const [shadowRoot, setShadowRoot] = useState11(null);
|
|
3058
3234
|
const css = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
|
3059
|
-
@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}}`;
|
|
3060
3236
|
useLayoutEffect(() => {
|
|
3061
3237
|
const host = hostRef.current;
|
|
3062
3238
|
if (!host || !css)
|
|
@@ -3071,7 +3247,7 @@ function ShadowHost({ children }) {
|
|
|
3071
3247
|
setShadowRoot(root);
|
|
3072
3248
|
}, [css]);
|
|
3073
3249
|
if (!css)
|
|
3074
|
-
return /* @__PURE__ */ jsx8(
|
|
3250
|
+
return /* @__PURE__ */ jsx8(Fragment, {
|
|
3075
3251
|
children
|
|
3076
3252
|
});
|
|
3077
3253
|
return /* @__PURE__ */ jsx8("div", {
|
|
@@ -3081,13 +3257,13 @@ function ShadowHost({ children }) {
|
|
|
3081
3257
|
}
|
|
3082
3258
|
|
|
3083
3259
|
// src/components/Sidebar.tsx
|
|
3084
|
-
import { useContext as
|
|
3260
|
+
import { useContext as useContext8, useEffect as useEffect19 } from "react";
|
|
3085
3261
|
|
|
3086
3262
|
// src/hooks/useCombinedMessages.ts
|
|
3087
|
-
import { useContext as
|
|
3263
|
+
import { useContext as useContext6, useMemo as useMemo5 } from "react";
|
|
3088
3264
|
|
|
3089
3265
|
// src/hooks/useChatMessages.ts
|
|
3090
|
-
import { useChat, useLocalParticipant as
|
|
3266
|
+
import { useChat, useLocalParticipant as useLocalParticipant5 } from "@livekit/components-react/hooks";
|
|
3091
3267
|
import { useMemo as useMemo3 } from "react";
|
|
3092
3268
|
|
|
3093
3269
|
// src/lib/filterSystemMessages.ts
|
|
@@ -3099,7 +3275,7 @@ function filterSystemMessages(messages) {
|
|
|
3099
3275
|
// src/hooks/useChatMessages.ts
|
|
3100
3276
|
function useChatMessages() {
|
|
3101
3277
|
const { chatMessages: rawMessages, send, isSending } = useChat();
|
|
3102
|
-
const { localParticipant } =
|
|
3278
|
+
const { localParticipant } = useLocalParticipant5();
|
|
3103
3279
|
const localIdentity = localParticipant.identity;
|
|
3104
3280
|
const chatMessages = useMemo3(() => {
|
|
3105
3281
|
const sortedMessages = rawMessages.map((msg) => ({
|
|
@@ -3115,11 +3291,11 @@ function useChatMessages() {
|
|
|
3115
3291
|
}
|
|
3116
3292
|
|
|
3117
3293
|
// src/hooks/useStreamingTranscript.ts
|
|
3118
|
-
import { useLocalParticipant as
|
|
3294
|
+
import { useLocalParticipant as useLocalParticipant6, useTranscriptions } from "@livekit/components-react/hooks";
|
|
3119
3295
|
import { useMemo as useMemo4 } from "react";
|
|
3120
3296
|
function useStreamingTranscript() {
|
|
3121
3297
|
const transcriptions = useTranscriptions();
|
|
3122
|
-
const { localParticipant } =
|
|
3298
|
+
const { localParticipant } = useLocalParticipant6();
|
|
3123
3299
|
const localIdentity = localParticipant.identity;
|
|
3124
3300
|
const transcriptMessages = useMemo4(() => filterSystemMessages(transcriptions.filter((stream) => stream.text.trim().length > 0).map((stream) => ({
|
|
3125
3301
|
id: stream.streamInfo.id,
|
|
@@ -3127,116 +3303,50 @@ function useStreamingTranscript() {
|
|
|
3127
3303
|
content: stream.text,
|
|
3128
3304
|
source: "voice-transcript",
|
|
3129
3305
|
timestamp: stream.streamInfo.timestamp
|
|
3130
|
-
}))), [transcriptions, localIdentity]);
|
|
3131
|
-
return { transcriptMessages };
|
|
3132
|
-
}
|
|
3133
|
-
|
|
3134
|
-
// src/hooks/useCombinedMessages.ts
|
|
3135
|
-
function mergeChatsIntoTranscripts(transcripts, chats) {
|
|
3136
|
-
const merged = [];
|
|
3137
|
-
let chatIndex = 0;
|
|
3138
|
-
for (const transcript of transcripts) {
|
|
3139
|
-
while (chatIndex < chats.length && (chats[chatIndex].timestamp ?? 0) <= (transcript.timestamp ?? 0)) {
|
|
3140
|
-
merged.push(chats[chatIndex]);
|
|
3141
|
-
chatIndex++;
|
|
3142
|
-
}
|
|
3143
|
-
merged.push(transcript);
|
|
3144
|
-
}
|
|
3145
|
-
while (chatIndex < chats.length) {
|
|
3146
|
-
merged.push(chats[chatIndex]);
|
|
3147
|
-
chatIndex++;
|
|
3148
|
-
}
|
|
3149
|
-
return merged;
|
|
3150
|
-
}
|
|
3151
|
-
function useCombinedMessages() {
|
|
3152
|
-
const { transcriptMessages } = useStreamingTranscript();
|
|
3153
|
-
const { chatMessages, sendChatMessage, isSendingChat } = useChatMessages();
|
|
3154
|
-
const { state: agentState } = useAgentVoiceState();
|
|
3155
|
-
const historyMessages = useContext4(LiveAgentContext)?.historyMessages ?? [];
|
|
3156
|
-
const liveMessages = useMemo5(() => {
|
|
3157
|
-
if (chatMessages.length === 0)
|
|
3158
|
-
return transcriptMessages;
|
|
3159
|
-
if (transcriptMessages.length === 0)
|
|
3160
|
-
return chatMessages;
|
|
3161
|
-
return mergeChatsIntoTranscripts(transcriptMessages, chatMessages);
|
|
3162
|
-
}, [transcriptMessages, chatMessages]);
|
|
3163
|
-
const allMessages = useMemo5(() => {
|
|
3164
|
-
if (historyMessages.length === 0)
|
|
3165
|
-
return liveMessages;
|
|
3166
|
-
const seenIds = new Set(liveMessages.map((message) => message.id));
|
|
3167
|
-
return [...historyMessages.filter((message) => !seenIds.has(message.id)), ...liveMessages];
|
|
3168
|
-
}, [historyMessages, liveMessages]);
|
|
3169
|
-
return { allMessages, agentState, sendChatMessage, isSendingChat };
|
|
3170
|
-
}
|
|
3171
|
-
|
|
3172
|
-
// src/hooks/usePhaseUpdates.ts
|
|
3173
|
-
import { useCallback as useCallback8, useContext as useContext5, useEffect as useEffect12 } from "react";
|
|
3174
|
-
|
|
3175
|
-
// src/hooks/useAgentState.ts
|
|
3176
|
-
import { useRemoteParticipants } from "@livekit/components-react/hooks";
|
|
3177
|
-
import { useEffect as useEffect11, useState as useState9 } from "react";
|
|
3178
|
-
function useAgentState(attributeKey, parse, initial) {
|
|
3179
|
-
const [value, setValue] = useState9(initial);
|
|
3180
|
-
const remoteParticipants = useRemoteParticipants();
|
|
3181
|
-
useEffect11(() => {
|
|
3182
|
-
const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
|
|
3183
|
-
if (agentParticipant) {
|
|
3184
|
-
const attr = agentParticipant.attributes?.[attributeKey];
|
|
3185
|
-
if (attr) {
|
|
3186
|
-
const parsed = parse(attr);
|
|
3187
|
-
if (parsed)
|
|
3188
|
-
setValue(parsed);
|
|
3189
|
-
}
|
|
3190
|
-
}
|
|
3191
|
-
const handlers = new Map;
|
|
3192
|
-
for (const p of remoteParticipants) {
|
|
3193
|
-
const handler = (changedAttributes) => {
|
|
3194
|
-
if (changedAttributes[attributeKey]) {
|
|
3195
|
-
const parsed = parse(changedAttributes[attributeKey]);
|
|
3196
|
-
if (parsed)
|
|
3197
|
-
setValue(parsed);
|
|
3198
|
-
} else if (p.attributes?.[attributeKey]) {
|
|
3199
|
-
const parsed = parse(p.attributes[attributeKey]);
|
|
3200
|
-
if (parsed)
|
|
3201
|
-
setValue(parsed);
|
|
3202
|
-
}
|
|
3203
|
-
};
|
|
3204
|
-
handlers.set(p, handler);
|
|
3205
|
-
p.on("attributesChanged", handler);
|
|
3206
|
-
}
|
|
3207
|
-
return () => {
|
|
3208
|
-
for (const [p, handler] of handlers) {
|
|
3209
|
-
p.off("attributesChanged", handler);
|
|
3210
|
-
}
|
|
3211
|
-
};
|
|
3212
|
-
}, [remoteParticipants, attributeKey, parse]);
|
|
3213
|
-
return value;
|
|
3306
|
+
}))), [transcriptions, localIdentity]);
|
|
3307
|
+
return { transcriptMessages };
|
|
3214
3308
|
}
|
|
3215
3309
|
|
|
3216
|
-
// src/hooks/
|
|
3217
|
-
function
|
|
3218
|
-
|
|
3219
|
-
|
|
3220
|
-
|
|
3221
|
-
|
|
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++;
|
|
3222
3318
|
}
|
|
3223
|
-
|
|
3224
|
-
|
|
3319
|
+
merged.push(transcript);
|
|
3320
|
+
}
|
|
3321
|
+
while (chatIndex < chats.length) {
|
|
3322
|
+
merged.push(chats[chatIndex]);
|
|
3323
|
+
chatIndex++;
|
|
3324
|
+
}
|
|
3325
|
+
return merged;
|
|
3225
3326
|
}
|
|
3226
|
-
function
|
|
3227
|
-
const
|
|
3228
|
-
const
|
|
3229
|
-
const
|
|
3230
|
-
|
|
3231
|
-
|
|
3232
|
-
|
|
3233
|
-
|
|
3234
|
-
|
|
3235
|
-
|
|
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 };
|
|
3236
3346
|
}
|
|
3237
3347
|
|
|
3238
3348
|
// src/hooks/useSessionRemaining.ts
|
|
3239
|
-
import { useEffect as
|
|
3349
|
+
import { useEffect as useEffect14, useRef as useRef10, useState as useState12 } from "react";
|
|
3240
3350
|
|
|
3241
3351
|
// src/lib/format.ts
|
|
3242
3352
|
function formatTime(seconds) {
|
|
@@ -3252,9 +3362,9 @@ function parseNumber(s) {
|
|
|
3252
3362
|
// src/hooks/useSessionRemaining.ts
|
|
3253
3363
|
function useSessionRemaining() {
|
|
3254
3364
|
const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
|
|
3255
|
-
const endTimeRef =
|
|
3256
|
-
const [remaining, setRemaining] =
|
|
3257
|
-
|
|
3365
|
+
const endTimeRef = useRef10(null);
|
|
3366
|
+
const [remaining, setRemaining] = useState12(null);
|
|
3367
|
+
useEffect14(() => {
|
|
3258
3368
|
if (maxCallDuration === null || endTimeRef.current !== null)
|
|
3259
3369
|
return;
|
|
3260
3370
|
const endTime = Date.now() + maxCallDuration * 1000;
|
|
@@ -3270,11 +3380,44 @@ function useSessionRemaining() {
|
|
|
3270
3380
|
return remaining;
|
|
3271
3381
|
}
|
|
3272
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
|
+
|
|
3273
3416
|
// src/hooks/useElapsedSeconds.ts
|
|
3274
|
-
import { useEffect as
|
|
3417
|
+
import { useEffect as useEffect15, useState as useState13 } from "react";
|
|
3275
3418
|
function useElapsedSeconds(isRunning) {
|
|
3276
|
-
const [elapsed, setElapsed] =
|
|
3277
|
-
|
|
3419
|
+
const [elapsed, setElapsed] = useState13(0);
|
|
3420
|
+
useEffect15(() => {
|
|
3278
3421
|
if (!isRunning) {
|
|
3279
3422
|
setElapsed(0);
|
|
3280
3423
|
return;
|
|
@@ -3372,7 +3515,7 @@ function LoadingDots({ label }) {
|
|
|
3372
3515
|
}
|
|
3373
3516
|
|
|
3374
3517
|
// src/components/LoginFlow.tsx
|
|
3375
|
-
import { useCallback as
|
|
3518
|
+
import { useCallback as useCallback10, useEffect as useEffect16, useRef as useRef12, useState as useState14 } from "react";
|
|
3376
3519
|
|
|
3377
3520
|
// src/components/ui/button.tsx
|
|
3378
3521
|
import { forwardRef as forwardRef3 } from "react";
|
|
@@ -3408,20 +3551,20 @@ import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
|
3408
3551
|
var OTP_LENGTH = 6;
|
|
3409
3552
|
var DIGIT_KEYS = ["d0", "d1", "d2", "d3", "d4", "d5"];
|
|
3410
3553
|
function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
3411
|
-
const [step, setStep] =
|
|
3412
|
-
const [email, setEmail] =
|
|
3413
|
-
const handleRequestOtp =
|
|
3554
|
+
const [step, setStep] = useState14("email");
|
|
3555
|
+
const [email, setEmail] = useState14("");
|
|
3556
|
+
const handleRequestOtp = useCallback10(async (emailValue) => {
|
|
3414
3557
|
const success = await requestOtp(emailValue);
|
|
3415
3558
|
if (success)
|
|
3416
3559
|
setStep("otp");
|
|
3417
3560
|
}, [requestOtp]);
|
|
3418
|
-
const handleVerifyOtp =
|
|
3561
|
+
const handleVerifyOtp = useCallback10(async (code) => {
|
|
3419
3562
|
await verifyOtp(email, code);
|
|
3420
3563
|
}, [verifyOtp, email]);
|
|
3421
|
-
const handleBack =
|
|
3564
|
+
const handleBack = useCallback10(() => {
|
|
3422
3565
|
setStep("email");
|
|
3423
3566
|
}, []);
|
|
3424
|
-
const handleResend =
|
|
3567
|
+
const handleResend = useCallback10(async () => {
|
|
3425
3568
|
await requestOtp(email);
|
|
3426
3569
|
}, [requestOtp, email]);
|
|
3427
3570
|
if (step === "otp") {
|
|
@@ -3498,30 +3641,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
3498
3641
|
});
|
|
3499
3642
|
}
|
|
3500
3643
|
function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
3501
|
-
const [digits, setDigits] =
|
|
3502
|
-
const [resendCooldown, setResendCooldown] =
|
|
3503
|
-
const inputRefs =
|
|
3504
|
-
const submittedRef =
|
|
3505
|
-
|
|
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(() => {
|
|
3506
3649
|
inputRefs.current[0]?.focus();
|
|
3507
3650
|
}, []);
|
|
3508
|
-
|
|
3651
|
+
useEffect16(() => {
|
|
3509
3652
|
if (error)
|
|
3510
3653
|
submittedRef.current = false;
|
|
3511
3654
|
}, [error]);
|
|
3512
|
-
|
|
3655
|
+
useEffect16(() => {
|
|
3513
3656
|
if (resendCooldown <= 0)
|
|
3514
3657
|
return;
|
|
3515
3658
|
const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
|
|
3516
3659
|
return () => clearTimeout(timer);
|
|
3517
3660
|
}, [resendCooldown]);
|
|
3518
|
-
const submitCode =
|
|
3661
|
+
const submitCode = useCallback10((code) => {
|
|
3519
3662
|
if (submittedRef.current || isSubmitting)
|
|
3520
3663
|
return;
|
|
3521
3664
|
submittedRef.current = true;
|
|
3522
3665
|
onSubmit(code);
|
|
3523
3666
|
}, [onSubmit, isSubmitting]);
|
|
3524
|
-
const handleDigitChange =
|
|
3667
|
+
const handleDigitChange = useCallback10((index2, value) => {
|
|
3525
3668
|
const digit = value.replace(/\D/g, "").slice(-1);
|
|
3526
3669
|
const newDigits = [...digits];
|
|
3527
3670
|
newDigits[index2] = digit;
|
|
@@ -3535,12 +3678,12 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3535
3678
|
submitCode(code);
|
|
3536
3679
|
}
|
|
3537
3680
|
}, [digits, submitCode]);
|
|
3538
|
-
const handleKeyDown =
|
|
3681
|
+
const handleKeyDown = useCallback10((index2, e) => {
|
|
3539
3682
|
if (e.key === "Backspace" && !digits[index2] && index2 > 0) {
|
|
3540
3683
|
inputRefs.current[index2 - 1]?.focus();
|
|
3541
3684
|
}
|
|
3542
3685
|
}, [digits]);
|
|
3543
|
-
const handlePaste =
|
|
3686
|
+
const handlePaste = useCallback10((e) => {
|
|
3544
3687
|
e.preventDefault();
|
|
3545
3688
|
const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, OTP_LENGTH);
|
|
3546
3689
|
if (pasted.length > 0) {
|
|
@@ -3649,101 +3792,18 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3649
3792
|
});
|
|
3650
3793
|
}
|
|
3651
3794
|
|
|
3652
|
-
// src/components/MeetingControls.tsx
|
|
3653
|
-
import { jsx as jsx13, jsxs as jsxs10, Fragment as Fragment4 } from "react/jsx-runtime";
|
|
3654
|
-
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";
|
|
3655
|
-
var MUTED_BUTTON = "skippr:bg-muted skippr:text-foreground skippr:hover:bg-muted/80";
|
|
3656
|
-
function MeetingControls({
|
|
3657
|
-
onHangUp,
|
|
3658
|
-
onPause,
|
|
3659
|
-
onResume,
|
|
3660
|
-
isPaused = false,
|
|
3661
|
-
isPausing = false,
|
|
3662
|
-
showScreenShareToggle = true
|
|
3663
|
-
}) {
|
|
3664
|
-
const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
|
|
3665
|
-
const showPaused = isPaused || isPausing;
|
|
3666
|
-
return /* @__PURE__ */ jsxs10("div", {
|
|
3667
|
-
className: "skippr:shrink-0 skippr:border-t skippr:border-border skippr:bg-background skippr:px-4 skippr:py-4",
|
|
3668
|
-
children: [
|
|
3669
|
-
/* @__PURE__ */ jsxs10("div", {
|
|
3670
|
-
className: "skippr:flex skippr:items-center skippr:justify-center skippr:gap-3",
|
|
3671
|
-
children: [
|
|
3672
|
-
!showPaused && /* @__PURE__ */ jsxs10(Fragment4, {
|
|
3673
|
-
children: [
|
|
3674
|
-
/* @__PURE__ */ jsx13("button", {
|
|
3675
|
-
type: "button",
|
|
3676
|
-
onClick: toggleMute,
|
|
3677
|
-
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
3678
|
-
className: cn(CONTROL_BUTTON2, isMuted ? "skippr:bg-destructive/15 skippr:text-destructive skippr:hover:bg-destructive/25" : MUTED_BUTTON),
|
|
3679
|
-
children: isMuted ? /* @__PURE__ */ jsx13(MicOff, {
|
|
3680
|
-
className: "skippr:size-5"
|
|
3681
|
-
}) : /* @__PURE__ */ jsx13(Mic, {
|
|
3682
|
-
className: "skippr:size-5"
|
|
3683
|
-
})
|
|
3684
|
-
}),
|
|
3685
|
-
showScreenShareToggle && /* @__PURE__ */ jsx13("button", {
|
|
3686
|
-
type: "button",
|
|
3687
|
-
onClick: toggleScreenShare,
|
|
3688
|
-
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
3689
|
-
className: cn(CONTROL_BUTTON2, isScreenSharing ? "skippr:bg-bubble skippr:text-white skippr:hover:brightness-110" : MUTED_BUTTON),
|
|
3690
|
-
children: isScreenSharing ? /* @__PURE__ */ jsx13(MonitorOff, {
|
|
3691
|
-
className: "skippr:size-5"
|
|
3692
|
-
}) : /* @__PURE__ */ jsx13(Monitor, {
|
|
3693
|
-
className: "skippr:size-5"
|
|
3694
|
-
})
|
|
3695
|
-
})
|
|
3696
|
-
]
|
|
3697
|
-
}),
|
|
3698
|
-
showPaused ? onResume && /* @__PURE__ */ jsx13("button", {
|
|
3699
|
-
type: "button",
|
|
3700
|
-
onClick: onResume,
|
|
3701
|
-
disabled: isPausing,
|
|
3702
|
-
"aria-label": "Resume session",
|
|
3703
|
-
className: cn(CONTROL_BUTTON2, MUTED_BUTTON),
|
|
3704
|
-
children: /* @__PURE__ */ jsx13(Play, {
|
|
3705
|
-
className: "skippr:size-5"
|
|
3706
|
-
})
|
|
3707
|
-
}) : onPause && /* @__PURE__ */ jsx13("button", {
|
|
3708
|
-
type: "button",
|
|
3709
|
-
onClick: onPause,
|
|
3710
|
-
"aria-label": "Pause session",
|
|
3711
|
-
className: cn(CONTROL_BUTTON2, MUTED_BUTTON),
|
|
3712
|
-
children: /* @__PURE__ */ jsx13(Pause, {
|
|
3713
|
-
className: "skippr:size-5"
|
|
3714
|
-
})
|
|
3715
|
-
}),
|
|
3716
|
-
/* @__PURE__ */ jsx13("button", {
|
|
3717
|
-
type: "button",
|
|
3718
|
-
onClick: onHangUp,
|
|
3719
|
-
"aria-label": "End session",
|
|
3720
|
-
className: cn(CONTROL_BUTTON2, "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90"),
|
|
3721
|
-
children: /* @__PURE__ */ jsx13(PhoneOff, {
|
|
3722
|
-
className: "skippr:size-5"
|
|
3723
|
-
})
|
|
3724
|
-
})
|
|
3725
|
-
]
|
|
3726
|
-
}),
|
|
3727
|
-
/* @__PURE__ */ jsx13("p", {
|
|
3728
|
-
className: "skippr:mt-3 skippr:text-center skippr:text-[10px] skippr:text-muted-foreground",
|
|
3729
|
-
children: "Powered by Skippr"
|
|
3730
|
-
})
|
|
3731
|
-
]
|
|
3732
|
-
});
|
|
3733
|
-
}
|
|
3734
|
-
|
|
3735
3795
|
// src/components/MessageList.tsx
|
|
3736
|
-
import { useEffect as
|
|
3796
|
+
import { useEffect as useEffect18, useRef as useRef14 } from "react";
|
|
3737
3797
|
|
|
3738
3798
|
// src/components/ChatInput.tsx
|
|
3739
|
-
import { useEffect as
|
|
3740
|
-
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";
|
|
3741
3801
|
var MAX_INPUT_HEIGHT = 60;
|
|
3742
3802
|
function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
3743
|
-
const [inputText, setInputText] =
|
|
3744
|
-
const textareaRef =
|
|
3803
|
+
const [inputText, setInputText] = useState15("");
|
|
3804
|
+
const textareaRef = useRef13(null);
|
|
3745
3805
|
const canSend = inputText.trim().length > 0 && !isSendingChat;
|
|
3746
|
-
|
|
3806
|
+
useEffect17(() => {
|
|
3747
3807
|
if (autoFocus)
|
|
3748
3808
|
textareaRef.current?.focus();
|
|
3749
3809
|
}, [autoFocus]);
|
|
@@ -3774,13 +3834,13 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3774
3834
|
handleSubmit(e);
|
|
3775
3835
|
}
|
|
3776
3836
|
}
|
|
3777
|
-
return /* @__PURE__ */
|
|
3837
|
+
return /* @__PURE__ */ jsx13("form", {
|
|
3778
3838
|
onSubmit: handleSubmit,
|
|
3779
3839
|
className: "skippr:border-t skippr:border-border skippr:p-3",
|
|
3780
|
-
children: /* @__PURE__ */
|
|
3840
|
+
children: /* @__PURE__ */ jsxs10("div", {
|
|
3781
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",
|
|
3782
3842
|
children: [
|
|
3783
|
-
/* @__PURE__ */
|
|
3843
|
+
/* @__PURE__ */ jsx13("textarea", {
|
|
3784
3844
|
ref: textareaRef,
|
|
3785
3845
|
rows: 1,
|
|
3786
3846
|
value: inputText,
|
|
@@ -3790,12 +3850,12 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3790
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",
|
|
3791
3851
|
style: { maxHeight: `${MAX_INPUT_HEIGHT}px` }
|
|
3792
3852
|
}),
|
|
3793
|
-
/* @__PURE__ */
|
|
3853
|
+
/* @__PURE__ */ jsx13("button", {
|
|
3794
3854
|
type: "submit",
|
|
3795
3855
|
disabled: !canSend,
|
|
3796
3856
|
"aria-label": "Send message",
|
|
3797
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"),
|
|
3798
|
-
children: /* @__PURE__ */
|
|
3858
|
+
children: /* @__PURE__ */ jsx13(Send, {
|
|
3799
3859
|
className: "skippr:size-3.5"
|
|
3800
3860
|
})
|
|
3801
3861
|
})
|
|
@@ -3805,7 +3865,7 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3805
3865
|
}
|
|
3806
3866
|
|
|
3807
3867
|
// src/components/ChatMessage.tsx
|
|
3808
|
-
import { jsx as
|
|
3868
|
+
import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
3809
3869
|
function formatTimestamp(ts) {
|
|
3810
3870
|
return new Date(ts).toLocaleTimeString("en-US", {
|
|
3811
3871
|
hour: "numeric",
|
|
@@ -3815,23 +3875,23 @@ function formatTimestamp(ts) {
|
|
|
3815
3875
|
}
|
|
3816
3876
|
function ChatMessage({ message }) {
|
|
3817
3877
|
const isAgent = message.role === "assistant";
|
|
3818
|
-
return /* @__PURE__ */
|
|
3878
|
+
return /* @__PURE__ */ jsxs11("div", {
|
|
3819
3879
|
className: cn("skippr:flex skippr:gap-2", isAgent ? "skippr:items-start" : "skippr:justify-end"),
|
|
3820
3880
|
children: [
|
|
3821
|
-
isAgent && /* @__PURE__ */
|
|
3881
|
+
isAgent && /* @__PURE__ */ jsx14("div", {
|
|
3822
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",
|
|
3823
|
-
children: /* @__PURE__ */
|
|
3883
|
+
children: /* @__PURE__ */ jsx14(Sparkles, {
|
|
3824
3884
|
className: "skippr:size-3.5 skippr:text-primary-foreground"
|
|
3825
3885
|
})
|
|
3826
3886
|
}),
|
|
3827
|
-
/* @__PURE__ */
|
|
3887
|
+
/* @__PURE__ */ jsxs11("div", {
|
|
3828
3888
|
className: cn("skippr:flex skippr:max-w-[80%] skippr:flex-col", isAgent ? "skippr:items-start" : "skippr:items-end"),
|
|
3829
3889
|
children: [
|
|
3830
|
-
/* @__PURE__ */
|
|
3890
|
+
/* @__PURE__ */ jsx14("div", {
|
|
3831
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"),
|
|
3832
3892
|
children: message.content
|
|
3833
3893
|
}),
|
|
3834
|
-
message.timestamp && /* @__PURE__ */
|
|
3894
|
+
message.timestamp && /* @__PURE__ */ jsx14("span", {
|
|
3835
3895
|
className: "skippr:mt-1 skippr:px-1 skippr:text-[10px] skippr:text-muted-foreground/60",
|
|
3836
3896
|
children: formatTimestamp(message.timestamp)
|
|
3837
3897
|
})
|
|
@@ -3842,33 +3902,33 @@ function ChatMessage({ message }) {
|
|
|
3842
3902
|
}
|
|
3843
3903
|
|
|
3844
3904
|
// src/components/TypingIndicator.tsx
|
|
3845
|
-
import { jsx as
|
|
3905
|
+
import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
3846
3906
|
function TypingIndicator() {
|
|
3847
|
-
return /* @__PURE__ */
|
|
3907
|
+
return /* @__PURE__ */ jsxs12("div", {
|
|
3848
3908
|
className: "skippr:flex skippr:items-start skippr:gap-2 skippr:animate-skippr-tab-fade",
|
|
3849
3909
|
children: [
|
|
3850
|
-
/* @__PURE__ */
|
|
3910
|
+
/* @__PURE__ */ jsx15("div", {
|
|
3851
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",
|
|
3852
|
-
children: /* @__PURE__ */
|
|
3912
|
+
children: /* @__PURE__ */ jsx15(Sparkles, {
|
|
3853
3913
|
className: "skippr:size-3.5 skippr:text-primary-foreground"
|
|
3854
3914
|
})
|
|
3855
3915
|
}),
|
|
3856
|
-
/* @__PURE__ */
|
|
3916
|
+
/* @__PURE__ */ jsxs12("div", {
|
|
3857
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",
|
|
3858
3918
|
children: [
|
|
3859
|
-
/* @__PURE__ */
|
|
3919
|
+
/* @__PURE__ */ jsx15("span", {
|
|
3860
3920
|
children: "Agent is analyzing your screen"
|
|
3861
3921
|
}),
|
|
3862
|
-
/* @__PURE__ */
|
|
3922
|
+
/* @__PURE__ */ jsxs12("span", {
|
|
3863
3923
|
className: "skippr:inline-flex skippr:items-center skippr:gap-[2px]",
|
|
3864
3924
|
children: [
|
|
3865
|
-
/* @__PURE__ */
|
|
3925
|
+
/* @__PURE__ */ jsx15("span", {
|
|
3866
3926
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:0ms]"
|
|
3867
3927
|
}),
|
|
3868
|
-
/* @__PURE__ */
|
|
3928
|
+
/* @__PURE__ */ jsx15("span", {
|
|
3869
3929
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:200ms]"
|
|
3870
3930
|
}),
|
|
3871
|
-
/* @__PURE__ */
|
|
3931
|
+
/* @__PURE__ */ jsx15("span", {
|
|
3872
3932
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:400ms]"
|
|
3873
3933
|
})
|
|
3874
3934
|
]
|
|
@@ -3880,7 +3940,7 @@ function TypingIndicator() {
|
|
|
3880
3940
|
}
|
|
3881
3941
|
|
|
3882
3942
|
// src/components/MessageList.tsx
|
|
3883
|
-
import { jsx as
|
|
3943
|
+
import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
3884
3944
|
function MessageList({
|
|
3885
3945
|
messages,
|
|
3886
3946
|
isStreaming,
|
|
@@ -3888,31 +3948,31 @@ function MessageList({
|
|
|
3888
3948
|
isSendingChat,
|
|
3889
3949
|
autoFocus = false
|
|
3890
3950
|
}) {
|
|
3891
|
-
const scrollRef =
|
|
3951
|
+
const scrollRef = useRef14(null);
|
|
3892
3952
|
const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
|
|
3893
|
-
|
|
3953
|
+
useEffect18(() => {
|
|
3894
3954
|
scrollRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
3895
3955
|
}, [messages.length, lastMessage?.content]);
|
|
3896
3956
|
const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
|
|
3897
|
-
return /* @__PURE__ */
|
|
3957
|
+
return /* @__PURE__ */ jsxs13("div", {
|
|
3898
3958
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
3899
3959
|
children: [
|
|
3900
|
-
/* @__PURE__ */
|
|
3960
|
+
/* @__PURE__ */ jsxs13("div", {
|
|
3901
3961
|
className: "skippr:min-h-0 skippr:flex-1 skippr:space-y-4 skippr:overflow-y-auto skippr:p-4",
|
|
3902
3962
|
children: [
|
|
3903
|
-
messages.length === 0 && !showTyping && /* @__PURE__ */
|
|
3963
|
+
messages.length === 0 && !showTyping && /* @__PURE__ */ jsx16(LoadingDots, {
|
|
3904
3964
|
label: "Waiting for conversation to begin..."
|
|
3905
3965
|
}),
|
|
3906
|
-
messages.map((message) => /* @__PURE__ */
|
|
3966
|
+
messages.map((message) => /* @__PURE__ */ jsx16(ChatMessage, {
|
|
3907
3967
|
message
|
|
3908
3968
|
}, message.id)),
|
|
3909
|
-
showTyping && /* @__PURE__ */
|
|
3910
|
-
/* @__PURE__ */
|
|
3969
|
+
showTyping && /* @__PURE__ */ jsx16(TypingIndicator, {}),
|
|
3970
|
+
/* @__PURE__ */ jsx16("div", {
|
|
3911
3971
|
ref: scrollRef
|
|
3912
3972
|
})
|
|
3913
3973
|
]
|
|
3914
3974
|
}),
|
|
3915
|
-
/* @__PURE__ */
|
|
3975
|
+
/* @__PURE__ */ jsx16(ChatInput, {
|
|
3916
3976
|
sendChatMessage,
|
|
3917
3977
|
isSendingChat,
|
|
3918
3978
|
autoFocus
|
|
@@ -3921,239 +3981,50 @@ function MessageList({
|
|
|
3921
3981
|
});
|
|
3922
3982
|
}
|
|
3923
3983
|
|
|
3924
|
-
// src/components/ModuleSelector.tsx
|
|
3925
|
-
import { useEffect as useEffect18, useRef as useRef12, useState as useState14 } from "react";
|
|
3926
|
-
import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
3927
|
-
var AGENT_TYPE_ICONS = {
|
|
3928
|
-
onboarding: UserPlus,
|
|
3929
|
-
demo: Rocket,
|
|
3930
|
-
training: GraduationCap,
|
|
3931
|
-
support: Headset
|
|
3932
|
-
};
|
|
3933
|
-
function getAgentIcon(type) {
|
|
3934
|
-
return AGENT_TYPE_ICONS[type] ?? Bot;
|
|
3935
|
-
}
|
|
3936
|
-
function ModuleSelector() {
|
|
3937
|
-
const {
|
|
3938
|
-
availableModules,
|
|
3939
|
-
isLoadingModules,
|
|
3940
|
-
modulesError,
|
|
3941
|
-
refetchModules,
|
|
3942
|
-
selectModule,
|
|
3943
|
-
isStarting,
|
|
3944
|
-
isDisconnecting,
|
|
3945
|
-
error
|
|
3946
|
-
} = useLiveAgent();
|
|
3947
|
-
const isBusy = isStarting || isDisconnecting;
|
|
3948
|
-
const scrollRef = useRef12(null);
|
|
3949
|
-
const [showScrollHint, setShowScrollHint] = useState14(false);
|
|
3950
|
-
const [isScrolled, setIsScrolled] = useState14(false);
|
|
3951
|
-
useEffect18(() => {
|
|
3952
|
-
const el = scrollRef.current;
|
|
3953
|
-
if (!el)
|
|
3954
|
-
return;
|
|
3955
|
-
function update() {
|
|
3956
|
-
if (!el)
|
|
3957
|
-
return;
|
|
3958
|
-
const overflows = el.scrollHeight > el.clientHeight + 1;
|
|
3959
|
-
const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 4;
|
|
3960
|
-
setShowScrollHint(overflows && !atBottom);
|
|
3961
|
-
setIsScrolled(el.scrollTop > 0);
|
|
3962
|
-
}
|
|
3963
|
-
update();
|
|
3964
|
-
el.addEventListener("scroll", update, { passive: true });
|
|
3965
|
-
const observer = new ResizeObserver(update);
|
|
3966
|
-
observer.observe(el);
|
|
3967
|
-
return () => {
|
|
3968
|
-
el.removeEventListener("scroll", update);
|
|
3969
|
-
observer.disconnect();
|
|
3970
|
-
};
|
|
3971
|
-
}, []);
|
|
3972
|
-
if (isLoadingModules && availableModules.length === 0) {
|
|
3973
|
-
return /* @__PURE__ */ jsx18("div", {
|
|
3974
|
-
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center skippr:p-6",
|
|
3975
|
-
children: /* @__PURE__ */ jsx18(LoadingDots, {
|
|
3976
|
-
label: "Loading modules..."
|
|
3977
|
-
})
|
|
3978
|
-
});
|
|
3979
|
-
}
|
|
3980
|
-
if (modulesError) {
|
|
3981
|
-
return /* @__PURE__ */ jsxs15("div", {
|
|
3982
|
-
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:p-6 skippr:text-center",
|
|
3983
|
-
children: [
|
|
3984
|
-
/* @__PURE__ */ jsx18("p", {
|
|
3985
|
-
className: "skippr:text-sm skippr:text-foreground",
|
|
3986
|
-
children: "Couldn't load modules."
|
|
3987
|
-
}),
|
|
3988
|
-
/* @__PURE__ */ jsx18("p", {
|
|
3989
|
-
className: "skippr:text-xs skippr:text-muted-foreground",
|
|
3990
|
-
children: modulesError
|
|
3991
|
-
}),
|
|
3992
|
-
/* @__PURE__ */ jsx18("button", {
|
|
3993
|
-
type: "button",
|
|
3994
|
-
onClick: () => void refetchModules(),
|
|
3995
|
-
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",
|
|
3996
|
-
children: "Try again"
|
|
3997
|
-
})
|
|
3998
|
-
]
|
|
3999
|
-
});
|
|
4000
|
-
}
|
|
4001
|
-
if (availableModules.length === 0) {
|
|
4002
|
-
return /* @__PURE__ */ jsx18("div", {
|
|
4003
|
-
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center skippr:p-6 skippr:text-center",
|
|
4004
|
-
children: /* @__PURE__ */ jsx18("p", {
|
|
4005
|
-
className: "skippr:text-sm skippr:text-muted-foreground",
|
|
4006
|
-
children: "No experts available."
|
|
4007
|
-
})
|
|
4008
|
-
});
|
|
4009
|
-
}
|
|
4010
|
-
return /* @__PURE__ */ jsxs15("div", {
|
|
4011
|
-
className: "skippr:relative skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
4012
|
-
children: [
|
|
4013
|
-
/* @__PURE__ */ jsxs15("div", {
|
|
4014
|
-
ref: scrollRef,
|
|
4015
|
-
className: "skippr-no-scrollbar skippr:flex-1 skippr:overflow-y-auto",
|
|
4016
|
-
children: [
|
|
4017
|
-
/* @__PURE__ */ jsx18("h3", {
|
|
4018
|
-
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" : ""}`,
|
|
4019
|
-
children: "Choose an agent"
|
|
4020
|
-
}),
|
|
4021
|
-
/* @__PURE__ */ jsxs15("div", {
|
|
4022
|
-
className: "skippr:px-4 skippr:pt-3 skippr:pb-5",
|
|
4023
|
-
children: [
|
|
4024
|
-
error && /* @__PURE__ */ jsx18("div", {
|
|
4025
|
-
role: "alert",
|
|
4026
|
-
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",
|
|
4027
|
-
children: error
|
|
4028
|
-
}),
|
|
4029
|
-
/* @__PURE__ */ jsx18("div", {
|
|
4030
|
-
className: "skippr:grid skippr:grid-cols-2 skippr:gap-2.5",
|
|
4031
|
-
children: availableModules.map((module, index2) => {
|
|
4032
|
-
const isFeatured = index2 === 0;
|
|
4033
|
-
const isWide = index2 === availableModules.length - 1 && availableModules.length % 2 === 1;
|
|
4034
|
-
const Icon2 = getAgentIcon(module.type);
|
|
4035
|
-
const sessionState = getModuleSessionState(module.currentSession, module.mode);
|
|
4036
|
-
const isTerminal = sessionState === "completed" || sessionState === "expired";
|
|
4037
|
-
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";
|
|
4038
|
-
const layout = isWide ? "skippr:items-center skippr:p-3.5 skippr:pb-5" : "skippr:flex-col skippr:items-start skippr:p-3.5";
|
|
4039
|
-
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";
|
|
4040
|
-
const span = isWide ? "skippr:col-span-2" : "";
|
|
4041
|
-
return /* @__PURE__ */ jsxs15("button", {
|
|
4042
|
-
type: "button",
|
|
4043
|
-
disabled: isBusy || isTerminal,
|
|
4044
|
-
onClick: () => selectModule(module.id),
|
|
4045
|
-
className: `${base} ${layout} ${variant} ${span}`,
|
|
4046
|
-
children: [
|
|
4047
|
-
/* @__PURE__ */ jsx18("div", {
|
|
4048
|
-
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",
|
|
4049
|
-
children: /* @__PURE__ */ jsx18(Icon2, {
|
|
4050
|
-
className: isFeatured ? "skippr:h-4 skippr:w-4" : "skippr:h-4 skippr:w-4 skippr:text-muted-foreground"
|
|
4051
|
-
})
|
|
4052
|
-
}),
|
|
4053
|
-
/* @__PURE__ */ jsxs15("div", {
|
|
4054
|
-
className: "skippr:min-w-0 skippr:w-full skippr:space-y-0.5",
|
|
4055
|
-
children: [
|
|
4056
|
-
/* @__PURE__ */ jsxs15("div", {
|
|
4057
|
-
className: "skippr:flex skippr:items-center skippr:gap-1.5",
|
|
4058
|
-
children: [
|
|
4059
|
-
/* @__PURE__ */ jsx18("p", {
|
|
4060
|
-
className: "skippr:line-clamp-1 skippr:text-sm skippr:font-semibold",
|
|
4061
|
-
children: module.name
|
|
4062
|
-
}),
|
|
4063
|
-
sessionState === "resume" && /* @__PURE__ */ jsxs15("span", {
|
|
4064
|
-
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"}`,
|
|
4065
|
-
children: [
|
|
4066
|
-
/* @__PURE__ */ jsx18(Play, {
|
|
4067
|
-
className: "skippr:size-2.5"
|
|
4068
|
-
}),
|
|
4069
|
-
"Resume"
|
|
4070
|
-
]
|
|
4071
|
-
}),
|
|
4072
|
-
sessionState === "completed" && /* @__PURE__ */ jsxs15("span", {
|
|
4073
|
-
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",
|
|
4074
|
-
children: [
|
|
4075
|
-
/* @__PURE__ */ jsx18(CircleCheck, {
|
|
4076
|
-
className: "skippr:size-2.5"
|
|
4077
|
-
}),
|
|
4078
|
-
"Completed"
|
|
4079
|
-
]
|
|
4080
|
-
}),
|
|
4081
|
-
sessionState === "expired" && /* @__PURE__ */ jsxs15("span", {
|
|
4082
|
-
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",
|
|
4083
|
-
children: [
|
|
4084
|
-
/* @__PURE__ */ jsx18(Clock, {
|
|
4085
|
-
className: "skippr:size-2.5"
|
|
4086
|
-
}),
|
|
4087
|
-
"Expired"
|
|
4088
|
-
]
|
|
4089
|
-
})
|
|
4090
|
-
]
|
|
4091
|
-
}),
|
|
4092
|
-
module.description && /* @__PURE__ */ jsx18("p", {
|
|
4093
|
-
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",
|
|
4094
|
-
children: module.description
|
|
4095
|
-
})
|
|
4096
|
-
]
|
|
4097
|
-
})
|
|
4098
|
-
]
|
|
4099
|
-
}, module.id);
|
|
4100
|
-
})
|
|
4101
|
-
})
|
|
4102
|
-
]
|
|
4103
|
-
})
|
|
4104
|
-
]
|
|
4105
|
-
}),
|
|
4106
|
-
showScrollHint && /* @__PURE__ */ jsx18("div", {
|
|
4107
|
-
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"
|
|
4108
|
-
})
|
|
4109
|
-
]
|
|
4110
|
-
});
|
|
4111
|
-
}
|
|
4112
|
-
|
|
4113
3984
|
// src/components/SessionAgenda.tsx
|
|
4114
|
-
import { jsx as
|
|
3985
|
+
import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
4115
3986
|
function SessionAgenda({ phases, hasStarted }) {
|
|
4116
3987
|
if (phases.length === 0 || !hasStarted) {
|
|
4117
|
-
return /* @__PURE__ */
|
|
3988
|
+
return /* @__PURE__ */ jsx17("div", {
|
|
4118
3989
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
4119
|
-
children: /* @__PURE__ */
|
|
3990
|
+
children: /* @__PURE__ */ jsx17(LoadingDots, {
|
|
4120
3991
|
label: "Waiting for agenda to load..."
|
|
4121
3992
|
})
|
|
4122
3993
|
});
|
|
4123
3994
|
}
|
|
4124
|
-
return /* @__PURE__ */
|
|
3995
|
+
return /* @__PURE__ */ jsx17("div", {
|
|
4125
3996
|
className: "skippr:flex-1 skippr:overflow-y-auto skippr:px-4 skippr:py-4",
|
|
4126
|
-
children: /* @__PURE__ */
|
|
3997
|
+
children: /* @__PURE__ */ jsx17("div", {
|
|
4127
3998
|
className: "skippr:space-y-1",
|
|
4128
3999
|
children: phases.map((phase) => {
|
|
4129
4000
|
const isActive = phase.status === "active";
|
|
4130
4001
|
const isCompleted = phase.status === "completed";
|
|
4131
|
-
return /* @__PURE__ */
|
|
4002
|
+
return /* @__PURE__ */ jsxs14("div", {
|
|
4132
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"),
|
|
4133
4004
|
children: [
|
|
4134
|
-
/* @__PURE__ */
|
|
4005
|
+
/* @__PURE__ */ jsx17("div", {
|
|
4135
4006
|
className: "skippr:mt-0.5",
|
|
4136
|
-
children: isCompleted ? /* @__PURE__ */
|
|
4007
|
+
children: isCompleted ? /* @__PURE__ */ jsx17(CircleCheck, {
|
|
4137
4008
|
className: "skippr:size-4 skippr:text-chart-3"
|
|
4138
|
-
}) : isActive ? /* @__PURE__ */
|
|
4009
|
+
}) : isActive ? /* @__PURE__ */ jsx17(Circle, {
|
|
4139
4010
|
className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
|
|
4140
|
-
}) : /* @__PURE__ */
|
|
4011
|
+
}) : /* @__PURE__ */ jsx17(Circle, {
|
|
4141
4012
|
className: "skippr:size-4 skippr:text-muted-foreground/30"
|
|
4142
4013
|
})
|
|
4143
4014
|
}),
|
|
4144
|
-
/* @__PURE__ */
|
|
4015
|
+
/* @__PURE__ */ jsxs14("div", {
|
|
4145
4016
|
className: "skippr:min-w-0 skippr:flex-1",
|
|
4146
4017
|
children: [
|
|
4147
|
-
/* @__PURE__ */
|
|
4018
|
+
/* @__PURE__ */ jsx17("p", {
|
|
4148
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"),
|
|
4149
4020
|
children: phase.name
|
|
4150
4021
|
}),
|
|
4151
|
-
phase.highlights.length > 0 && /* @__PURE__ */
|
|
4022
|
+
phase.highlights.length > 0 && /* @__PURE__ */ jsx17("ul", {
|
|
4152
4023
|
className: "skippr:mt-1 skippr:space-y-0.5",
|
|
4153
|
-
children: phase.highlights.map((text) => /* @__PURE__ */
|
|
4024
|
+
children: phase.highlights.map((text) => /* @__PURE__ */ jsxs14("li", {
|
|
4154
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"),
|
|
4155
4026
|
children: [
|
|
4156
|
-
/* @__PURE__ */
|
|
4027
|
+
/* @__PURE__ */ jsx17("span", {
|
|
4157
4028
|
className: "skippr:size-1 skippr:shrink-0 skippr:rounded-full skippr:bg-current"
|
|
4158
4029
|
}),
|
|
4159
4030
|
text
|
|
@@ -4170,12 +4041,12 @@ function SessionAgenda({ phases, hasStarted }) {
|
|
|
4170
4041
|
}
|
|
4171
4042
|
|
|
4172
4043
|
// src/components/SessionWarningBanner.tsx
|
|
4173
|
-
import { jsx as
|
|
4044
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
4174
4045
|
var SESSION_WARNING_THRESHOLD_SECS = 60;
|
|
4175
4046
|
function SessionWarningBanner({ remaining }) {
|
|
4176
4047
|
if (remaining === null || remaining <= 0 || remaining > SESSION_WARNING_THRESHOLD_SECS)
|
|
4177
4048
|
return null;
|
|
4178
|
-
return /* @__PURE__ */
|
|
4049
|
+
return /* @__PURE__ */ jsx18("div", {
|
|
4179
4050
|
"data-testid": "session-warning-banner",
|
|
4180
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",
|
|
4181
4052
|
children: "Session ending soon"
|
|
@@ -4183,7 +4054,7 @@ function SessionWarningBanner({ remaining }) {
|
|
|
4183
4054
|
}
|
|
4184
4055
|
|
|
4185
4056
|
// src/components/StartSessionPrompt.tsx
|
|
4186
|
-
import { jsx as
|
|
4057
|
+
import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
4187
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";
|
|
4188
4059
|
function StartSessionPrompt({
|
|
4189
4060
|
onStartSession,
|
|
@@ -4195,16 +4066,16 @@ function StartSessionPrompt({
|
|
|
4195
4066
|
canResume = false,
|
|
4196
4067
|
onResume
|
|
4197
4068
|
}) {
|
|
4198
|
-
return /* @__PURE__ */
|
|
4069
|
+
return /* @__PURE__ */ jsxs15("div", {
|
|
4199
4070
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:px-4",
|
|
4200
4071
|
children: [
|
|
4201
|
-
canResume && onResume ? /* @__PURE__ */
|
|
4072
|
+
canResume && onResume ? /* @__PURE__ */ jsx19("button", {
|
|
4202
4073
|
type: "button",
|
|
4203
4074
|
onClick: onResume,
|
|
4204
4075
|
disabled: isStarting,
|
|
4205
4076
|
className: PROMPT_BUTTON,
|
|
4206
4077
|
children: isStarting ? "Resuming..." : "Resume session"
|
|
4207
|
-
}) : /* @__PURE__ */
|
|
4078
|
+
}) : /* @__PURE__ */ jsx19("button", {
|
|
4208
4079
|
type: "button",
|
|
4209
4080
|
onClick: () => {
|
|
4210
4081
|
if (!agentId)
|
|
@@ -4215,7 +4086,7 @@ function StartSessionPrompt({
|
|
|
4215
4086
|
className: PROMPT_BUTTON,
|
|
4216
4087
|
children: isStarting ? "Starting..." : label
|
|
4217
4088
|
}),
|
|
4218
|
-
error && /* @__PURE__ */
|
|
4089
|
+
error && /* @__PURE__ */ jsx19("p", {
|
|
4219
4090
|
className: "skippr:text-xs skippr:text-destructive",
|
|
4220
4091
|
children: error
|
|
4221
4092
|
})
|
|
@@ -4224,7 +4095,7 @@ function StartSessionPrompt({
|
|
|
4224
4095
|
}
|
|
4225
4096
|
|
|
4226
4097
|
// src/components/Sidebar.tsx
|
|
4227
|
-
import { jsx as
|
|
4098
|
+
import { jsx as jsx20, jsxs as jsxs16, Fragment as Fragment2 } from "react/jsx-runtime";
|
|
4228
4099
|
function Sidebar({
|
|
4229
4100
|
hideControls = false,
|
|
4230
4101
|
hideHeader = false,
|
|
@@ -4239,10 +4110,8 @@ function Sidebar({
|
|
|
4239
4110
|
isPaused,
|
|
4240
4111
|
error,
|
|
4241
4112
|
startSession,
|
|
4242
|
-
pauseSession,
|
|
4243
4113
|
resumeSession,
|
|
4244
4114
|
resumableSession,
|
|
4245
|
-
disconnect,
|
|
4246
4115
|
isPanelOpen,
|
|
4247
4116
|
position,
|
|
4248
4117
|
isAuthenticated,
|
|
@@ -4254,13 +4123,11 @@ function Sidebar({
|
|
|
4254
4123
|
sidebarTab: activeTab,
|
|
4255
4124
|
setSidebarTab: setActiveTab,
|
|
4256
4125
|
autoFocusChat,
|
|
4257
|
-
captureMode,
|
|
4258
|
-
hasModuleSelector,
|
|
4259
4126
|
agentId,
|
|
4260
4127
|
agentMode,
|
|
4261
4128
|
agentControls
|
|
4262
4129
|
} = useLiveAgent();
|
|
4263
|
-
const internalCtx =
|
|
4130
|
+
const internalCtx = useContext8(LiveAgentContext);
|
|
4264
4131
|
const usesHostAuth = internalCtx?.usesHostAuth ?? false;
|
|
4265
4132
|
const authFailed = internalCtx?.authFailed ?? false;
|
|
4266
4133
|
const showAgenda = agentMode !== AGENT_MODE.AlwaysOn;
|
|
@@ -4280,21 +4147,19 @@ function Sidebar({
|
|
|
4280
4147
|
document.body.style.transition = "";
|
|
4281
4148
|
};
|
|
4282
4149
|
}, [isSidebar, isPanelOpen, position]);
|
|
4283
|
-
return /* @__PURE__ */
|
|
4284
|
-
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"),
|
|
4285
4152
|
style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined },
|
|
4286
4153
|
children: [
|
|
4287
|
-
!hideHeader && /* @__PURE__ */
|
|
4288
|
-
authFailed ? /* @__PURE__ */
|
|
4154
|
+
!hideHeader && /* @__PURE__ */ jsx20(ChatHeader, {}),
|
|
4155
|
+
authFailed ? /* @__PURE__ */ jsx20(AuthError, {}) : isAuthenticated ? /* @__PURE__ */ jsx20(AuthenticatedContent, {
|
|
4289
4156
|
isConnected,
|
|
4290
4157
|
isPaused,
|
|
4291
4158
|
isPausing,
|
|
4292
4159
|
isDisconnecting,
|
|
4293
4160
|
canResume: resumableSession !== null,
|
|
4294
4161
|
onStartSession: startSession,
|
|
4295
|
-
onPause: pauseSession,
|
|
4296
4162
|
onResume: resumeSession,
|
|
4297
|
-
onDisconnect: disconnect,
|
|
4298
4163
|
isStarting,
|
|
4299
4164
|
error,
|
|
4300
4165
|
activeTab,
|
|
@@ -4302,17 +4167,15 @@ function Sidebar({
|
|
|
4302
4167
|
hideControls,
|
|
4303
4168
|
startSessionLabel,
|
|
4304
4169
|
autoFocusChat,
|
|
4305
|
-
showScreenShareToggle: captureMode === "screenshare",
|
|
4306
|
-
hasModuleSelector,
|
|
4307
4170
|
agentId,
|
|
4308
4171
|
agentControls,
|
|
4309
4172
|
showAgenda
|
|
4310
|
-
}) : usesHostAuth || isValidating ? /* @__PURE__ */
|
|
4173
|
+
}) : usesHostAuth || isValidating ? /* @__PURE__ */ jsx20("div", {
|
|
4311
4174
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
4312
|
-
children: /* @__PURE__ */
|
|
4175
|
+
children: /* @__PURE__ */ jsx20(LoadingDots, {
|
|
4313
4176
|
label: "Loading..."
|
|
4314
4177
|
})
|
|
4315
|
-
}) : /* @__PURE__ */
|
|
4178
|
+
}) : /* @__PURE__ */ jsx20(LoginFlow, {
|
|
4316
4179
|
requestOtp,
|
|
4317
4180
|
verifyOtp,
|
|
4318
4181
|
error: authError,
|
|
@@ -4328,9 +4191,7 @@ function AuthenticatedContent({
|
|
|
4328
4191
|
isDisconnecting,
|
|
4329
4192
|
canResume,
|
|
4330
4193
|
onStartSession,
|
|
4331
|
-
onPause,
|
|
4332
4194
|
onResume,
|
|
4333
|
-
onDisconnect,
|
|
4334
4195
|
isStarting,
|
|
4335
4196
|
error,
|
|
4336
4197
|
activeTab,
|
|
@@ -4338,15 +4199,11 @@ function AuthenticatedContent({
|
|
|
4338
4199
|
hideControls,
|
|
4339
4200
|
startSessionLabel,
|
|
4340
4201
|
autoFocusChat,
|
|
4341
|
-
showScreenShareToggle,
|
|
4342
|
-
hasModuleSelector,
|
|
4343
4202
|
agentId,
|
|
4344
4203
|
agentControls,
|
|
4345
4204
|
showAgenda
|
|
4346
4205
|
}) {
|
|
4347
4206
|
const inSession = isConnected || isStarting || isPaused || isPausing;
|
|
4348
|
-
const showSelectorAsPrompt = hasModuleSelector && !inSession && !isDisconnecting;
|
|
4349
|
-
const showTabBar = !showSelectorAsPrompt;
|
|
4350
4207
|
const effectiveTab = showAgenda ? activeTab : "chat";
|
|
4351
4208
|
let transitionLabel = null;
|
|
4352
4209
|
if (isPausing) {
|
|
@@ -4356,63 +4213,63 @@ function AuthenticatedContent({
|
|
|
4356
4213
|
} else if (isPaused) {
|
|
4357
4214
|
transitionLabel = "Paused";
|
|
4358
4215
|
}
|
|
4359
|
-
return /* @__PURE__ */
|
|
4216
|
+
return /* @__PURE__ */ jsxs16(Fragment2, {
|
|
4360
4217
|
children: [
|
|
4361
|
-
isConnected && /* @__PURE__ */
|
|
4362
|
-
|
|
4218
|
+
isConnected && /* @__PURE__ */ jsx20(ConnectedBanner, {}),
|
|
4219
|
+
/* @__PURE__ */ jsxs16("div", {
|
|
4363
4220
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-2",
|
|
4364
4221
|
children: [
|
|
4365
|
-
/* @__PURE__ */
|
|
4222
|
+
/* @__PURE__ */ jsxs16("button", {
|
|
4366
4223
|
type: "button",
|
|
4367
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"),
|
|
4368
4225
|
onClick: () => onTabChange("chat"),
|
|
4369
4226
|
children: [
|
|
4370
|
-
/* @__PURE__ */
|
|
4227
|
+
/* @__PURE__ */ jsx20(MessageCircle, {
|
|
4371
4228
|
className: "skippr:size-3.5"
|
|
4372
4229
|
}),
|
|
4373
4230
|
"Chat",
|
|
4374
|
-
activeTab === "chat" && /* @__PURE__ */
|
|
4231
|
+
activeTab === "chat" && /* @__PURE__ */ jsx20("span", {
|
|
4375
4232
|
className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
4376
4233
|
})
|
|
4377
4234
|
]
|
|
4378
4235
|
}),
|
|
4379
|
-
showAgenda && /* @__PURE__ */
|
|
4236
|
+
showAgenda && /* @__PURE__ */ jsxs16("button", {
|
|
4380
4237
|
type: "button",
|
|
4381
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"),
|
|
4382
4239
|
onClick: () => onTabChange("agenda"),
|
|
4383
4240
|
children: [
|
|
4384
|
-
/* @__PURE__ */
|
|
4241
|
+
/* @__PURE__ */ jsx20(Calendar, {
|
|
4385
4242
|
className: "skippr:size-3.5"
|
|
4386
4243
|
}),
|
|
4387
4244
|
"Agenda",
|
|
4388
|
-
activeTab === "agenda" && /* @__PURE__ */
|
|
4245
|
+
activeTab === "agenda" && /* @__PURE__ */ jsx20("span", {
|
|
4389
4246
|
className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
4390
4247
|
})
|
|
4391
4248
|
]
|
|
4392
4249
|
})
|
|
4393
4250
|
]
|
|
4394
4251
|
}),
|
|
4395
|
-
/* @__PURE__ */
|
|
4252
|
+
/* @__PURE__ */ jsx20("div", {
|
|
4396
4253
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
4397
|
-
children: isDisconnecting ? /* @__PURE__ */
|
|
4254
|
+
children: isDisconnecting ? /* @__PURE__ */ jsx20("div", {
|
|
4398
4255
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
4399
|
-
children: /* @__PURE__ */
|
|
4256
|
+
children: /* @__PURE__ */ jsx20(LoadingDots, {
|
|
4400
4257
|
label: "Ending session..."
|
|
4401
4258
|
})
|
|
4402
|
-
}) :
|
|
4259
|
+
}) : inSession ? /* @__PURE__ */ jsxs16(Fragment2, {
|
|
4403
4260
|
children: [
|
|
4404
|
-
transitionLabel && /* @__PURE__ */
|
|
4261
|
+
transitionLabel && /* @__PURE__ */ jsx20("div", {
|
|
4405
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",
|
|
4406
4263
|
children: transitionLabel
|
|
4407
4264
|
}),
|
|
4408
|
-
/* @__PURE__ */
|
|
4265
|
+
/* @__PURE__ */ jsx20(ConnectedBody, {
|
|
4409
4266
|
activeTab: effectiveTab,
|
|
4410
4267
|
autoFocusChat
|
|
4411
4268
|
})
|
|
4412
4269
|
]
|
|
4413
|
-
}) : /* @__PURE__ */
|
|
4270
|
+
}) : /* @__PURE__ */ jsx20("div", {
|
|
4414
4271
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
|
|
4415
|
-
children: /* @__PURE__ */
|
|
4272
|
+
children: /* @__PURE__ */ jsx20(StartSessionPrompt, {
|
|
4416
4273
|
onStartSession,
|
|
4417
4274
|
agentId,
|
|
4418
4275
|
agentControls,
|
|
@@ -4424,29 +4281,58 @@ function AuthenticatedContent({
|
|
|
4424
4281
|
})
|
|
4425
4282
|
}, `${activeTab}-empty`)
|
|
4426
4283
|
}),
|
|
4427
|
-
|
|
4428
|
-
|
|
4429
|
-
|
|
4430
|
-
|
|
4431
|
-
|
|
4432
|
-
|
|
4433
|
-
|
|
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
|
+
]
|
|
4434
4293
|
})
|
|
4435
4294
|
]
|
|
4436
4295
|
});
|
|
4437
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
|
+
}
|
|
4438
4324
|
function AuthError() {
|
|
4439
|
-
return /* @__PURE__ */
|
|
4325
|
+
return /* @__PURE__ */ jsxs16("div", {
|
|
4440
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",
|
|
4441
4327
|
children: [
|
|
4442
|
-
/* @__PURE__ */
|
|
4328
|
+
/* @__PURE__ */ jsx20(CircleAlert, {
|
|
4443
4329
|
className: "skippr:mb-3 skippr:size-7 skippr:text-destructive"
|
|
4444
4330
|
}),
|
|
4445
|
-
/* @__PURE__ */
|
|
4331
|
+
/* @__PURE__ */ jsx20("p", {
|
|
4446
4332
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
4447
4333
|
children: "We couldn't verify your session"
|
|
4448
4334
|
}),
|
|
4449
|
-
/* @__PURE__ */
|
|
4335
|
+
/* @__PURE__ */ jsx20("p", {
|
|
4450
4336
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
4451
4337
|
children: "Please contact administrator."
|
|
4452
4338
|
})
|
|
@@ -4455,7 +4341,7 @@ function AuthError() {
|
|
|
4455
4341
|
}
|
|
4456
4342
|
function ConnectedBanner() {
|
|
4457
4343
|
const remaining = useSessionRemaining();
|
|
4458
|
-
return /* @__PURE__ */
|
|
4344
|
+
return /* @__PURE__ */ jsx20(SessionWarningBanner, {
|
|
4459
4345
|
remaining
|
|
4460
4346
|
});
|
|
4461
4347
|
}
|
|
@@ -4466,17 +4352,17 @@ function ConnectedBody({
|
|
|
4466
4352
|
const { allMessages, agentState, sendChatMessage, isSendingChat } = useCombinedMessages();
|
|
4467
4353
|
const { phases } = usePhaseUpdates();
|
|
4468
4354
|
if (activeTab === "agenda") {
|
|
4469
|
-
return /* @__PURE__ */
|
|
4355
|
+
return /* @__PURE__ */ jsx20("div", {
|
|
4470
4356
|
className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto skippr:animate-skippr-tab-fade",
|
|
4471
|
-
children: /* @__PURE__ */
|
|
4357
|
+
children: /* @__PURE__ */ jsx20(SessionAgenda, {
|
|
4472
4358
|
phases,
|
|
4473
4359
|
hasStarted: allMessages.length > 0 || agentState === "speaking"
|
|
4474
4360
|
})
|
|
4475
4361
|
}, "agenda");
|
|
4476
4362
|
}
|
|
4477
|
-
return /* @__PURE__ */
|
|
4363
|
+
return /* @__PURE__ */ jsx20("div", {
|
|
4478
4364
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
|
|
4479
|
-
children: /* @__PURE__ */
|
|
4365
|
+
children: /* @__PURE__ */ jsx20(MessageList, {
|
|
4480
4366
|
messages: allMessages,
|
|
4481
4367
|
isStreaming: agentState === "speaking",
|
|
4482
4368
|
sendChatMessage,
|
|
@@ -4486,29 +4372,75 @@ function ConnectedBody({
|
|
|
4486
4372
|
}, "chat");
|
|
4487
4373
|
}
|
|
4488
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
|
+
|
|
4489
4411
|
// src/components/SidebarTrigger.tsx
|
|
4490
|
-
import { jsx as
|
|
4412
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
4491
4413
|
function SidebarTrigger() {
|
|
4492
|
-
const {
|
|
4493
|
-
|
|
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)
|
|
4494
4426
|
return null;
|
|
4495
4427
|
const handleClick = isPanelOpen && minimizable ? minimizePanel : togglePanel;
|
|
4496
|
-
return /* @__PURE__ */
|
|
4428
|
+
return /* @__PURE__ */ jsx22("button", {
|
|
4497
4429
|
type: "button",
|
|
4498
4430
|
onClick: handleClick,
|
|
4499
4431
|
title: isPanelOpen ? "Close chat" : "Open chat",
|
|
4500
4432
|
"aria-label": isPanelOpen ? "Close chat" : "Open chat",
|
|
4501
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"),
|
|
4502
|
-
children: isPanelOpen ? /* @__PURE__ */
|
|
4434
|
+
children: isPanelOpen ? /* @__PURE__ */ jsx22(ChevronDown, {
|
|
4503
4435
|
className: "skippr:size-5"
|
|
4504
|
-
}) : /* @__PURE__ */
|
|
4436
|
+
}) : /* @__PURE__ */ jsx22(Logo, {
|
|
4505
4437
|
className: "skippr:size-12"
|
|
4506
4438
|
})
|
|
4507
4439
|
});
|
|
4508
4440
|
}
|
|
4509
4441
|
|
|
4510
4442
|
// src/components/LiveAgent.tsx
|
|
4511
|
-
import { jsx as
|
|
4443
|
+
import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
4512
4444
|
function LiveAgent(props) {
|
|
4513
4445
|
const {
|
|
4514
4446
|
agentId: hostAgentId,
|
|
@@ -4540,20 +4472,20 @@ function LiveAgent(props) {
|
|
|
4540
4472
|
const usesHostAuth = !!getUserToken || !!userToken || !!authTokenProp;
|
|
4541
4473
|
const effectiveAuthToken = usesHostAuth ? authTokenProp : auth.authToken ?? undefined;
|
|
4542
4474
|
const hasModuleSelector = !hostAgentId;
|
|
4543
|
-
const [activeModule, setActiveModule] =
|
|
4475
|
+
const [activeModule, setActiveModule] = useState16(null);
|
|
4544
4476
|
const agentId = hasModuleSelector ? activeModule?.id ?? null : hostAgentId;
|
|
4545
4477
|
const agentControls = hasModuleSelector ? activeModule?.controls : hostAgentControls;
|
|
4546
|
-
const minimizeOnSessionStart =
|
|
4478
|
+
const minimizeOnSessionStart = useCallback11(() => {
|
|
4547
4479
|
if (minimizable) {
|
|
4548
4480
|
setIsMinimized(true);
|
|
4549
4481
|
setIsPanelOpen(false);
|
|
4550
4482
|
}
|
|
4551
4483
|
}, [minimizable]);
|
|
4552
|
-
const expandOnSessionStartError =
|
|
4484
|
+
const expandOnSessionStartError = useCallback11(() => {
|
|
4553
4485
|
setIsMinimized(false);
|
|
4554
4486
|
setIsPanelOpen(true);
|
|
4555
4487
|
}, []);
|
|
4556
|
-
const minimizeOnSessionDisconnect =
|
|
4488
|
+
const minimizeOnSessionDisconnect = useCallback11(() => {
|
|
4557
4489
|
if (hasModuleSelector) {
|
|
4558
4490
|
setActiveModule(null);
|
|
4559
4491
|
}
|
|
@@ -4589,34 +4521,38 @@ function LiveAgent(props) {
|
|
|
4589
4521
|
onStartError: expandOnSessionStartError,
|
|
4590
4522
|
onDisconnect: minimizeOnSessionDisconnect
|
|
4591
4523
|
});
|
|
4592
|
-
const teardownInFlightRef =
|
|
4524
|
+
const teardownInFlightRef = useRef15(false);
|
|
4593
4525
|
teardownInFlightRef.current = isPaused || isPausing || isDisconnecting;
|
|
4594
|
-
const handleRoomDisconnected =
|
|
4526
|
+
const handleRoomDisconnected = useCallback11(() => {
|
|
4595
4527
|
if (teardownInFlightRef.current)
|
|
4596
4528
|
return;
|
|
4597
4529
|
disconnect();
|
|
4598
4530
|
}, [disconnect]);
|
|
4599
|
-
const
|
|
4600
|
-
const [isPanelOpen, setIsPanelOpen] =
|
|
4601
|
-
const [isMinimized, setIsMinimized] =
|
|
4602
|
-
const [sidebarTab, setSidebarTab] =
|
|
4603
|
-
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]);
|
|
4604
4543
|
const {
|
|
4605
4544
|
modules: availableModules,
|
|
4606
4545
|
isLoading: isLoadingModules,
|
|
4546
|
+
hasResolved: hasResolvedModules,
|
|
4607
4547
|
error: modulesError,
|
|
4608
4548
|
refetch: refetchModules
|
|
4609
4549
|
} = useAvailableModules({
|
|
4610
|
-
enabled: !
|
|
4550
|
+
enabled: !isSessionLive,
|
|
4611
4551
|
bearerToken,
|
|
4612
4552
|
authedFetch
|
|
4613
4553
|
});
|
|
4614
|
-
const {
|
|
4615
|
-
|
|
4616
|
-
dismissGoal: dismissAdoptionGoal,
|
|
4617
|
-
attendGoal
|
|
4618
|
-
} = useAdoptionGoals({
|
|
4619
|
-
enabled: !inSession,
|
|
4554
|
+
const { goals: adoptionGoals, attendGoal } = useAdoptionGoals({
|
|
4555
|
+
enabled: !isSessionLive,
|
|
4620
4556
|
bearerToken,
|
|
4621
4557
|
authedFetch
|
|
4622
4558
|
});
|
|
@@ -4629,7 +4565,7 @@ function LiveAgent(props) {
|
|
|
4629
4565
|
}, [activeModule, hostAgentId, availableModules]);
|
|
4630
4566
|
const agentMode = activeModuleForAgent?.mode ?? null;
|
|
4631
4567
|
const resumableSession = useMemo6(() => getResumableSession(activeModuleForAgent), [activeModuleForAgent]);
|
|
4632
|
-
const resumeSession =
|
|
4568
|
+
const resumeSession = useCallback11(async () => {
|
|
4633
4569
|
if (!resumableSession)
|
|
4634
4570
|
return;
|
|
4635
4571
|
await startSession({
|
|
@@ -4638,7 +4574,7 @@ function LiveAgent(props) {
|
|
|
4638
4574
|
existingSessionId: resumableSession.id
|
|
4639
4575
|
});
|
|
4640
4576
|
}, [resumableSession, startSession, agentControls]);
|
|
4641
|
-
const selectModule =
|
|
4577
|
+
const selectModule = useCallback11((moduleId) => {
|
|
4642
4578
|
const found = availableModules.find((m) => m.id === moduleId);
|
|
4643
4579
|
if (!found)
|
|
4644
4580
|
return;
|
|
@@ -4649,7 +4585,7 @@ function LiveAgent(props) {
|
|
|
4649
4585
|
existingSessionId: getResumableSessionId(found.currentSession, found.mode)
|
|
4650
4586
|
});
|
|
4651
4587
|
}, [availableModules, startSession]);
|
|
4652
|
-
const startAdoptionSession =
|
|
4588
|
+
const startAdoptionSession = useCallback11((goal) => {
|
|
4653
4589
|
attendGoal(goal.goalId);
|
|
4654
4590
|
const found = availableModules.find((m) => m.id === goal.agentId);
|
|
4655
4591
|
if (found)
|
|
@@ -4660,9 +4596,9 @@ function LiveAgent(props) {
|
|
|
4660
4596
|
adoptionGoalId: goal.goalId
|
|
4661
4597
|
});
|
|
4662
4598
|
}, [attendGoal, availableModules, startSession]);
|
|
4663
|
-
const [welcomeDismissed, setWelcomeDismissed] =
|
|
4664
|
-
const dismissWelcome =
|
|
4665
|
-
const [currentPosition, setCurrentPosition] =
|
|
4599
|
+
const [welcomeDismissed, setWelcomeDismissed] = useState16(false);
|
|
4600
|
+
const dismissWelcome = useCallback11(() => setWelcomeDismissed(true), []);
|
|
4601
|
+
const [currentPosition, setCurrentPosition] = useState16(() => {
|
|
4666
4602
|
try {
|
|
4667
4603
|
const saved = localStorage.getItem("skippr_widget_position");
|
|
4668
4604
|
if (saved === "left" || saved === "right")
|
|
@@ -4670,26 +4606,29 @@ function LiveAgent(props) {
|
|
|
4670
4606
|
} catch {}
|
|
4671
4607
|
return position;
|
|
4672
4608
|
});
|
|
4673
|
-
const setPositionWithPersist =
|
|
4609
|
+
const setPositionWithPersist = useCallback11((pos) => {
|
|
4674
4610
|
setCurrentPosition(pos);
|
|
4675
4611
|
try {
|
|
4676
4612
|
localStorage.setItem("skippr_widget_position", pos);
|
|
4677
4613
|
} catch {}
|
|
4678
4614
|
}, []);
|
|
4679
|
-
const openPanel =
|
|
4680
|
-
const closePanel =
|
|
4681
|
-
const togglePanel =
|
|
4682
|
-
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(() => {
|
|
4683
4619
|
setIsMinimized(false);
|
|
4684
4620
|
setIsPanelOpen(true);
|
|
4685
4621
|
}, []);
|
|
4686
|
-
const minimizePanel =
|
|
4622
|
+
const minimizePanel = useCallback11(() => {
|
|
4687
4623
|
if (!minimizable)
|
|
4688
4624
|
return;
|
|
4689
4625
|
setIsMinimized(true);
|
|
4690
4626
|
setIsPanelOpen(false);
|
|
4691
4627
|
}, [minimizable]);
|
|
4692
|
-
const
|
|
4628
|
+
const pauseSessionAndMinimize = useCallback11(async () => {
|
|
4629
|
+
await pauseSession();
|
|
4630
|
+
minimizePanel();
|
|
4631
|
+
}, [pauseSession, minimizePanel]);
|
|
4693
4632
|
const isAuthenticated = bearerToken !== null || auth.isAuthenticated;
|
|
4694
4633
|
const ctx = useMemo6(() => ({
|
|
4695
4634
|
connection,
|
|
@@ -4701,7 +4640,7 @@ function LiveAgent(props) {
|
|
|
4701
4640
|
error,
|
|
4702
4641
|
errorCode,
|
|
4703
4642
|
startSession,
|
|
4704
|
-
pauseSession,
|
|
4643
|
+
pauseSession: pauseSessionAndMinimize,
|
|
4705
4644
|
resumeSession,
|
|
4706
4645
|
disconnect,
|
|
4707
4646
|
isPaused,
|
|
@@ -4731,6 +4670,8 @@ function LiveAgent(props) {
|
|
|
4731
4670
|
isAuthSubmitting: auth.isSubmitting,
|
|
4732
4671
|
sidebarTab,
|
|
4733
4672
|
setSidebarTab,
|
|
4673
|
+
textMode,
|
|
4674
|
+
setTextModeState: setTextMode,
|
|
4734
4675
|
autoFocusChat,
|
|
4735
4676
|
captureMode,
|
|
4736
4677
|
agentId,
|
|
@@ -4743,8 +4684,8 @@ function LiveAgent(props) {
|
|
|
4743
4684
|
modulesError,
|
|
4744
4685
|
refetchModules,
|
|
4745
4686
|
selectModule,
|
|
4687
|
+
hasResolvedModules,
|
|
4746
4688
|
adoptionGoals,
|
|
4747
|
-
dismissAdoptionGoal,
|
|
4748
4689
|
startAdoptionSession
|
|
4749
4690
|
}), [
|
|
4750
4691
|
connection,
|
|
@@ -4756,7 +4697,7 @@ function LiveAgent(props) {
|
|
|
4756
4697
|
error,
|
|
4757
4698
|
errorCode,
|
|
4758
4699
|
startSession,
|
|
4759
|
-
|
|
4700
|
+
pauseSessionAndMinimize,
|
|
4760
4701
|
resumeSession,
|
|
4761
4702
|
disconnect,
|
|
4762
4703
|
isPaused,
|
|
@@ -4784,6 +4725,7 @@ function LiveAgent(props) {
|
|
|
4784
4725
|
auth.logout,
|
|
4785
4726
|
auth.isSubmitting,
|
|
4786
4727
|
sidebarTab,
|
|
4728
|
+
textMode,
|
|
4787
4729
|
autoFocusChat,
|
|
4788
4730
|
captureMode,
|
|
4789
4731
|
agentId,
|
|
@@ -4796,38 +4738,39 @@ function LiveAgent(props) {
|
|
|
4796
4738
|
modulesError,
|
|
4797
4739
|
refetchModules,
|
|
4798
4740
|
selectModule,
|
|
4741
|
+
hasResolvedModules,
|
|
4799
4742
|
adoptionGoals,
|
|
4800
|
-
dismissAdoptionGoal,
|
|
4801
4743
|
startAdoptionSession
|
|
4802
4744
|
]);
|
|
4803
|
-
return /* @__PURE__ */
|
|
4745
|
+
return /* @__PURE__ */ jsx23(LiveAgentContext.Provider, {
|
|
4804
4746
|
value: ctx,
|
|
4805
|
-
children: /* @__PURE__ */
|
|
4747
|
+
children: /* @__PURE__ */ jsxs18(LiveKitRoom, {
|
|
4806
4748
|
serverUrl: connection?.livekitUrl,
|
|
4807
4749
|
token: connection?.token,
|
|
4808
4750
|
connect: shouldConnect,
|
|
4809
4751
|
audio: true,
|
|
4810
4752
|
onDisconnected: handleRoomDisconnected,
|
|
4811
4753
|
children: [
|
|
4812
|
-
connection && /* @__PURE__ */
|
|
4813
|
-
connection && captureMode === "screenshare" && /* @__PURE__ */
|
|
4754
|
+
connection && !textMode && /* @__PURE__ */ jsx23(RoomAudioRenderer, {}),
|
|
4755
|
+
connection && captureMode === "screenshare" && /* @__PURE__ */ jsx23(AutoStartMedia, {
|
|
4814
4756
|
pendingScreenStream
|
|
4815
4757
|
}),
|
|
4816
|
-
connection && captureMode === "auto" && /* @__PURE__ */
|
|
4817
|
-
/* @__PURE__ */
|
|
4758
|
+
connection && captureMode === "auto" && /* @__PURE__ */ jsx23(DomCapture, {}),
|
|
4759
|
+
/* @__PURE__ */ jsxs18(ShadowHost, {
|
|
4818
4760
|
children: [
|
|
4819
|
-
connection && captureMode === "auto" && agentControls?.highlight && /* @__PURE__ */
|
|
4820
|
-
connection && captureMode === "auto" && agentControls?.actions && /* @__PURE__ */
|
|
4821
|
-
/* @__PURE__ */
|
|
4761
|
+
connection && captureMode === "auto" && agentControls?.highlight && /* @__PURE__ */ jsx23(HighlightOverlay, {}),
|
|
4762
|
+
connection && captureMode === "auto" && agentControls?.actions && /* @__PURE__ */ jsx23(PageActionHandler, {}),
|
|
4763
|
+
/* @__PURE__ */ jsxs18("div", {
|
|
4822
4764
|
id: WIDGET_ROOT_ID,
|
|
4823
4765
|
children: [
|
|
4824
|
-
isMinimized && /* @__PURE__ */
|
|
4766
|
+
isMinimized && !showControlBar && /* @__PURE__ */ jsx23(MinimizedBubble, {
|
|
4825
4767
|
welcomeMessage,
|
|
4826
4768
|
welcomeDismissed,
|
|
4827
4769
|
onDismissWelcome: dismissWelcome
|
|
4828
4770
|
}),
|
|
4829
|
-
/* @__PURE__ */
|
|
4830
|
-
/* @__PURE__ */
|
|
4771
|
+
showControlBar && !hideControls && /* @__PURE__ */ jsx23(SessionControlBar, {}),
|
|
4772
|
+
/* @__PURE__ */ jsx23(SidebarTrigger, {}),
|
|
4773
|
+
/* @__PURE__ */ jsx23(Sidebar, {
|
|
4831
4774
|
hideControls,
|
|
4832
4775
|
hideHeader,
|
|
4833
4776
|
startSessionLabel
|
|
@@ -4842,9 +4785,9 @@ function LiveAgent(props) {
|
|
|
4842
4785
|
});
|
|
4843
4786
|
}
|
|
4844
4787
|
// src/hooks/useIsLocalSpeaking.ts
|
|
4845
|
-
import { useIsSpeaking, useLocalParticipant as
|
|
4788
|
+
import { useIsSpeaking, useLocalParticipant as useLocalParticipant8 } from "@livekit/components-react/hooks";
|
|
4846
4789
|
function useIsLocalSpeaking() {
|
|
4847
|
-
const { localParticipant } =
|
|
4790
|
+
const { localParticipant } = useLocalParticipant8();
|
|
4848
4791
|
return useIsSpeaking(localParticipant);
|
|
4849
4792
|
}
|
|
4850
4793
|
export {
|