@skippr/live-agent-sdk 0.43.0 → 0.44.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -4
- package/dist/esm/lib-exports.js +673 -295
- package/dist/skippr-sdk.css +1 -1
- package/dist/skippr-sdk.js +116 -116
- package/dist/types/capture/a11yTree.d.ts +1 -0
- package/dist/types/capture/agentActionSignal.d.ts +4 -0
- package/dist/types/capture/elementRef.d.ts +2 -0
- package/dist/types/components/AgentActivityIndicator.d.ts +7 -0
- package/dist/types/components/PageActionHandler.d.ts +1 -0
- package/dist/types/context/LiveAgentContext.d.ts +1 -0
- package/dist/types/lib/constants.d.ts +1 -0
- package/package.json +1 -1
package/dist/esm/lib-exports.js
CHANGED
|
@@ -8,7 +8,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
|
|
|
8
8
|
|
|
9
9
|
// src/components/LiveAgent.tsx
|
|
10
10
|
import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react";
|
|
11
|
-
import { useCallback as
|
|
11
|
+
import { useCallback as useCallback9, useMemo as useMemo5, useRef as useRef13, useState as useState14 } from "react";
|
|
12
12
|
|
|
13
13
|
// src/context/LiveAgentContext.tsx
|
|
14
14
|
import { createContext } from "react";
|
|
@@ -413,7 +413,12 @@ function useSession({
|
|
|
413
413
|
if (captureMode === "screenshare") {
|
|
414
414
|
screenStream = await requestScreenShare();
|
|
415
415
|
}
|
|
416
|
-
const
|
|
416
|
+
const enabledControls = {};
|
|
417
|
+
if (agentControls?.highlight === true)
|
|
418
|
+
enabledControls.highlight = true;
|
|
419
|
+
if (agentControls?.actions === true)
|
|
420
|
+
enabledControls.actions = true;
|
|
421
|
+
const requestAgentControls = Object.keys(enabledControls).length > 0 ? enabledControls : undefined;
|
|
417
422
|
try {
|
|
418
423
|
let resolvedSessionId = existingSessionId;
|
|
419
424
|
if (!resolvedSessionId) {
|
|
@@ -540,6 +545,7 @@ var PRIVATE_ATTR = "data-skippr-private";
|
|
|
540
545
|
var DOM_SNAPSHOT_TOPIC = "skippr.dom-snapshot";
|
|
541
546
|
var DOM_EVENTS_TOPIC = "skippr.dom-events";
|
|
542
547
|
var HIGHLIGHT_TOPIC = "skippr.highlight";
|
|
548
|
+
var PAGE_ACTIONS_TOPIC = "skippr.page-actions";
|
|
543
549
|
var NAME_MAX_CHARS = 80;
|
|
544
550
|
|
|
545
551
|
// src/lib/agentMode.ts
|
|
@@ -868,6 +874,25 @@ function shouldMaskValue(input) {
|
|
|
868
874
|
return true;
|
|
869
875
|
return false;
|
|
870
876
|
}
|
|
877
|
+
function isDisabled(element) {
|
|
878
|
+
if ("disabled" in element && element.disabled === true) {
|
|
879
|
+
return true;
|
|
880
|
+
}
|
|
881
|
+
return element.getAttribute("aria-disabled") === "true";
|
|
882
|
+
}
|
|
883
|
+
function isActionBlocked(element) {
|
|
884
|
+
if (isDisabled(element))
|
|
885
|
+
return true;
|
|
886
|
+
if (element.tagName === "IFRAME" && isSensitiveIframe(element))
|
|
887
|
+
return true;
|
|
888
|
+
const ownerFrame = element.ownerDocument?.defaultView?.frameElement;
|
|
889
|
+
if (ownerFrame && isSensitiveIframe(ownerFrame))
|
|
890
|
+
return true;
|
|
891
|
+
if ((element.tagName === "INPUT" || element.tagName === "TEXTAREA") && shouldMaskValue(element)) {
|
|
892
|
+
return true;
|
|
893
|
+
}
|
|
894
|
+
return false;
|
|
895
|
+
}
|
|
871
896
|
function escapeAttributeValue(value) {
|
|
872
897
|
return value.replace(/\\/g, "\\\\").replace(/"/g, "\\\"").replace(/[\r\n]+/g, " ");
|
|
873
898
|
}
|
|
@@ -1084,6 +1109,20 @@ function buildAccessibilityTree() {
|
|
|
1084
1109
|
};
|
|
1085
1110
|
}
|
|
1086
1111
|
|
|
1112
|
+
// src/capture/agentActionSignal.ts
|
|
1113
|
+
var isDispatchingAgentAction = false;
|
|
1114
|
+
function runAgentAction(dispatch) {
|
|
1115
|
+
isDispatchingAgentAction = true;
|
|
1116
|
+
try {
|
|
1117
|
+
dispatch();
|
|
1118
|
+
} finally {
|
|
1119
|
+
isDispatchingAgentAction = false;
|
|
1120
|
+
}
|
|
1121
|
+
}
|
|
1122
|
+
function isAgentActionInProgress() {
|
|
1123
|
+
return isDispatchingAgentAction;
|
|
1124
|
+
}
|
|
1125
|
+
|
|
1087
1126
|
// src/capture/domEvents.ts
|
|
1088
1127
|
var MUTATION_DEBOUNCE_MS = 250;
|
|
1089
1128
|
var textEncoder = new TextEncoder;
|
|
@@ -1128,6 +1167,8 @@ function installDomEventListeners(localParticipant, options = {}) {
|
|
|
1128
1167
|
const onClick = (event) => {
|
|
1129
1168
|
if (isInsideWidget(event.target))
|
|
1130
1169
|
return;
|
|
1170
|
+
if (isAgentActionInProgress())
|
|
1171
|
+
return;
|
|
1131
1172
|
if (!(event.target instanceof Element))
|
|
1132
1173
|
return;
|
|
1133
1174
|
const matchedRef = findNearestRef(event.target);
|
|
@@ -1144,6 +1185,8 @@ function installDomEventListeners(localParticipant, options = {}) {
|
|
|
1144
1185
|
const onSubmit = (event) => {
|
|
1145
1186
|
if (isInsideWidget(event.target))
|
|
1146
1187
|
return;
|
|
1188
|
+
if (isAgentActionInProgress())
|
|
1189
|
+
return;
|
|
1147
1190
|
if (!(event.target instanceof HTMLFormElement))
|
|
1148
1191
|
return;
|
|
1149
1192
|
const submittedForm = event.target;
|
|
@@ -1803,29 +1846,8 @@ var __iconNode26 = [
|
|
|
1803
1846
|
var UserPlus = createLucideIcon("user-plus", __iconNode26);
|
|
1804
1847
|
// src/components/HighlightOverlay.tsx
|
|
1805
1848
|
import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef4, useState as useState4 } from "react";
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
var HIGHLIGHT_PADDING = 6;
|
|
1809
|
-
var textDecoder = new TextDecoder;
|
|
1810
|
-
function parseHighlightMessage(payload) {
|
|
1811
|
-
try {
|
|
1812
|
-
const json = JSON.parse(textDecoder.decode(payload));
|
|
1813
|
-
if (!json || typeof json !== "object")
|
|
1814
|
-
return null;
|
|
1815
|
-
if (json.type === "show" && typeof json.ref === "string") {
|
|
1816
|
-
return {
|
|
1817
|
-
type: "show",
|
|
1818
|
-
ref: json.ref,
|
|
1819
|
-
message: typeof json.message === "string" ? json.message : undefined
|
|
1820
|
-
};
|
|
1821
|
-
}
|
|
1822
|
-
if (json.type === "clear")
|
|
1823
|
-
return { type: "clear" };
|
|
1824
|
-
return null;
|
|
1825
|
-
} catch {
|
|
1826
|
-
return null;
|
|
1827
|
-
}
|
|
1828
|
-
}
|
|
1849
|
+
|
|
1850
|
+
// src/capture/elementRef.ts
|
|
1829
1851
|
function safeGetIframeDocument(iframe) {
|
|
1830
1852
|
try {
|
|
1831
1853
|
return iframe.contentDocument;
|
|
@@ -1894,6 +1916,31 @@ function getRectInTopViewport(el) {
|
|
|
1894
1916
|
}
|
|
1895
1917
|
return rect;
|
|
1896
1918
|
}
|
|
1919
|
+
|
|
1920
|
+
// src/components/HighlightOverlay.tsx
|
|
1921
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
1922
|
+
var Z_INDEX = 2147483646;
|
|
1923
|
+
var HIGHLIGHT_PADDING = 6;
|
|
1924
|
+
var textDecoder = new TextDecoder;
|
|
1925
|
+
function parseHighlightMessage(payload) {
|
|
1926
|
+
try {
|
|
1927
|
+
const json = JSON.parse(textDecoder.decode(payload));
|
|
1928
|
+
if (!json || typeof json !== "object")
|
|
1929
|
+
return null;
|
|
1930
|
+
if (json.type === "show" && typeof json.ref === "string") {
|
|
1931
|
+
return {
|
|
1932
|
+
type: "show",
|
|
1933
|
+
ref: json.ref,
|
|
1934
|
+
message: typeof json.message === "string" ? json.message : undefined
|
|
1935
|
+
};
|
|
1936
|
+
}
|
|
1937
|
+
if (json.type === "clear")
|
|
1938
|
+
return { type: "clear" };
|
|
1939
|
+
return null;
|
|
1940
|
+
} catch {
|
|
1941
|
+
return null;
|
|
1942
|
+
}
|
|
1943
|
+
}
|
|
1897
1944
|
function findScrollableAncestor(el) {
|
|
1898
1945
|
const win = el.ownerDocument?.defaultView ?? window;
|
|
1899
1946
|
let node = el.parentElement;
|
|
@@ -2461,10 +2508,340 @@ function MinimizedBubble({
|
|
|
2461
2508
|
});
|
|
2462
2509
|
}
|
|
2463
2510
|
|
|
2511
|
+
// src/components/PageActionHandler.tsx
|
|
2512
|
+
import { useDataChannel as useDataChannel2 } from "@livekit/components-react/hooks";
|
|
2513
|
+
import { useCallback as useCallback6, useEffect as useEffect9, useRef as useRef6, useState as useState6 } from "react";
|
|
2514
|
+
|
|
2515
|
+
// src/components/AgentActivityIndicator.tsx
|
|
2516
|
+
import { useEffect as useEffect8, useRef as useRef5, useState as useState5 } from "react";
|
|
2517
|
+
import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
2518
|
+
var Z_INDEX2 = 2147483646;
|
|
2519
|
+
function centerOf(element) {
|
|
2520
|
+
const rect = getRectInTopViewport(element);
|
|
2521
|
+
return { left: rect.left + rect.width / 2, top: rect.top + rect.height / 2 };
|
|
2522
|
+
}
|
|
2523
|
+
function AgentActivityIndicator({ target }) {
|
|
2524
|
+
const [position, setPosition] = useState5(null);
|
|
2525
|
+
const frameRef = useRef5(null);
|
|
2526
|
+
useEffect8(() => {
|
|
2527
|
+
if (!target || !target.element.isConnected) {
|
|
2528
|
+
setPosition(null);
|
|
2529
|
+
return;
|
|
2530
|
+
}
|
|
2531
|
+
const update = () => {
|
|
2532
|
+
frameRef.current = null;
|
|
2533
|
+
if (!target.element.isConnected)
|
|
2534
|
+
return;
|
|
2535
|
+
setPosition(centerOf(target.element));
|
|
2536
|
+
};
|
|
2537
|
+
update();
|
|
2538
|
+
const schedule = () => {
|
|
2539
|
+
if (frameRef.current !== null)
|
|
2540
|
+
return;
|
|
2541
|
+
frameRef.current = window.requestAnimationFrame(update);
|
|
2542
|
+
};
|
|
2543
|
+
window.addEventListener("scroll", schedule, { capture: true, passive: true });
|
|
2544
|
+
window.addEventListener("resize", schedule, { passive: true });
|
|
2545
|
+
return () => {
|
|
2546
|
+
window.removeEventListener("scroll", schedule, { capture: true });
|
|
2547
|
+
window.removeEventListener("resize", schedule);
|
|
2548
|
+
if (frameRef.current !== null) {
|
|
2549
|
+
window.cancelAnimationFrame(frameRef.current);
|
|
2550
|
+
frameRef.current = null;
|
|
2551
|
+
}
|
|
2552
|
+
};
|
|
2553
|
+
}, [target]);
|
|
2554
|
+
if (!target || !position)
|
|
2555
|
+
return null;
|
|
2556
|
+
const containerStyle = {
|
|
2557
|
+
position: "fixed",
|
|
2558
|
+
left: `${position.left}px`,
|
|
2559
|
+
top: `${position.top}px`,
|
|
2560
|
+
pointerEvents: "none",
|
|
2561
|
+
zIndex: Z_INDEX2,
|
|
2562
|
+
transition: "left 0.45s cubic-bezier(0.22, 1, 0.36, 1), top 0.45s cubic-bezier(0.22, 1, 0.36, 1)"
|
|
2563
|
+
};
|
|
2564
|
+
return /* @__PURE__ */ jsx5("div", {
|
|
2565
|
+
"data-skippr-private": "true",
|
|
2566
|
+
style: containerStyle,
|
|
2567
|
+
children: /* @__PURE__ */ jsxs5("div", {
|
|
2568
|
+
className: "skippr:relative",
|
|
2569
|
+
children: [
|
|
2570
|
+
/* @__PURE__ */ jsx5(MousePointer2, {
|
|
2571
|
+
"aria-hidden": "true",
|
|
2572
|
+
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",
|
|
2573
|
+
fill: "currentColor"
|
|
2574
|
+
}),
|
|
2575
|
+
/* @__PURE__ */ jsx5("div", {
|
|
2576
|
+
role: "status",
|
|
2577
|
+
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)]",
|
|
2578
|
+
children: /* @__PURE__ */ jsx5("span", {
|
|
2579
|
+
className: "skippr:text-[11px] skippr:font-medium skippr:text-white skippr:whitespace-nowrap",
|
|
2580
|
+
children: target.label
|
|
2581
|
+
})
|
|
2582
|
+
})
|
|
2583
|
+
]
|
|
2584
|
+
})
|
|
2585
|
+
});
|
|
2586
|
+
}
|
|
2587
|
+
|
|
2588
|
+
// src/components/PageActionHandler.tsx
|
|
2589
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
2590
|
+
var INDICATOR_LINGER_MS = 1400;
|
|
2591
|
+
var CURSOR_LEAD_BEFORE_ACTION_MS = 350;
|
|
2592
|
+
var SETTLE_MS = 250;
|
|
2593
|
+
var textDecoder2 = new TextDecoder;
|
|
2594
|
+
function parsePageAction(payload) {
|
|
2595
|
+
try {
|
|
2596
|
+
const json = JSON.parse(textDecoder2.decode(payload));
|
|
2597
|
+
if (!json || typeof json !== "object")
|
|
2598
|
+
return null;
|
|
2599
|
+
switch (json.type) {
|
|
2600
|
+
case "click":
|
|
2601
|
+
return typeof json.ref === "string" ? { type: "click", ref: json.ref } : null;
|
|
2602
|
+
case "fill":
|
|
2603
|
+
return typeof json.ref === "string" && typeof json.value === "string" ? { type: "fill", ref: json.ref, value: json.value } : null;
|
|
2604
|
+
case "select":
|
|
2605
|
+
return typeof json.ref === "string" && typeof json.value === "string" ? { type: "select", ref: json.ref, value: json.value } : null;
|
|
2606
|
+
case "scroll":
|
|
2607
|
+
return typeof json.ref === "string" ? { type: "scroll", ref: json.ref } : null;
|
|
2608
|
+
case "navigate":
|
|
2609
|
+
return typeof json.url === "string" ? { type: "navigate", url: json.url } : null;
|
|
2610
|
+
default:
|
|
2611
|
+
return null;
|
|
2612
|
+
}
|
|
2613
|
+
} catch {
|
|
2614
|
+
return null;
|
|
2615
|
+
}
|
|
2616
|
+
}
|
|
2617
|
+
function isSameOriginHttpUrl(url) {
|
|
2618
|
+
try {
|
|
2619
|
+
const parsed = new URL(url);
|
|
2620
|
+
if (parsed.protocol !== "http:" && parsed.protocol !== "https:")
|
|
2621
|
+
return false;
|
|
2622
|
+
return parsed.origin === window.location.origin;
|
|
2623
|
+
} catch {
|
|
2624
|
+
return false;
|
|
2625
|
+
}
|
|
2626
|
+
}
|
|
2627
|
+
function isVisible2(element) {
|
|
2628
|
+
const rect = element.getBoundingClientRect();
|
|
2629
|
+
if (rect.width === 0 && rect.height === 0)
|
|
2630
|
+
return false;
|
|
2631
|
+
const style = element.ownerDocument.defaultView?.getComputedStyle(element);
|
|
2632
|
+
if (!style)
|
|
2633
|
+
return true;
|
|
2634
|
+
return style.visibility !== "hidden" && style.display !== "none";
|
|
2635
|
+
}
|
|
2636
|
+
function setReactCompatibleValue(element, value) {
|
|
2637
|
+
const prototype = element instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
|
|
2638
|
+
const setter = Object.getOwnPropertyDescriptor(prototype, "value")?.set;
|
|
2639
|
+
if (setter) {
|
|
2640
|
+
setter.call(element, value);
|
|
2641
|
+
} else {
|
|
2642
|
+
element.value = value;
|
|
2643
|
+
}
|
|
2644
|
+
element.dispatchEvent(new Event("input", { bubbles: true }));
|
|
2645
|
+
element.dispatchEvent(new Event("change", { bubbles: true }));
|
|
2646
|
+
}
|
|
2647
|
+
function performFill(element, value) {
|
|
2648
|
+
if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
|
|
2649
|
+
element.focus();
|
|
2650
|
+
setReactCompatibleValue(element, value);
|
|
2651
|
+
}
|
|
2652
|
+
}
|
|
2653
|
+
function performSelect(element, value) {
|
|
2654
|
+
if (element instanceof HTMLSelectElement) {
|
|
2655
|
+
const match = Array.from(element.options).find((option) => option.value === value || option.label === value || option.text === value);
|
|
2656
|
+
if (match) {
|
|
2657
|
+
element.value = match.value;
|
|
2658
|
+
element.dispatchEvent(new Event("change", { bubbles: true }));
|
|
2659
|
+
}
|
|
2660
|
+
return;
|
|
2661
|
+
}
|
|
2662
|
+
if (element instanceof HTMLInputElement && (element.type === "checkbox" || element.type === "radio")) {
|
|
2663
|
+
const shouldCheck = value !== "false" && value !== "";
|
|
2664
|
+
if (element.checked !== shouldCheck)
|
|
2665
|
+
element.click();
|
|
2666
|
+
}
|
|
2667
|
+
}
|
|
2668
|
+
var INTERACTIVE_SELECTOR = 'button, a[href], [role="button"], [role="link"], input, select, [onclick]';
|
|
2669
|
+
function resolveClickTarget(element) {
|
|
2670
|
+
if (element.matches(INTERACTIVE_SELECTOR))
|
|
2671
|
+
return element;
|
|
2672
|
+
const ancestor = element.closest(INTERACTIVE_SELECTOR);
|
|
2673
|
+
if (ancestor)
|
|
2674
|
+
return ancestor;
|
|
2675
|
+
const descendants = element.querySelectorAll(INTERACTIVE_SELECTOR);
|
|
2676
|
+
const onlyDescendant = descendants.length === 1 ? descendants[0] : null;
|
|
2677
|
+
return onlyDescendant ?? element;
|
|
2678
|
+
}
|
|
2679
|
+
function performClick(element) {
|
|
2680
|
+
const rect = element.getBoundingClientRect();
|
|
2681
|
+
const clientX = rect.left + rect.width / 2;
|
|
2682
|
+
const clientY = rect.top + rect.height / 2;
|
|
2683
|
+
const base = { bubbles: true, cancelable: true, composed: true, clientX, clientY, button: 0 };
|
|
2684
|
+
if (typeof element.focus === "function") {
|
|
2685
|
+
try {
|
|
2686
|
+
element.focus({ preventScroll: true });
|
|
2687
|
+
} catch {}
|
|
2688
|
+
}
|
|
2689
|
+
try {
|
|
2690
|
+
element.dispatchEvent(new PointerEvent("pointerdown", { ...base, pointerId: 1, isPrimary: true }));
|
|
2691
|
+
element.dispatchEvent(new MouseEvent("mousedown", base));
|
|
2692
|
+
element.dispatchEvent(new PointerEvent("pointerup", { ...base, pointerId: 1, isPrimary: true }));
|
|
2693
|
+
element.dispatchEvent(new MouseEvent("mouseup", base));
|
|
2694
|
+
} catch {}
|
|
2695
|
+
element.click();
|
|
2696
|
+
}
|
|
2697
|
+
function performAction(action, element) {
|
|
2698
|
+
switch (action.type) {
|
|
2699
|
+
case "click": {
|
|
2700
|
+
const target = resolveClickTarget(element);
|
|
2701
|
+
target.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
2702
|
+
performClick(target);
|
|
2703
|
+
return;
|
|
2704
|
+
}
|
|
2705
|
+
case "fill":
|
|
2706
|
+
element.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
2707
|
+
performFill(element, action.value);
|
|
2708
|
+
return;
|
|
2709
|
+
case "select":
|
|
2710
|
+
element.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
2711
|
+
performSelect(element, action.value);
|
|
2712
|
+
return;
|
|
2713
|
+
case "scroll":
|
|
2714
|
+
element.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
2715
|
+
return;
|
|
2716
|
+
}
|
|
2717
|
+
}
|
|
2718
|
+
function labelFor(action) {
|
|
2719
|
+
switch (action.type) {
|
|
2720
|
+
case "click":
|
|
2721
|
+
return "Clicking…";
|
|
2722
|
+
case "fill":
|
|
2723
|
+
return "Typing…";
|
|
2724
|
+
case "select":
|
|
2725
|
+
return "Selecting…";
|
|
2726
|
+
case "scroll":
|
|
2727
|
+
return "Scrolling…";
|
|
2728
|
+
case "navigate":
|
|
2729
|
+
return "Navigating…";
|
|
2730
|
+
}
|
|
2731
|
+
}
|
|
2732
|
+
function PageActionHandler() {
|
|
2733
|
+
const [activity, setActivity] = useState6(null);
|
|
2734
|
+
const mountedRef = useRef6(true);
|
|
2735
|
+
const queueRef = useRef6([]);
|
|
2736
|
+
const drainingRef = useRef6(false);
|
|
2737
|
+
const timersRef = useRef6(new Set);
|
|
2738
|
+
const wakesRef = useRef6(new Set);
|
|
2739
|
+
const indicatorTimerRef = useRef6(null);
|
|
2740
|
+
const sleep = useCallback6((ms) => {
|
|
2741
|
+
return new Promise((resolve) => {
|
|
2742
|
+
const wake = () => {
|
|
2743
|
+
wakesRef.current.delete(wake);
|
|
2744
|
+
resolve();
|
|
2745
|
+
};
|
|
2746
|
+
wakesRef.current.add(wake);
|
|
2747
|
+
const timer = setTimeout(() => {
|
|
2748
|
+
timersRef.current.delete(timer);
|
|
2749
|
+
wake();
|
|
2750
|
+
}, ms);
|
|
2751
|
+
timersRef.current.add(timer);
|
|
2752
|
+
});
|
|
2753
|
+
}, []);
|
|
2754
|
+
const showActivity = useCallback6((target) => {
|
|
2755
|
+
if (indicatorTimerRef.current) {
|
|
2756
|
+
clearTimeout(indicatorTimerRef.current);
|
|
2757
|
+
indicatorTimerRef.current = null;
|
|
2758
|
+
}
|
|
2759
|
+
setActivity(target);
|
|
2760
|
+
if (target) {
|
|
2761
|
+
const timer = setTimeout(() => {
|
|
2762
|
+
indicatorTimerRef.current = null;
|
|
2763
|
+
if (mountedRef.current)
|
|
2764
|
+
setActivity(null);
|
|
2765
|
+
}, INDICATOR_LINGER_MS);
|
|
2766
|
+
indicatorTimerRef.current = timer;
|
|
2767
|
+
}
|
|
2768
|
+
}, []);
|
|
2769
|
+
const processOne = useCallback6(async (action) => {
|
|
2770
|
+
if (action.type === "navigate") {
|
|
2771
|
+
queueRef.current.length = 0;
|
|
2772
|
+
if (!isSameOriginHttpUrl(action.url))
|
|
2773
|
+
return;
|
|
2774
|
+
showActivity({ element: document.body, label: labelFor(action) });
|
|
2775
|
+
await sleep(CURSOR_LEAD_BEFORE_ACTION_MS);
|
|
2776
|
+
if (!mountedRef.current)
|
|
2777
|
+
return;
|
|
2778
|
+
window.location.assign(action.url);
|
|
2779
|
+
return;
|
|
2780
|
+
}
|
|
2781
|
+
const element = findElementByRef(action.ref);
|
|
2782
|
+
if (!element || !element.isConnected || !isVisible2(element))
|
|
2783
|
+
return;
|
|
2784
|
+
if (isActionBlocked(element))
|
|
2785
|
+
return;
|
|
2786
|
+
if (action.type === "click" && isActionBlocked(resolveClickTarget(element)))
|
|
2787
|
+
return;
|
|
2788
|
+
showActivity({ element, label: labelFor(action) });
|
|
2789
|
+
await sleep(CURSOR_LEAD_BEFORE_ACTION_MS);
|
|
2790
|
+
if (!mountedRef.current || !element.isConnected)
|
|
2791
|
+
return;
|
|
2792
|
+
runAgentAction(() => performAction(action, element));
|
|
2793
|
+
await sleep(SETTLE_MS);
|
|
2794
|
+
}, [showActivity, sleep]);
|
|
2795
|
+
const drain = useCallback6(async () => {
|
|
2796
|
+
if (drainingRef.current)
|
|
2797
|
+
return;
|
|
2798
|
+
drainingRef.current = true;
|
|
2799
|
+
try {
|
|
2800
|
+
while (mountedRef.current && queueRef.current.length > 0) {
|
|
2801
|
+
const action = queueRef.current.shift();
|
|
2802
|
+
if (!action)
|
|
2803
|
+
break;
|
|
2804
|
+
await processOne(action);
|
|
2805
|
+
}
|
|
2806
|
+
} finally {
|
|
2807
|
+
drainingRef.current = false;
|
|
2808
|
+
}
|
|
2809
|
+
}, [processOne]);
|
|
2810
|
+
const onMessage = useCallback6((msg) => {
|
|
2811
|
+
const action = parsePageAction(msg.payload);
|
|
2812
|
+
if (!action)
|
|
2813
|
+
return;
|
|
2814
|
+
queueRef.current.push(action);
|
|
2815
|
+
drain();
|
|
2816
|
+
}, [drain]);
|
|
2817
|
+
useEffect9(() => {
|
|
2818
|
+
mountedRef.current = true;
|
|
2819
|
+
drainingRef.current = false;
|
|
2820
|
+
return () => {
|
|
2821
|
+
mountedRef.current = false;
|
|
2822
|
+
for (const timer of timersRef.current)
|
|
2823
|
+
clearTimeout(timer);
|
|
2824
|
+
timersRef.current.clear();
|
|
2825
|
+
if (indicatorTimerRef.current) {
|
|
2826
|
+
clearTimeout(indicatorTimerRef.current);
|
|
2827
|
+
indicatorTimerRef.current = null;
|
|
2828
|
+
}
|
|
2829
|
+
for (const wake of wakesRef.current)
|
|
2830
|
+
wake();
|
|
2831
|
+
wakesRef.current.clear();
|
|
2832
|
+
queueRef.current.length = 0;
|
|
2833
|
+
};
|
|
2834
|
+
}, []);
|
|
2835
|
+
useDataChannel2(PAGE_ACTIONS_TOPIC, onMessage);
|
|
2836
|
+
return /* @__PURE__ */ jsx6(AgentActivityIndicator, {
|
|
2837
|
+
target: activity
|
|
2838
|
+
});
|
|
2839
|
+
}
|
|
2840
|
+
|
|
2464
2841
|
// src/components/ShadowHost.tsx
|
|
2465
|
-
import { useLayoutEffect, useRef as
|
|
2842
|
+
import { useLayoutEffect, useRef as useRef7, useState as useState7 } from "react";
|
|
2466
2843
|
import { createPortal } from "react-dom";
|
|
2467
|
-
import { jsx as
|
|
2844
|
+
import { jsx as jsx7, Fragment as Fragment3 } from "react/jsx-runtime";
|
|
2468
2845
|
var PROPERTIES_STYLE_ID = "skippr-tw-properties";
|
|
2469
2846
|
var PROPERTY_RULE = /@property\s+[^{]+\{[^}]*\}/g;
|
|
2470
2847
|
function hoistTailwindProperties(css) {
|
|
@@ -2479,10 +2856,10 @@ function hoistTailwindProperties(css) {
|
|
|
2479
2856
|
return css.replace(PROPERTY_RULE, "");
|
|
2480
2857
|
}
|
|
2481
2858
|
function ShadowHost({ children }) {
|
|
2482
|
-
const hostRef =
|
|
2483
|
-
const [shadowRoot, setShadowRoot] =
|
|
2859
|
+
const hostRef = useRef7(null);
|
|
2860
|
+
const [shadowRoot, setShadowRoot] = useState7(null);
|
|
2484
2861
|
const css = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
|
2485
|
-
@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-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;--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}}}@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-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-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-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-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-\\[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-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\\: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-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\\:pb-5{padding-bottom:calc(var(--skippr-spacing)*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-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{color:var(--skippr-color-white)}.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_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\\: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\\: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\\: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-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}.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-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-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}@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}@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}}`;
|
|
2862
|
+
@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-\\[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\\: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\\:pb-5{padding-bottom:calc(var(--skippr-spacing)*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{color:var(--skippr-color-white)}.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\\: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\\: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-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}.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}}`;
|
|
2486
2863
|
useLayoutEffect(() => {
|
|
2487
2864
|
const host = hostRef.current;
|
|
2488
2865
|
if (!host || !css)
|
|
@@ -2497,17 +2874,17 @@ function ShadowHost({ children }) {
|
|
|
2497
2874
|
setShadowRoot(root);
|
|
2498
2875
|
}, [css]);
|
|
2499
2876
|
if (!css)
|
|
2500
|
-
return /* @__PURE__ */
|
|
2877
|
+
return /* @__PURE__ */ jsx7(Fragment3, {
|
|
2501
2878
|
children
|
|
2502
2879
|
});
|
|
2503
|
-
return /* @__PURE__ */
|
|
2880
|
+
return /* @__PURE__ */ jsx7("div", {
|
|
2504
2881
|
ref: hostRef,
|
|
2505
2882
|
children: shadowRoot && createPortal(children, shadowRoot)
|
|
2506
2883
|
});
|
|
2507
2884
|
}
|
|
2508
2885
|
|
|
2509
2886
|
// src/components/Sidebar.tsx
|
|
2510
|
-
import { useContext as useContext5, useEffect as
|
|
2887
|
+
import { useContext as useContext5, useEffect as useEffect18 } from "react";
|
|
2511
2888
|
|
|
2512
2889
|
// src/hooks/useCombinedMessages.ts
|
|
2513
2890
|
import { useContext as useContext3, useMemo as useMemo4 } from "react";
|
|
@@ -2596,15 +2973,15 @@ function useCombinedMessages() {
|
|
|
2596
2973
|
}
|
|
2597
2974
|
|
|
2598
2975
|
// src/hooks/usePhaseUpdates.ts
|
|
2599
|
-
import { useCallback as
|
|
2976
|
+
import { useCallback as useCallback7, useContext as useContext4, useEffect as useEffect11 } from "react";
|
|
2600
2977
|
|
|
2601
2978
|
// src/hooks/useAgentState.ts
|
|
2602
2979
|
import { useRemoteParticipants } from "@livekit/components-react/hooks";
|
|
2603
|
-
import { useEffect as
|
|
2980
|
+
import { useEffect as useEffect10, useState as useState8 } from "react";
|
|
2604
2981
|
function useAgentState(attributeKey, parse, initial) {
|
|
2605
|
-
const [value, setValue] =
|
|
2982
|
+
const [value, setValue] = useState8(initial);
|
|
2606
2983
|
const remoteParticipants = useRemoteParticipants();
|
|
2607
|
-
|
|
2984
|
+
useEffect10(() => {
|
|
2608
2985
|
const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
|
|
2609
2986
|
if (agentParticipant) {
|
|
2610
2987
|
const attr = agentParticipant.attributes?.[attributeKey];
|
|
@@ -2650,10 +3027,10 @@ function parsePhases(json) {
|
|
|
2650
3027
|
return null;
|
|
2651
3028
|
}
|
|
2652
3029
|
function usePhaseUpdates() {
|
|
2653
|
-
const parse =
|
|
3030
|
+
const parse = useCallback7(parsePhases, []);
|
|
2654
3031
|
const livePhases = useAgentState("phases", parse, []);
|
|
2655
3032
|
const ctx = useContext4(LiveAgentContext);
|
|
2656
|
-
|
|
3033
|
+
useEffect11(() => {
|
|
2657
3034
|
if (livePhases.length > 0)
|
|
2658
3035
|
ctx?.setPhasesSnapshot(livePhases);
|
|
2659
3036
|
}, [livePhases, ctx?.setPhasesSnapshot]);
|
|
@@ -2662,7 +3039,7 @@ function usePhaseUpdates() {
|
|
|
2662
3039
|
}
|
|
2663
3040
|
|
|
2664
3041
|
// src/hooks/useSessionRemaining.ts
|
|
2665
|
-
import { useEffect as
|
|
3042
|
+
import { useEffect as useEffect12, useRef as useRef8, useState as useState9 } from "react";
|
|
2666
3043
|
|
|
2667
3044
|
// src/lib/format.ts
|
|
2668
3045
|
function formatTime(seconds) {
|
|
@@ -2678,9 +3055,9 @@ function parseNumber(s) {
|
|
|
2678
3055
|
// src/hooks/useSessionRemaining.ts
|
|
2679
3056
|
function useSessionRemaining() {
|
|
2680
3057
|
const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
|
|
2681
|
-
const endTimeRef =
|
|
2682
|
-
const [remaining, setRemaining] =
|
|
2683
|
-
|
|
3058
|
+
const endTimeRef = useRef8(null);
|
|
3059
|
+
const [remaining, setRemaining] = useState9(null);
|
|
3060
|
+
useEffect12(() => {
|
|
2684
3061
|
if (maxCallDuration === null || endTimeRef.current !== null)
|
|
2685
3062
|
return;
|
|
2686
3063
|
const endTime = Date.now() + maxCallDuration * 1000;
|
|
@@ -2697,10 +3074,10 @@ function useSessionRemaining() {
|
|
|
2697
3074
|
}
|
|
2698
3075
|
|
|
2699
3076
|
// src/hooks/useElapsedSeconds.ts
|
|
2700
|
-
import { useEffect as
|
|
3077
|
+
import { useEffect as useEffect13, useState as useState10 } from "react";
|
|
2701
3078
|
function useElapsedSeconds(isRunning) {
|
|
2702
|
-
const [elapsed, setElapsed] =
|
|
2703
|
-
|
|
3079
|
+
const [elapsed, setElapsed] = useState10(0);
|
|
3080
|
+
useEffect13(() => {
|
|
2704
3081
|
if (!isRunning) {
|
|
2705
3082
|
setElapsed(0);
|
|
2706
3083
|
return;
|
|
@@ -2716,50 +3093,50 @@ function useElapsedSeconds(isRunning) {
|
|
|
2716
3093
|
}
|
|
2717
3094
|
|
|
2718
3095
|
// src/components/ChatHeader.tsx
|
|
2719
|
-
import { jsx as
|
|
3096
|
+
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
2720
3097
|
function ChatHeader() {
|
|
2721
3098
|
const { isConnected, minimizePanel, minimizable } = useLiveAgent();
|
|
2722
3099
|
const elapsed = useElapsedSeconds(isConnected);
|
|
2723
|
-
return /* @__PURE__ */
|
|
3100
|
+
return /* @__PURE__ */ jsxs6("header", {
|
|
2724
3101
|
className: "skippr:sticky skippr:top-0 skippr:z-10 skippr:flex skippr:shrink-0 skippr:items-center skippr:justify-between skippr:border-b skippr:border-border skippr:bg-primary skippr:px-4 skippr:py-3",
|
|
2725
3102
|
children: [
|
|
2726
|
-
/* @__PURE__ */
|
|
3103
|
+
/* @__PURE__ */ jsx8("p", {
|
|
2727
3104
|
className: "skippr:text-sm skippr:font-semibold skippr:text-primary-foreground",
|
|
2728
3105
|
children: "Skippr"
|
|
2729
3106
|
}),
|
|
2730
|
-
/* @__PURE__ */
|
|
3107
|
+
/* @__PURE__ */ jsxs6("div", {
|
|
2731
3108
|
className: "skippr:flex skippr:items-center skippr:gap-2",
|
|
2732
3109
|
children: [
|
|
2733
|
-
isConnected && /* @__PURE__ */
|
|
3110
|
+
isConnected && /* @__PURE__ */ jsxs6("div", {
|
|
2734
3111
|
className: "skippr:flex skippr:items-center skippr:gap-1.5 skippr:rounded-full skippr:bg-primary-foreground/20 skippr:px-2.5 skippr:py-1",
|
|
2735
3112
|
children: [
|
|
2736
|
-
/* @__PURE__ */
|
|
3113
|
+
/* @__PURE__ */ jsxs6("span", {
|
|
2737
3114
|
className: "skippr:relative skippr:flex skippr:size-1.5",
|
|
2738
3115
|
children: [
|
|
2739
|
-
/* @__PURE__ */
|
|
3116
|
+
/* @__PURE__ */ jsx8("span", {
|
|
2740
3117
|
className: "skippr:absolute skippr:inline-flex skippr:h-full skippr:w-full skippr:animate-ping skippr:rounded-full skippr:bg-red-400 skippr:opacity-75"
|
|
2741
3118
|
}),
|
|
2742
|
-
/* @__PURE__ */
|
|
3119
|
+
/* @__PURE__ */ jsx8("span", {
|
|
2743
3120
|
className: "skippr:relative skippr:inline-flex skippr:size-1.5 skippr:rounded-full skippr:bg-red-400"
|
|
2744
3121
|
})
|
|
2745
3122
|
]
|
|
2746
3123
|
}),
|
|
2747
|
-
/* @__PURE__ */
|
|
3124
|
+
/* @__PURE__ */ jsx8("span", {
|
|
2748
3125
|
className: "skippr:text-[10px] skippr:font-medium skippr:text-primary-foreground",
|
|
2749
3126
|
children: "REC"
|
|
2750
3127
|
}),
|
|
2751
|
-
/* @__PURE__ */
|
|
3128
|
+
/* @__PURE__ */ jsx8("span", {
|
|
2752
3129
|
className: "skippr:text-[10px] skippr:font-mono skippr:text-primary-foreground",
|
|
2753
3130
|
children: formatTime(elapsed)
|
|
2754
3131
|
})
|
|
2755
3132
|
]
|
|
2756
3133
|
}),
|
|
2757
|
-
minimizable && /* @__PURE__ */
|
|
3134
|
+
minimizable && /* @__PURE__ */ jsx8("button", {
|
|
2758
3135
|
type: "button",
|
|
2759
3136
|
onClick: minimizePanel,
|
|
2760
3137
|
"aria-label": "Minimize",
|
|
2761
3138
|
className: "skippr:flex skippr:size-6 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-md skippr:text-primary-foreground/70 skippr:transition-colors skippr:hover:bg-primary-foreground/10 skippr:hover:text-primary-foreground",
|
|
2762
|
-
children: /* @__PURE__ */
|
|
3139
|
+
children: /* @__PURE__ */ jsx8(Minimize2, {
|
|
2763
3140
|
className: "skippr:size-3.5"
|
|
2764
3141
|
})
|
|
2765
3142
|
})
|
|
@@ -2770,26 +3147,26 @@ function ChatHeader() {
|
|
|
2770
3147
|
}
|
|
2771
3148
|
|
|
2772
3149
|
// src/components/LoadingDots.tsx
|
|
2773
|
-
import { jsx as
|
|
3150
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
2774
3151
|
function LoadingDots({ label }) {
|
|
2775
|
-
return /* @__PURE__ */
|
|
3152
|
+
return /* @__PURE__ */ jsxs7("div", {
|
|
2776
3153
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:py-4",
|
|
2777
3154
|
children: [
|
|
2778
|
-
/* @__PURE__ */
|
|
3155
|
+
/* @__PURE__ */ jsxs7("div", {
|
|
2779
3156
|
className: "skippr:flex skippr:gap-1",
|
|
2780
3157
|
children: [
|
|
2781
|
-
/* @__PURE__ */
|
|
3158
|
+
/* @__PURE__ */ jsx9("span", {
|
|
2782
3159
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
2783
3160
|
}),
|
|
2784
|
-
/* @__PURE__ */
|
|
3161
|
+
/* @__PURE__ */ jsx9("span", {
|
|
2785
3162
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
2786
3163
|
}),
|
|
2787
|
-
/* @__PURE__ */
|
|
3164
|
+
/* @__PURE__ */ jsx9("span", {
|
|
2788
3165
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
2789
3166
|
})
|
|
2790
3167
|
]
|
|
2791
3168
|
}),
|
|
2792
|
-
/* @__PURE__ */
|
|
3169
|
+
/* @__PURE__ */ jsx9("p", {
|
|
2793
3170
|
className: "skippr:text-xs skippr:text-muted-foreground",
|
|
2794
3171
|
children: label
|
|
2795
3172
|
})
|
|
@@ -2798,11 +3175,11 @@ function LoadingDots({ label }) {
|
|
|
2798
3175
|
}
|
|
2799
3176
|
|
|
2800
3177
|
// src/components/LoginFlow.tsx
|
|
2801
|
-
import { useCallback as
|
|
3178
|
+
import { useCallback as useCallback8, useEffect as useEffect14, useRef as useRef9, useState as useState11 } from "react";
|
|
2802
3179
|
|
|
2803
3180
|
// src/components/ui/button.tsx
|
|
2804
3181
|
import { forwardRef as forwardRef3 } from "react";
|
|
2805
|
-
import { jsx as
|
|
3182
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
2806
3183
|
var variantClasses = {
|
|
2807
3184
|
default: "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90",
|
|
2808
3185
|
destructive: "skippr:bg-destructive skippr:text-white skippr:hover:bg-destructive/90",
|
|
@@ -2821,7 +3198,7 @@ var sizeClasses = {
|
|
|
2821
3198
|
"icon-lg": "skippr:size-10"
|
|
2822
3199
|
};
|
|
2823
3200
|
var Button = forwardRef3(({ className, variant = "default", size = "default", ...props }, ref) => {
|
|
2824
|
-
return /* @__PURE__ */
|
|
3201
|
+
return /* @__PURE__ */ jsx10("button", {
|
|
2825
3202
|
className: cn("skippr:inline-flex skippr:items-center skippr:justify-center skippr:gap-2 skippr:whitespace-nowrap skippr:rounded-md skippr:text-sm skippr:font-medium skippr:ring-offset-background skippr:transition-all skippr:cursor-pointer skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-ring skippr:focus-visible:ring-offset-2 skippr:disabled:pointer-events-none skippr:disabled:opacity-50 skippr:shrink-0 skippr:[&_svg]:pointer-events-none skippr:[&_svg:not([class*='size-'])]:size-4 skippr:[&_svg]:shrink-0", variantClasses[variant], sizeClasses[size], className),
|
|
2826
3203
|
ref,
|
|
2827
3204
|
...props
|
|
@@ -2830,28 +3207,28 @@ var Button = forwardRef3(({ className, variant = "default", size = "default", ..
|
|
|
2830
3207
|
Button.displayName = "Button";
|
|
2831
3208
|
|
|
2832
3209
|
// src/components/LoginFlow.tsx
|
|
2833
|
-
import { jsx as
|
|
3210
|
+
import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
2834
3211
|
var OTP_LENGTH = 6;
|
|
2835
3212
|
var DIGIT_KEYS = ["d0", "d1", "d2", "d3", "d4", "d5"];
|
|
2836
3213
|
function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
2837
|
-
const [step, setStep] =
|
|
2838
|
-
const [email, setEmail] =
|
|
2839
|
-
const handleRequestOtp =
|
|
3214
|
+
const [step, setStep] = useState11("email");
|
|
3215
|
+
const [email, setEmail] = useState11("");
|
|
3216
|
+
const handleRequestOtp = useCallback8(async (emailValue) => {
|
|
2840
3217
|
const success = await requestOtp(emailValue);
|
|
2841
3218
|
if (success)
|
|
2842
3219
|
setStep("otp");
|
|
2843
3220
|
}, [requestOtp]);
|
|
2844
|
-
const handleVerifyOtp =
|
|
3221
|
+
const handleVerifyOtp = useCallback8(async (code) => {
|
|
2845
3222
|
await verifyOtp(email, code);
|
|
2846
3223
|
}, [verifyOtp, email]);
|
|
2847
|
-
const handleBack =
|
|
3224
|
+
const handleBack = useCallback8(() => {
|
|
2848
3225
|
setStep("email");
|
|
2849
3226
|
}, []);
|
|
2850
|
-
const handleResend =
|
|
3227
|
+
const handleResend = useCallback8(async () => {
|
|
2851
3228
|
await requestOtp(email);
|
|
2852
3229
|
}, [requestOtp, email]);
|
|
2853
3230
|
if (step === "otp") {
|
|
2854
|
-
return /* @__PURE__ */
|
|
3231
|
+
return /* @__PURE__ */ jsx11(OtpStep, {
|
|
2855
3232
|
email,
|
|
2856
3233
|
onSubmit: handleVerifyOtp,
|
|
2857
3234
|
onResend: handleResend,
|
|
@@ -2860,7 +3237,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
|
2860
3237
|
isSubmitting
|
|
2861
3238
|
});
|
|
2862
3239
|
}
|
|
2863
|
-
return /* @__PURE__ */
|
|
3240
|
+
return /* @__PURE__ */ jsx11(EmailStep, {
|
|
2864
3241
|
email,
|
|
2865
3242
|
onEmailChange: setEmail,
|
|
2866
3243
|
onSubmit: handleRequestOtp,
|
|
@@ -2874,30 +3251,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
2874
3251
|
if (email.trim())
|
|
2875
3252
|
onSubmit(email.trim());
|
|
2876
3253
|
}
|
|
2877
|
-
return /* @__PURE__ */
|
|
3254
|
+
return /* @__PURE__ */ jsxs8("div", {
|
|
2878
3255
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
|
|
2879
3256
|
children: [
|
|
2880
|
-
/* @__PURE__ */
|
|
3257
|
+
/* @__PURE__ */ jsxs8("div", {
|
|
2881
3258
|
className: "skippr:mb-4 skippr:text-center",
|
|
2882
3259
|
children: [
|
|
2883
|
-
/* @__PURE__ */
|
|
3260
|
+
/* @__PURE__ */ jsx11(Mail, {
|
|
2884
3261
|
className: "skippr:mx-auto skippr:mb-2 skippr:size-6 skippr:text-primary"
|
|
2885
3262
|
}),
|
|
2886
|
-
/* @__PURE__ */
|
|
3263
|
+
/* @__PURE__ */ jsx11("p", {
|
|
2887
3264
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
2888
3265
|
children: "Sign in to continue"
|
|
2889
3266
|
}),
|
|
2890
|
-
/* @__PURE__ */
|
|
3267
|
+
/* @__PURE__ */ jsx11("p", {
|
|
2891
3268
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
2892
3269
|
children: "Your email will be used to identify you across sessions"
|
|
2893
3270
|
})
|
|
2894
3271
|
]
|
|
2895
3272
|
}),
|
|
2896
|
-
/* @__PURE__ */
|
|
3273
|
+
/* @__PURE__ */ jsxs8("form", {
|
|
2897
3274
|
onSubmit: handleSubmit,
|
|
2898
3275
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
2899
3276
|
children: [
|
|
2900
|
-
/* @__PURE__ */
|
|
3277
|
+
/* @__PURE__ */ jsx11("input", {
|
|
2901
3278
|
type: "email",
|
|
2902
3279
|
placeholder: "you@example.com",
|
|
2903
3280
|
value: email,
|
|
@@ -2906,15 +3283,15 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
2906
3283
|
required: true,
|
|
2907
3284
|
className: "skippr:w-full skippr:rounded-md skippr:border skippr:border-border skippr:bg-background skippr:px-3 skippr:py-2 skippr:text-sm skippr:text-foreground skippr:placeholder-muted-foreground skippr:outline-none focus:skippr:ring-2 focus:skippr:ring-primary/30 focus:skippr:border-primary disabled:skippr:opacity-50"
|
|
2908
3285
|
}),
|
|
2909
|
-
/* @__PURE__ */
|
|
3286
|
+
/* @__PURE__ */ jsx11(Button, {
|
|
2910
3287
|
type: "submit",
|
|
2911
3288
|
disabled: isSubmitting || !email.trim(),
|
|
2912
3289
|
className: "skippr:w-full",
|
|
2913
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
3290
|
+
children: isSubmitting ? /* @__PURE__ */ jsx11(LoaderCircle, {
|
|
2914
3291
|
className: "skippr:size-4 skippr:animate-spin"
|
|
2915
3292
|
}) : "Continue"
|
|
2916
3293
|
}),
|
|
2917
|
-
error && /* @__PURE__ */
|
|
3294
|
+
error && /* @__PURE__ */ jsx11("p", {
|
|
2918
3295
|
className: "skippr:text-xs skippr:text-center skippr:text-destructive",
|
|
2919
3296
|
children: error
|
|
2920
3297
|
})
|
|
@@ -2924,30 +3301,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
2924
3301
|
});
|
|
2925
3302
|
}
|
|
2926
3303
|
function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
2927
|
-
const [digits, setDigits] =
|
|
2928
|
-
const [resendCooldown, setResendCooldown] =
|
|
2929
|
-
const inputRefs =
|
|
2930
|
-
const submittedRef =
|
|
2931
|
-
|
|
3304
|
+
const [digits, setDigits] = useState11(Array(OTP_LENGTH).fill(""));
|
|
3305
|
+
const [resendCooldown, setResendCooldown] = useState11(0);
|
|
3306
|
+
const inputRefs = useRef9([]);
|
|
3307
|
+
const submittedRef = useRef9(false);
|
|
3308
|
+
useEffect14(() => {
|
|
2932
3309
|
inputRefs.current[0]?.focus();
|
|
2933
3310
|
}, []);
|
|
2934
|
-
|
|
3311
|
+
useEffect14(() => {
|
|
2935
3312
|
if (error)
|
|
2936
3313
|
submittedRef.current = false;
|
|
2937
3314
|
}, [error]);
|
|
2938
|
-
|
|
3315
|
+
useEffect14(() => {
|
|
2939
3316
|
if (resendCooldown <= 0)
|
|
2940
3317
|
return;
|
|
2941
3318
|
const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
|
|
2942
3319
|
return () => clearTimeout(timer);
|
|
2943
3320
|
}, [resendCooldown]);
|
|
2944
|
-
const submitCode =
|
|
3321
|
+
const submitCode = useCallback8((code) => {
|
|
2945
3322
|
if (submittedRef.current || isSubmitting)
|
|
2946
3323
|
return;
|
|
2947
3324
|
submittedRef.current = true;
|
|
2948
3325
|
onSubmit(code);
|
|
2949
3326
|
}, [onSubmit, isSubmitting]);
|
|
2950
|
-
const handleDigitChange =
|
|
3327
|
+
const handleDigitChange = useCallback8((index2, value) => {
|
|
2951
3328
|
const digit = value.replace(/\D/g, "").slice(-1);
|
|
2952
3329
|
const newDigits = [...digits];
|
|
2953
3330
|
newDigits[index2] = digit;
|
|
@@ -2961,12 +3338,12 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
2961
3338
|
submitCode(code);
|
|
2962
3339
|
}
|
|
2963
3340
|
}, [digits, submitCode]);
|
|
2964
|
-
const handleKeyDown =
|
|
3341
|
+
const handleKeyDown = useCallback8((index2, e) => {
|
|
2965
3342
|
if (e.key === "Backspace" && !digits[index2] && index2 > 0) {
|
|
2966
3343
|
inputRefs.current[index2 - 1]?.focus();
|
|
2967
3344
|
}
|
|
2968
3345
|
}, [digits]);
|
|
2969
|
-
const handlePaste =
|
|
3346
|
+
const handlePaste = useCallback8((e) => {
|
|
2970
3347
|
e.preventDefault();
|
|
2971
3348
|
const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, OTP_LENGTH);
|
|
2972
3349
|
if (pasted.length > 0) {
|
|
@@ -2994,22 +3371,22 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
2994
3371
|
submittedRef.current = false;
|
|
2995
3372
|
inputRefs.current[0]?.focus();
|
|
2996
3373
|
}
|
|
2997
|
-
return /* @__PURE__ */
|
|
3374
|
+
return /* @__PURE__ */ jsxs8("div", {
|
|
2998
3375
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
|
|
2999
3376
|
children: [
|
|
3000
|
-
/* @__PURE__ */
|
|
3377
|
+
/* @__PURE__ */ jsxs8("div", {
|
|
3001
3378
|
className: "skippr:mb-4 skippr:text-center",
|
|
3002
3379
|
children: [
|
|
3003
|
-
/* @__PURE__ */
|
|
3380
|
+
/* @__PURE__ */ jsx11("p", {
|
|
3004
3381
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
3005
3382
|
children: "Enter verification code"
|
|
3006
3383
|
}),
|
|
3007
|
-
/* @__PURE__ */
|
|
3384
|
+
/* @__PURE__ */ jsxs8("p", {
|
|
3008
3385
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
3009
3386
|
children: [
|
|
3010
3387
|
"We sent a 6-digit code to",
|
|
3011
3388
|
" ",
|
|
3012
|
-
/* @__PURE__ */
|
|
3389
|
+
/* @__PURE__ */ jsx11("span", {
|
|
3013
3390
|
className: "skippr:font-medium skippr:text-foreground",
|
|
3014
3391
|
children: email
|
|
3015
3392
|
})
|
|
@@ -3017,13 +3394,13 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3017
3394
|
})
|
|
3018
3395
|
]
|
|
3019
3396
|
}),
|
|
3020
|
-
/* @__PURE__ */
|
|
3397
|
+
/* @__PURE__ */ jsxs8("form", {
|
|
3021
3398
|
onSubmit: handleSubmit,
|
|
3022
3399
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
3023
3400
|
children: [
|
|
3024
|
-
/* @__PURE__ */
|
|
3401
|
+
/* @__PURE__ */ jsx11("div", {
|
|
3025
3402
|
className: "skippr:flex skippr:justify-center skippr:gap-1.5",
|
|
3026
|
-
children: digits.map((digit, index2) => /* @__PURE__ */
|
|
3403
|
+
children: digits.map((digit, index2) => /* @__PURE__ */ jsx11("input", {
|
|
3027
3404
|
ref: (el) => {
|
|
3028
3405
|
inputRefs.current[index2] = el;
|
|
3029
3406
|
},
|
|
@@ -3038,29 +3415,29 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3038
3415
|
className: "skippr:h-10 skippr:w-10 skippr:rounded-md skippr:border skippr:border-border skippr:bg-background skippr:text-center skippr:text-sm skippr:font-semibold skippr:text-foreground skippr:outline-none focus:skippr:ring-2 focus:skippr:ring-primary/30 focus:skippr:border-primary disabled:skippr:opacity-50"
|
|
3039
3416
|
}, DIGIT_KEYS[index2]))
|
|
3040
3417
|
}),
|
|
3041
|
-
error && /* @__PURE__ */
|
|
3418
|
+
error && /* @__PURE__ */ jsx11("p", {
|
|
3042
3419
|
className: "skippr:text-xs skippr:text-center skippr:text-destructive",
|
|
3043
3420
|
children: error
|
|
3044
3421
|
}),
|
|
3045
|
-
/* @__PURE__ */
|
|
3422
|
+
/* @__PURE__ */ jsx11(Button, {
|
|
3046
3423
|
type: "submit",
|
|
3047
3424
|
disabled: isSubmitting || digits.join("").length !== OTP_LENGTH,
|
|
3048
3425
|
className: "skippr:w-full",
|
|
3049
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
3426
|
+
children: isSubmitting ? /* @__PURE__ */ jsx11(LoaderCircle, {
|
|
3050
3427
|
className: "skippr:size-4 skippr:animate-spin"
|
|
3051
3428
|
}) : "Verify"
|
|
3052
3429
|
}),
|
|
3053
|
-
/* @__PURE__ */
|
|
3430
|
+
/* @__PURE__ */ jsxs8("div", {
|
|
3054
3431
|
className: "skippr:flex skippr:items-center skippr:justify-between skippr:text-xs",
|
|
3055
3432
|
children: [
|
|
3056
|
-
/* @__PURE__ */
|
|
3433
|
+
/* @__PURE__ */ jsx11("button", {
|
|
3057
3434
|
type: "button",
|
|
3058
3435
|
onClick: onBack,
|
|
3059
3436
|
disabled: isSubmitting,
|
|
3060
3437
|
className: "skippr:text-muted-foreground hover:skippr:text-foreground skippr:transition-colors disabled:skippr:opacity-50",
|
|
3061
3438
|
children: "Change email"
|
|
3062
3439
|
}),
|
|
3063
|
-
/* @__PURE__ */
|
|
3440
|
+
/* @__PURE__ */ jsx11("button", {
|
|
3064
3441
|
type: "button",
|
|
3065
3442
|
onClick: handleResend,
|
|
3066
3443
|
disabled: isSubmitting || resendCooldown > 0,
|
|
@@ -3076,7 +3453,7 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3076
3453
|
}
|
|
3077
3454
|
|
|
3078
3455
|
// src/components/MeetingControls.tsx
|
|
3079
|
-
import { jsx as
|
|
3456
|
+
import { jsx as jsx12, jsxs as jsxs9, Fragment as Fragment4 } from "react/jsx-runtime";
|
|
3080
3457
|
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";
|
|
3081
3458
|
var MUTED_BUTTON = "skippr:bg-muted skippr:text-foreground skippr:hover:bg-muted/80";
|
|
3082
3459
|
function MeetingControls({
|
|
@@ -3089,68 +3466,68 @@ function MeetingControls({
|
|
|
3089
3466
|
}) {
|
|
3090
3467
|
const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
|
|
3091
3468
|
const showPaused = isPaused || isPausing;
|
|
3092
|
-
return /* @__PURE__ */
|
|
3469
|
+
return /* @__PURE__ */ jsxs9("div", {
|
|
3093
3470
|
className: "skippr:shrink-0 skippr:border-t skippr:border-border skippr:bg-background skippr:px-4 skippr:py-4",
|
|
3094
3471
|
children: [
|
|
3095
|
-
/* @__PURE__ */
|
|
3472
|
+
/* @__PURE__ */ jsxs9("div", {
|
|
3096
3473
|
className: "skippr:flex skippr:items-center skippr:justify-center skippr:gap-3",
|
|
3097
3474
|
children: [
|
|
3098
|
-
!showPaused && /* @__PURE__ */
|
|
3475
|
+
!showPaused && /* @__PURE__ */ jsxs9(Fragment4, {
|
|
3099
3476
|
children: [
|
|
3100
|
-
/* @__PURE__ */
|
|
3477
|
+
/* @__PURE__ */ jsx12("button", {
|
|
3101
3478
|
type: "button",
|
|
3102
3479
|
onClick: toggleMute,
|
|
3103
3480
|
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
3104
3481
|
className: cn(CONTROL_BUTTON2, isMuted ? "skippr:bg-destructive/15 skippr:text-destructive skippr:hover:bg-destructive/25" : MUTED_BUTTON),
|
|
3105
|
-
children: isMuted ? /* @__PURE__ */
|
|
3482
|
+
children: isMuted ? /* @__PURE__ */ jsx12(MicOff, {
|
|
3106
3483
|
className: "skippr:size-5"
|
|
3107
|
-
}) : /* @__PURE__ */
|
|
3484
|
+
}) : /* @__PURE__ */ jsx12(Mic, {
|
|
3108
3485
|
className: "skippr:size-5"
|
|
3109
3486
|
})
|
|
3110
3487
|
}),
|
|
3111
|
-
showScreenShareToggle && /* @__PURE__ */
|
|
3488
|
+
showScreenShareToggle && /* @__PURE__ */ jsx12("button", {
|
|
3112
3489
|
type: "button",
|
|
3113
3490
|
onClick: toggleScreenShare,
|
|
3114
3491
|
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
3115
3492
|
className: cn(CONTROL_BUTTON2, isScreenSharing ? "skippr:bg-bubble skippr:text-white skippr:hover:brightness-110" : MUTED_BUTTON),
|
|
3116
|
-
children: isScreenSharing ? /* @__PURE__ */
|
|
3493
|
+
children: isScreenSharing ? /* @__PURE__ */ jsx12(MonitorOff, {
|
|
3117
3494
|
className: "skippr:size-5"
|
|
3118
|
-
}) : /* @__PURE__ */
|
|
3495
|
+
}) : /* @__PURE__ */ jsx12(Monitor, {
|
|
3119
3496
|
className: "skippr:size-5"
|
|
3120
3497
|
})
|
|
3121
3498
|
})
|
|
3122
3499
|
]
|
|
3123
3500
|
}),
|
|
3124
|
-
showPaused ? onResume && /* @__PURE__ */
|
|
3501
|
+
showPaused ? onResume && /* @__PURE__ */ jsx12("button", {
|
|
3125
3502
|
type: "button",
|
|
3126
3503
|
onClick: onResume,
|
|
3127
3504
|
disabled: isPausing,
|
|
3128
3505
|
"aria-label": "Resume session",
|
|
3129
3506
|
className: cn(CONTROL_BUTTON2, MUTED_BUTTON),
|
|
3130
|
-
children: /* @__PURE__ */
|
|
3507
|
+
children: /* @__PURE__ */ jsx12(Play, {
|
|
3131
3508
|
className: "skippr:size-5"
|
|
3132
3509
|
})
|
|
3133
|
-
}) : onPause && /* @__PURE__ */
|
|
3510
|
+
}) : onPause && /* @__PURE__ */ jsx12("button", {
|
|
3134
3511
|
type: "button",
|
|
3135
3512
|
onClick: onPause,
|
|
3136
3513
|
"aria-label": "Pause session",
|
|
3137
3514
|
className: cn(CONTROL_BUTTON2, MUTED_BUTTON),
|
|
3138
|
-
children: /* @__PURE__ */
|
|
3515
|
+
children: /* @__PURE__ */ jsx12(Pause, {
|
|
3139
3516
|
className: "skippr:size-5"
|
|
3140
3517
|
})
|
|
3141
3518
|
}),
|
|
3142
|
-
/* @__PURE__ */
|
|
3519
|
+
/* @__PURE__ */ jsx12("button", {
|
|
3143
3520
|
type: "button",
|
|
3144
3521
|
onClick: onHangUp,
|
|
3145
3522
|
"aria-label": "End session",
|
|
3146
3523
|
className: cn(CONTROL_BUTTON2, "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90"),
|
|
3147
|
-
children: /* @__PURE__ */
|
|
3524
|
+
children: /* @__PURE__ */ jsx12(PhoneOff, {
|
|
3148
3525
|
className: "skippr:size-5"
|
|
3149
3526
|
})
|
|
3150
3527
|
})
|
|
3151
3528
|
]
|
|
3152
3529
|
}),
|
|
3153
|
-
/* @__PURE__ */
|
|
3530
|
+
/* @__PURE__ */ jsx12("p", {
|
|
3154
3531
|
className: "skippr:mt-3 skippr:text-center skippr:text-[10px] skippr:text-muted-foreground",
|
|
3155
3532
|
children: "Powered by Skippr"
|
|
3156
3533
|
})
|
|
@@ -3159,17 +3536,17 @@ function MeetingControls({
|
|
|
3159
3536
|
}
|
|
3160
3537
|
|
|
3161
3538
|
// src/components/MessageList.tsx
|
|
3162
|
-
import { useEffect as
|
|
3539
|
+
import { useEffect as useEffect16, useRef as useRef11 } from "react";
|
|
3163
3540
|
|
|
3164
3541
|
// src/components/ChatInput.tsx
|
|
3165
|
-
import { useEffect as
|
|
3166
|
-
import { jsx as
|
|
3542
|
+
import { useEffect as useEffect15, useRef as useRef10, useState as useState12 } from "react";
|
|
3543
|
+
import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
3167
3544
|
var MAX_INPUT_HEIGHT = 60;
|
|
3168
3545
|
function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
3169
|
-
const [inputText, setInputText] =
|
|
3170
|
-
const textareaRef =
|
|
3546
|
+
const [inputText, setInputText] = useState12("");
|
|
3547
|
+
const textareaRef = useRef10(null);
|
|
3171
3548
|
const canSend = inputText.trim().length > 0 && !isSendingChat;
|
|
3172
|
-
|
|
3549
|
+
useEffect15(() => {
|
|
3173
3550
|
if (autoFocus)
|
|
3174
3551
|
textareaRef.current?.focus();
|
|
3175
3552
|
}, [autoFocus]);
|
|
@@ -3200,13 +3577,13 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3200
3577
|
handleSubmit(e);
|
|
3201
3578
|
}
|
|
3202
3579
|
}
|
|
3203
|
-
return /* @__PURE__ */
|
|
3580
|
+
return /* @__PURE__ */ jsx13("form", {
|
|
3204
3581
|
onSubmit: handleSubmit,
|
|
3205
3582
|
className: "skippr:border-t skippr:border-border skippr:p-3",
|
|
3206
|
-
children: /* @__PURE__ */
|
|
3583
|
+
children: /* @__PURE__ */ jsxs10("div", {
|
|
3207
3584
|
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",
|
|
3208
3585
|
children: [
|
|
3209
|
-
/* @__PURE__ */
|
|
3586
|
+
/* @__PURE__ */ jsx13("textarea", {
|
|
3210
3587
|
ref: textareaRef,
|
|
3211
3588
|
rows: 1,
|
|
3212
3589
|
value: inputText,
|
|
@@ -3216,12 +3593,12 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3216
3593
|
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",
|
|
3217
3594
|
style: { maxHeight: `${MAX_INPUT_HEIGHT}px` }
|
|
3218
3595
|
}),
|
|
3219
|
-
/* @__PURE__ */
|
|
3596
|
+
/* @__PURE__ */ jsx13("button", {
|
|
3220
3597
|
type: "submit",
|
|
3221
3598
|
disabled: !canSend,
|
|
3222
3599
|
"aria-label": "Send message",
|
|
3223
3600
|
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"),
|
|
3224
|
-
children: /* @__PURE__ */
|
|
3601
|
+
children: /* @__PURE__ */ jsx13(Send, {
|
|
3225
3602
|
className: "skippr:size-3.5"
|
|
3226
3603
|
})
|
|
3227
3604
|
})
|
|
@@ -3231,7 +3608,7 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3231
3608
|
}
|
|
3232
3609
|
|
|
3233
3610
|
// src/components/ChatMessage.tsx
|
|
3234
|
-
import { jsx as
|
|
3611
|
+
import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
3235
3612
|
function formatTimestamp(ts) {
|
|
3236
3613
|
return new Date(ts).toLocaleTimeString("en-US", {
|
|
3237
3614
|
hour: "numeric",
|
|
@@ -3241,23 +3618,23 @@ function formatTimestamp(ts) {
|
|
|
3241
3618
|
}
|
|
3242
3619
|
function ChatMessage({ message }) {
|
|
3243
3620
|
const isAgent = message.role === "assistant";
|
|
3244
|
-
return /* @__PURE__ */
|
|
3621
|
+
return /* @__PURE__ */ jsxs11("div", {
|
|
3245
3622
|
className: cn("skippr:flex skippr:gap-2", isAgent ? "skippr:items-start" : "skippr:justify-end"),
|
|
3246
3623
|
children: [
|
|
3247
|
-
isAgent && /* @__PURE__ */
|
|
3624
|
+
isAgent && /* @__PURE__ */ jsx14("div", {
|
|
3248
3625
|
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",
|
|
3249
|
-
children: /* @__PURE__ */
|
|
3626
|
+
children: /* @__PURE__ */ jsx14(Sparkles, {
|
|
3250
3627
|
className: "skippr:size-3.5 skippr:text-primary-foreground"
|
|
3251
3628
|
})
|
|
3252
3629
|
}),
|
|
3253
|
-
/* @__PURE__ */
|
|
3630
|
+
/* @__PURE__ */ jsxs11("div", {
|
|
3254
3631
|
className: cn("skippr:flex skippr:max-w-[80%] skippr:flex-col", isAgent ? "skippr:items-start" : "skippr:items-end"),
|
|
3255
3632
|
children: [
|
|
3256
|
-
/* @__PURE__ */
|
|
3633
|
+
/* @__PURE__ */ jsx14("div", {
|
|
3257
3634
|
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"),
|
|
3258
3635
|
children: message.content
|
|
3259
3636
|
}),
|
|
3260
|
-
message.timestamp && /* @__PURE__ */
|
|
3637
|
+
message.timestamp && /* @__PURE__ */ jsx14("span", {
|
|
3261
3638
|
className: "skippr:mt-1 skippr:px-1 skippr:text-[10px] skippr:text-muted-foreground/60",
|
|
3262
3639
|
children: formatTimestamp(message.timestamp)
|
|
3263
3640
|
})
|
|
@@ -3268,33 +3645,33 @@ function ChatMessage({ message }) {
|
|
|
3268
3645
|
}
|
|
3269
3646
|
|
|
3270
3647
|
// src/components/TypingIndicator.tsx
|
|
3271
|
-
import { jsx as
|
|
3648
|
+
import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
3272
3649
|
function TypingIndicator() {
|
|
3273
|
-
return /* @__PURE__ */
|
|
3650
|
+
return /* @__PURE__ */ jsxs12("div", {
|
|
3274
3651
|
className: "skippr:flex skippr:items-start skippr:gap-2 skippr:animate-skippr-tab-fade",
|
|
3275
3652
|
children: [
|
|
3276
|
-
/* @__PURE__ */
|
|
3653
|
+
/* @__PURE__ */ jsx15("div", {
|
|
3277
3654
|
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",
|
|
3278
|
-
children: /* @__PURE__ */
|
|
3655
|
+
children: /* @__PURE__ */ jsx15(Sparkles, {
|
|
3279
3656
|
className: "skippr:size-3.5 skippr:text-primary-foreground"
|
|
3280
3657
|
})
|
|
3281
3658
|
}),
|
|
3282
|
-
/* @__PURE__ */
|
|
3659
|
+
/* @__PURE__ */ jsxs12("div", {
|
|
3283
3660
|
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",
|
|
3284
3661
|
children: [
|
|
3285
|
-
/* @__PURE__ */
|
|
3662
|
+
/* @__PURE__ */ jsx15("span", {
|
|
3286
3663
|
children: "Agent is analyzing your screen"
|
|
3287
3664
|
}),
|
|
3288
|
-
/* @__PURE__ */
|
|
3665
|
+
/* @__PURE__ */ jsxs12("span", {
|
|
3289
3666
|
className: "skippr:inline-flex skippr:items-center skippr:gap-[2px]",
|
|
3290
3667
|
children: [
|
|
3291
|
-
/* @__PURE__ */
|
|
3668
|
+
/* @__PURE__ */ jsx15("span", {
|
|
3292
3669
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:0ms]"
|
|
3293
3670
|
}),
|
|
3294
|
-
/* @__PURE__ */
|
|
3671
|
+
/* @__PURE__ */ jsx15("span", {
|
|
3295
3672
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:200ms]"
|
|
3296
3673
|
}),
|
|
3297
|
-
/* @__PURE__ */
|
|
3674
|
+
/* @__PURE__ */ jsx15("span", {
|
|
3298
3675
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:400ms]"
|
|
3299
3676
|
})
|
|
3300
3677
|
]
|
|
@@ -3306,7 +3683,7 @@ function TypingIndicator() {
|
|
|
3306
3683
|
}
|
|
3307
3684
|
|
|
3308
3685
|
// src/components/MessageList.tsx
|
|
3309
|
-
import { jsx as
|
|
3686
|
+
import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
3310
3687
|
function MessageList({
|
|
3311
3688
|
messages,
|
|
3312
3689
|
isStreaming,
|
|
@@ -3314,31 +3691,31 @@ function MessageList({
|
|
|
3314
3691
|
isSendingChat,
|
|
3315
3692
|
autoFocus = false
|
|
3316
3693
|
}) {
|
|
3317
|
-
const scrollRef =
|
|
3694
|
+
const scrollRef = useRef11(null);
|
|
3318
3695
|
const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
|
|
3319
|
-
|
|
3696
|
+
useEffect16(() => {
|
|
3320
3697
|
scrollRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
3321
3698
|
}, [messages.length, lastMessage?.content]);
|
|
3322
3699
|
const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
|
|
3323
|
-
return /* @__PURE__ */
|
|
3700
|
+
return /* @__PURE__ */ jsxs13("div", {
|
|
3324
3701
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
3325
3702
|
children: [
|
|
3326
|
-
/* @__PURE__ */
|
|
3703
|
+
/* @__PURE__ */ jsxs13("div", {
|
|
3327
3704
|
className: "skippr:min-h-0 skippr:flex-1 skippr:space-y-4 skippr:overflow-y-auto skippr:p-4",
|
|
3328
3705
|
children: [
|
|
3329
|
-
messages.length === 0 && !showTyping && /* @__PURE__ */
|
|
3706
|
+
messages.length === 0 && !showTyping && /* @__PURE__ */ jsx16(LoadingDots, {
|
|
3330
3707
|
label: "Waiting for conversation to begin..."
|
|
3331
3708
|
}),
|
|
3332
|
-
messages.map((message) => /* @__PURE__ */
|
|
3709
|
+
messages.map((message) => /* @__PURE__ */ jsx16(ChatMessage, {
|
|
3333
3710
|
message
|
|
3334
3711
|
}, message.id)),
|
|
3335
|
-
showTyping && /* @__PURE__ */
|
|
3336
|
-
/* @__PURE__ */
|
|
3712
|
+
showTyping && /* @__PURE__ */ jsx16(TypingIndicator, {}),
|
|
3713
|
+
/* @__PURE__ */ jsx16("div", {
|
|
3337
3714
|
ref: scrollRef
|
|
3338
3715
|
})
|
|
3339
3716
|
]
|
|
3340
3717
|
}),
|
|
3341
|
-
/* @__PURE__ */
|
|
3718
|
+
/* @__PURE__ */ jsx16(ChatInput, {
|
|
3342
3719
|
sendChatMessage,
|
|
3343
3720
|
isSendingChat,
|
|
3344
3721
|
autoFocus
|
|
@@ -3348,8 +3725,8 @@ function MessageList({
|
|
|
3348
3725
|
}
|
|
3349
3726
|
|
|
3350
3727
|
// src/components/ModuleSelector.tsx
|
|
3351
|
-
import { useEffect as
|
|
3352
|
-
import { jsx as
|
|
3728
|
+
import { useEffect as useEffect17, useRef as useRef12, useState as useState13 } from "react";
|
|
3729
|
+
import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
3353
3730
|
var AGENT_TYPE_ICONS = {
|
|
3354
3731
|
onboarding: UserPlus,
|
|
3355
3732
|
demo: Rocket,
|
|
@@ -3371,10 +3748,10 @@ function ModuleSelector() {
|
|
|
3371
3748
|
error
|
|
3372
3749
|
} = useLiveAgent();
|
|
3373
3750
|
const isBusy = isStarting || isDisconnecting;
|
|
3374
|
-
const scrollRef =
|
|
3375
|
-
const [showScrollHint, setShowScrollHint] =
|
|
3376
|
-
const [isScrolled, setIsScrolled] =
|
|
3377
|
-
|
|
3751
|
+
const scrollRef = useRef12(null);
|
|
3752
|
+
const [showScrollHint, setShowScrollHint] = useState13(false);
|
|
3753
|
+
const [isScrolled, setIsScrolled] = useState13(false);
|
|
3754
|
+
useEffect17(() => {
|
|
3378
3755
|
const el = scrollRef.current;
|
|
3379
3756
|
if (!el)
|
|
3380
3757
|
return;
|
|
@@ -3396,26 +3773,26 @@ function ModuleSelector() {
|
|
|
3396
3773
|
};
|
|
3397
3774
|
}, []);
|
|
3398
3775
|
if (isLoadingModules && availableModules.length === 0) {
|
|
3399
|
-
return /* @__PURE__ */
|
|
3776
|
+
return /* @__PURE__ */ jsx17("div", {
|
|
3400
3777
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center skippr:p-6",
|
|
3401
|
-
children: /* @__PURE__ */
|
|
3778
|
+
children: /* @__PURE__ */ jsx17(LoadingDots, {
|
|
3402
3779
|
label: "Loading modules..."
|
|
3403
3780
|
})
|
|
3404
3781
|
});
|
|
3405
3782
|
}
|
|
3406
3783
|
if (modulesError) {
|
|
3407
|
-
return /* @__PURE__ */
|
|
3784
|
+
return /* @__PURE__ */ jsxs14("div", {
|
|
3408
3785
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:p-6 skippr:text-center",
|
|
3409
3786
|
children: [
|
|
3410
|
-
/* @__PURE__ */
|
|
3787
|
+
/* @__PURE__ */ jsx17("p", {
|
|
3411
3788
|
className: "skippr:text-sm skippr:text-foreground",
|
|
3412
3789
|
children: "Couldn't load modules."
|
|
3413
3790
|
}),
|
|
3414
|
-
/* @__PURE__ */
|
|
3791
|
+
/* @__PURE__ */ jsx17("p", {
|
|
3415
3792
|
className: "skippr:text-xs skippr:text-muted-foreground",
|
|
3416
3793
|
children: modulesError
|
|
3417
3794
|
}),
|
|
3418
|
-
/* @__PURE__ */
|
|
3795
|
+
/* @__PURE__ */ jsx17("button", {
|
|
3419
3796
|
type: "button",
|
|
3420
3797
|
onClick: () => void refetchModules(),
|
|
3421
3798
|
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",
|
|
@@ -3425,34 +3802,34 @@ function ModuleSelector() {
|
|
|
3425
3802
|
});
|
|
3426
3803
|
}
|
|
3427
3804
|
if (availableModules.length === 0) {
|
|
3428
|
-
return /* @__PURE__ */
|
|
3805
|
+
return /* @__PURE__ */ jsx17("div", {
|
|
3429
3806
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center skippr:p-6 skippr:text-center",
|
|
3430
|
-
children: /* @__PURE__ */
|
|
3807
|
+
children: /* @__PURE__ */ jsx17("p", {
|
|
3431
3808
|
className: "skippr:text-sm skippr:text-muted-foreground",
|
|
3432
3809
|
children: "No experts available."
|
|
3433
3810
|
})
|
|
3434
3811
|
});
|
|
3435
3812
|
}
|
|
3436
|
-
return /* @__PURE__ */
|
|
3813
|
+
return /* @__PURE__ */ jsxs14("div", {
|
|
3437
3814
|
className: "skippr:relative skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
3438
3815
|
children: [
|
|
3439
|
-
/* @__PURE__ */
|
|
3816
|
+
/* @__PURE__ */ jsxs14("div", {
|
|
3440
3817
|
ref: scrollRef,
|
|
3441
3818
|
className: "skippr-no-scrollbar skippr:flex-1 skippr:overflow-y-auto",
|
|
3442
3819
|
children: [
|
|
3443
|
-
/* @__PURE__ */
|
|
3820
|
+
/* @__PURE__ */ jsx17("h3", {
|
|
3444
3821
|
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" : ""}`,
|
|
3445
3822
|
children: "Choose an agent"
|
|
3446
3823
|
}),
|
|
3447
|
-
/* @__PURE__ */
|
|
3824
|
+
/* @__PURE__ */ jsxs14("div", {
|
|
3448
3825
|
className: "skippr:px-4 skippr:pt-3 skippr:pb-5",
|
|
3449
3826
|
children: [
|
|
3450
|
-
error && /* @__PURE__ */
|
|
3827
|
+
error && /* @__PURE__ */ jsx17("div", {
|
|
3451
3828
|
role: "alert",
|
|
3452
3829
|
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",
|
|
3453
3830
|
children: error
|
|
3454
3831
|
}),
|
|
3455
|
-
/* @__PURE__ */
|
|
3832
|
+
/* @__PURE__ */ jsx17("div", {
|
|
3456
3833
|
className: "skippr:grid skippr:grid-cols-2 skippr:gap-2.5",
|
|
3457
3834
|
children: availableModules.map((module, index2) => {
|
|
3458
3835
|
const isFeatured = index2 === 0;
|
|
@@ -3464,50 +3841,50 @@ function ModuleSelector() {
|
|
|
3464
3841
|
const layout = isWide ? "skippr:items-center skippr:p-3.5 skippr:pb-5" : "skippr:flex-col skippr:items-start skippr:p-3.5";
|
|
3465
3842
|
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";
|
|
3466
3843
|
const span = isWide ? "skippr:col-span-2" : "";
|
|
3467
|
-
return /* @__PURE__ */
|
|
3844
|
+
return /* @__PURE__ */ jsxs14("button", {
|
|
3468
3845
|
type: "button",
|
|
3469
3846
|
disabled: isBusy || isTerminal,
|
|
3470
3847
|
onClick: () => selectModule(module.id),
|
|
3471
3848
|
className: `${base} ${layout} ${variant} ${span}`,
|
|
3472
3849
|
children: [
|
|
3473
|
-
/* @__PURE__ */
|
|
3850
|
+
/* @__PURE__ */ jsx17("div", {
|
|
3474
3851
|
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",
|
|
3475
|
-
children: /* @__PURE__ */
|
|
3852
|
+
children: /* @__PURE__ */ jsx17(Icon2, {
|
|
3476
3853
|
className: isFeatured ? "skippr:h-4 skippr:w-4" : "skippr:h-4 skippr:w-4 skippr:text-muted-foreground"
|
|
3477
3854
|
})
|
|
3478
3855
|
}),
|
|
3479
|
-
/* @__PURE__ */
|
|
3856
|
+
/* @__PURE__ */ jsxs14("div", {
|
|
3480
3857
|
className: "skippr:min-w-0 skippr:w-full skippr:space-y-0.5",
|
|
3481
3858
|
children: [
|
|
3482
|
-
/* @__PURE__ */
|
|
3859
|
+
/* @__PURE__ */ jsxs14("div", {
|
|
3483
3860
|
className: "skippr:flex skippr:items-center skippr:gap-1.5",
|
|
3484
3861
|
children: [
|
|
3485
|
-
/* @__PURE__ */
|
|
3862
|
+
/* @__PURE__ */ jsx17("p", {
|
|
3486
3863
|
className: "skippr:line-clamp-1 skippr:text-sm skippr:font-semibold",
|
|
3487
3864
|
children: module.name
|
|
3488
3865
|
}),
|
|
3489
|
-
sessionState === "resume" && /* @__PURE__ */
|
|
3866
|
+
sessionState === "resume" && /* @__PURE__ */ jsxs14("span", {
|
|
3490
3867
|
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"}`,
|
|
3491
3868
|
children: [
|
|
3492
|
-
/* @__PURE__ */
|
|
3869
|
+
/* @__PURE__ */ jsx17(Play, {
|
|
3493
3870
|
className: "skippr:size-2.5"
|
|
3494
3871
|
}),
|
|
3495
3872
|
"Resume"
|
|
3496
3873
|
]
|
|
3497
3874
|
}),
|
|
3498
|
-
sessionState === "completed" && /* @__PURE__ */
|
|
3875
|
+
sessionState === "completed" && /* @__PURE__ */ jsxs14("span", {
|
|
3499
3876
|
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",
|
|
3500
3877
|
children: [
|
|
3501
|
-
/* @__PURE__ */
|
|
3878
|
+
/* @__PURE__ */ jsx17(CircleCheck, {
|
|
3502
3879
|
className: "skippr:size-2.5"
|
|
3503
3880
|
}),
|
|
3504
3881
|
"Completed"
|
|
3505
3882
|
]
|
|
3506
3883
|
}),
|
|
3507
|
-
sessionState === "expired" && /* @__PURE__ */
|
|
3884
|
+
sessionState === "expired" && /* @__PURE__ */ jsxs14("span", {
|
|
3508
3885
|
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",
|
|
3509
3886
|
children: [
|
|
3510
|
-
/* @__PURE__ */
|
|
3887
|
+
/* @__PURE__ */ jsx17(Clock, {
|
|
3511
3888
|
className: "skippr:size-2.5"
|
|
3512
3889
|
}),
|
|
3513
3890
|
"Expired"
|
|
@@ -3515,7 +3892,7 @@ function ModuleSelector() {
|
|
|
3515
3892
|
})
|
|
3516
3893
|
]
|
|
3517
3894
|
}),
|
|
3518
|
-
module.description && /* @__PURE__ */
|
|
3895
|
+
module.description && /* @__PURE__ */ jsx17("p", {
|
|
3519
3896
|
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",
|
|
3520
3897
|
children: module.description
|
|
3521
3898
|
})
|
|
@@ -3529,7 +3906,7 @@ function ModuleSelector() {
|
|
|
3529
3906
|
})
|
|
3530
3907
|
]
|
|
3531
3908
|
}),
|
|
3532
|
-
showScrollHint && /* @__PURE__ */
|
|
3909
|
+
showScrollHint && /* @__PURE__ */ jsx17("div", {
|
|
3533
3910
|
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"
|
|
3534
3911
|
})
|
|
3535
3912
|
]
|
|
@@ -3537,49 +3914,49 @@ function ModuleSelector() {
|
|
|
3537
3914
|
}
|
|
3538
3915
|
|
|
3539
3916
|
// src/components/SessionAgenda.tsx
|
|
3540
|
-
import { jsx as
|
|
3917
|
+
import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
3541
3918
|
function SessionAgenda({ phases, hasStarted }) {
|
|
3542
3919
|
if (phases.length === 0 || !hasStarted) {
|
|
3543
|
-
return /* @__PURE__ */
|
|
3920
|
+
return /* @__PURE__ */ jsx18("div", {
|
|
3544
3921
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
3545
|
-
children: /* @__PURE__ */
|
|
3922
|
+
children: /* @__PURE__ */ jsx18(LoadingDots, {
|
|
3546
3923
|
label: "Waiting for agenda to load..."
|
|
3547
3924
|
})
|
|
3548
3925
|
});
|
|
3549
3926
|
}
|
|
3550
|
-
return /* @__PURE__ */
|
|
3927
|
+
return /* @__PURE__ */ jsx18("div", {
|
|
3551
3928
|
className: "skippr:flex-1 skippr:overflow-y-auto skippr:px-4 skippr:py-4",
|
|
3552
|
-
children: /* @__PURE__ */
|
|
3929
|
+
children: /* @__PURE__ */ jsx18("div", {
|
|
3553
3930
|
className: "skippr:space-y-1",
|
|
3554
3931
|
children: phases.map((phase) => {
|
|
3555
3932
|
const isActive = phase.status === "active";
|
|
3556
3933
|
const isCompleted = phase.status === "completed";
|
|
3557
|
-
return /* @__PURE__ */
|
|
3934
|
+
return /* @__PURE__ */ jsxs15("div", {
|
|
3558
3935
|
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"),
|
|
3559
3936
|
children: [
|
|
3560
|
-
/* @__PURE__ */
|
|
3937
|
+
/* @__PURE__ */ jsx18("div", {
|
|
3561
3938
|
className: "skippr:mt-0.5",
|
|
3562
|
-
children: isCompleted ? /* @__PURE__ */
|
|
3939
|
+
children: isCompleted ? /* @__PURE__ */ jsx18(CircleCheck, {
|
|
3563
3940
|
className: "skippr:size-4 skippr:text-chart-3"
|
|
3564
|
-
}) : isActive ? /* @__PURE__ */
|
|
3941
|
+
}) : isActive ? /* @__PURE__ */ jsx18(Circle, {
|
|
3565
3942
|
className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
|
|
3566
|
-
}) : /* @__PURE__ */
|
|
3943
|
+
}) : /* @__PURE__ */ jsx18(Circle, {
|
|
3567
3944
|
className: "skippr:size-4 skippr:text-muted-foreground/30"
|
|
3568
3945
|
})
|
|
3569
3946
|
}),
|
|
3570
|
-
/* @__PURE__ */
|
|
3947
|
+
/* @__PURE__ */ jsxs15("div", {
|
|
3571
3948
|
className: "skippr:min-w-0 skippr:flex-1",
|
|
3572
3949
|
children: [
|
|
3573
|
-
/* @__PURE__ */
|
|
3950
|
+
/* @__PURE__ */ jsx18("p", {
|
|
3574
3951
|
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"),
|
|
3575
3952
|
children: phase.name
|
|
3576
3953
|
}),
|
|
3577
|
-
phase.highlights.length > 0 && /* @__PURE__ */
|
|
3954
|
+
phase.highlights.length > 0 && /* @__PURE__ */ jsx18("ul", {
|
|
3578
3955
|
className: "skippr:mt-1 skippr:space-y-0.5",
|
|
3579
|
-
children: phase.highlights.map((text) => /* @__PURE__ */
|
|
3956
|
+
children: phase.highlights.map((text) => /* @__PURE__ */ jsxs15("li", {
|
|
3580
3957
|
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"),
|
|
3581
3958
|
children: [
|
|
3582
|
-
/* @__PURE__ */
|
|
3959
|
+
/* @__PURE__ */ jsx18("span", {
|
|
3583
3960
|
className: "skippr:size-1 skippr:shrink-0 skippr:rounded-full skippr:bg-current"
|
|
3584
3961
|
}),
|
|
3585
3962
|
text
|
|
@@ -3596,12 +3973,12 @@ function SessionAgenda({ phases, hasStarted }) {
|
|
|
3596
3973
|
}
|
|
3597
3974
|
|
|
3598
3975
|
// src/components/SessionWarningBanner.tsx
|
|
3599
|
-
import { jsx as
|
|
3976
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
3600
3977
|
var SESSION_WARNING_THRESHOLD_SECS = 60;
|
|
3601
3978
|
function SessionWarningBanner({ remaining }) {
|
|
3602
3979
|
if (remaining === null || remaining <= 0 || remaining > SESSION_WARNING_THRESHOLD_SECS)
|
|
3603
3980
|
return null;
|
|
3604
|
-
return /* @__PURE__ */
|
|
3981
|
+
return /* @__PURE__ */ jsx19("div", {
|
|
3605
3982
|
"data-testid": "session-warning-banner",
|
|
3606
3983
|
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",
|
|
3607
3984
|
children: "Session ending soon"
|
|
@@ -3609,7 +3986,7 @@ function SessionWarningBanner({ remaining }) {
|
|
|
3609
3986
|
}
|
|
3610
3987
|
|
|
3611
3988
|
// src/components/StartSessionPrompt.tsx
|
|
3612
|
-
import { jsx as
|
|
3989
|
+
import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
3613
3990
|
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";
|
|
3614
3991
|
function StartSessionPrompt({
|
|
3615
3992
|
onStartSession,
|
|
@@ -3621,16 +3998,16 @@ function StartSessionPrompt({
|
|
|
3621
3998
|
canResume = false,
|
|
3622
3999
|
onResume
|
|
3623
4000
|
}) {
|
|
3624
|
-
return /* @__PURE__ */
|
|
4001
|
+
return /* @__PURE__ */ jsxs16("div", {
|
|
3625
4002
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:px-4",
|
|
3626
4003
|
children: [
|
|
3627
|
-
canResume && onResume ? /* @__PURE__ */
|
|
4004
|
+
canResume && onResume ? /* @__PURE__ */ jsx20("button", {
|
|
3628
4005
|
type: "button",
|
|
3629
4006
|
onClick: onResume,
|
|
3630
4007
|
disabled: isStarting,
|
|
3631
4008
|
className: PROMPT_BUTTON,
|
|
3632
4009
|
children: isStarting ? "Resuming..." : "Resume session"
|
|
3633
|
-
}) : /* @__PURE__ */
|
|
4010
|
+
}) : /* @__PURE__ */ jsx20("button", {
|
|
3634
4011
|
type: "button",
|
|
3635
4012
|
onClick: () => {
|
|
3636
4013
|
if (!agentId)
|
|
@@ -3641,7 +4018,7 @@ function StartSessionPrompt({
|
|
|
3641
4018
|
className: PROMPT_BUTTON,
|
|
3642
4019
|
children: isStarting ? "Starting..." : label
|
|
3643
4020
|
}),
|
|
3644
|
-
error && /* @__PURE__ */
|
|
4021
|
+
error && /* @__PURE__ */ jsx20("p", {
|
|
3645
4022
|
className: "skippr:text-xs skippr:text-destructive",
|
|
3646
4023
|
children: error
|
|
3647
4024
|
})
|
|
@@ -3650,7 +4027,7 @@ function StartSessionPrompt({
|
|
|
3650
4027
|
}
|
|
3651
4028
|
|
|
3652
4029
|
// src/components/Sidebar.tsx
|
|
3653
|
-
import { jsx as
|
|
4030
|
+
import { jsx as jsx21, jsxs as jsxs17, Fragment as Fragment5 } from "react/jsx-runtime";
|
|
3654
4031
|
function Sidebar({
|
|
3655
4032
|
hideControls = false,
|
|
3656
4033
|
hideHeader = false,
|
|
@@ -3692,7 +4069,7 @@ function Sidebar({
|
|
|
3692
4069
|
const showAgenda = agentMode !== AGENT_MODE.AlwaysOn;
|
|
3693
4070
|
const isFloating = variant === "floating";
|
|
3694
4071
|
const isSidebar = variant === "sidebar";
|
|
3695
|
-
|
|
4072
|
+
useEffect18(() => {
|
|
3696
4073
|
if (!isSidebar)
|
|
3697
4074
|
return;
|
|
3698
4075
|
const prop = position === "right" ? "marginRight" : "marginLeft";
|
|
@@ -3706,12 +4083,12 @@ function Sidebar({
|
|
|
3706
4083
|
document.body.style.transition = "";
|
|
3707
4084
|
};
|
|
3708
4085
|
}, [isSidebar, isPanelOpen, position]);
|
|
3709
|
-
return /* @__PURE__ */
|
|
4086
|
+
return /* @__PURE__ */ jsxs17("div", {
|
|
3710
4087
|
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:bottom-[88px] 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 && (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"),
|
|
3711
4088
|
style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined },
|
|
3712
4089
|
children: [
|
|
3713
|
-
!hideHeader && /* @__PURE__ */
|
|
3714
|
-
authFailed ? /* @__PURE__ */
|
|
4090
|
+
!hideHeader && /* @__PURE__ */ jsx21(ChatHeader, {}),
|
|
4091
|
+
authFailed ? /* @__PURE__ */ jsx21(AuthError, {}) : isAuthenticated ? /* @__PURE__ */ jsx21(AuthenticatedContent, {
|
|
3715
4092
|
isConnected,
|
|
3716
4093
|
isPaused,
|
|
3717
4094
|
isPausing,
|
|
@@ -3733,12 +4110,12 @@ function Sidebar({
|
|
|
3733
4110
|
agentId,
|
|
3734
4111
|
agentControls,
|
|
3735
4112
|
showAgenda
|
|
3736
|
-
}) : usesHostAuth || isValidating ? /* @__PURE__ */
|
|
4113
|
+
}) : usesHostAuth || isValidating ? /* @__PURE__ */ jsx21("div", {
|
|
3737
4114
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
3738
|
-
children: /* @__PURE__ */
|
|
4115
|
+
children: /* @__PURE__ */ jsx21(LoadingDots, {
|
|
3739
4116
|
label: "Loading..."
|
|
3740
4117
|
})
|
|
3741
|
-
}) : /* @__PURE__ */
|
|
4118
|
+
}) : /* @__PURE__ */ jsx21(LoginFlow, {
|
|
3742
4119
|
requestOtp,
|
|
3743
4120
|
verifyOtp,
|
|
3744
4121
|
error: authError,
|
|
@@ -3782,63 +4159,63 @@ function AuthenticatedContent({
|
|
|
3782
4159
|
} else if (isPaused) {
|
|
3783
4160
|
transitionLabel = "Paused";
|
|
3784
4161
|
}
|
|
3785
|
-
return /* @__PURE__ */
|
|
4162
|
+
return /* @__PURE__ */ jsxs17(Fragment5, {
|
|
3786
4163
|
children: [
|
|
3787
|
-
isConnected && /* @__PURE__ */
|
|
3788
|
-
showTabBar && /* @__PURE__ */
|
|
4164
|
+
isConnected && /* @__PURE__ */ jsx21(ConnectedBanner, {}),
|
|
4165
|
+
showTabBar && /* @__PURE__ */ jsxs17("div", {
|
|
3789
4166
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-2",
|
|
3790
4167
|
children: [
|
|
3791
|
-
/* @__PURE__ */
|
|
4168
|
+
/* @__PURE__ */ jsxs17("button", {
|
|
3792
4169
|
type: "button",
|
|
3793
4170
|
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"),
|
|
3794
4171
|
onClick: () => onTabChange("chat"),
|
|
3795
4172
|
children: [
|
|
3796
|
-
/* @__PURE__ */
|
|
4173
|
+
/* @__PURE__ */ jsx21(MessageCircle, {
|
|
3797
4174
|
className: "skippr:size-3.5"
|
|
3798
4175
|
}),
|
|
3799
4176
|
"Chat",
|
|
3800
|
-
activeTab === "chat" && /* @__PURE__ */
|
|
4177
|
+
activeTab === "chat" && /* @__PURE__ */ jsx21("span", {
|
|
3801
4178
|
className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
3802
4179
|
})
|
|
3803
4180
|
]
|
|
3804
4181
|
}),
|
|
3805
|
-
showAgenda && /* @__PURE__ */
|
|
4182
|
+
showAgenda && /* @__PURE__ */ jsxs17("button", {
|
|
3806
4183
|
type: "button",
|
|
3807
4184
|
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"),
|
|
3808
4185
|
onClick: () => onTabChange("agenda"),
|
|
3809
4186
|
children: [
|
|
3810
|
-
/* @__PURE__ */
|
|
4187
|
+
/* @__PURE__ */ jsx21(Calendar, {
|
|
3811
4188
|
className: "skippr:size-3.5"
|
|
3812
4189
|
}),
|
|
3813
4190
|
"Agenda",
|
|
3814
|
-
activeTab === "agenda" && /* @__PURE__ */
|
|
4191
|
+
activeTab === "agenda" && /* @__PURE__ */ jsx21("span", {
|
|
3815
4192
|
className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
3816
4193
|
})
|
|
3817
4194
|
]
|
|
3818
4195
|
})
|
|
3819
4196
|
]
|
|
3820
4197
|
}),
|
|
3821
|
-
/* @__PURE__ */
|
|
4198
|
+
/* @__PURE__ */ jsx21("div", {
|
|
3822
4199
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
3823
|
-
children: isDisconnecting ? /* @__PURE__ */
|
|
4200
|
+
children: isDisconnecting ? /* @__PURE__ */ jsx21("div", {
|
|
3824
4201
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
3825
|
-
children: /* @__PURE__ */
|
|
4202
|
+
children: /* @__PURE__ */ jsx21(LoadingDots, {
|
|
3826
4203
|
label: "Ending session..."
|
|
3827
4204
|
})
|
|
3828
|
-
}) : showSelectorAsPrompt ? /* @__PURE__ */
|
|
4205
|
+
}) : showSelectorAsPrompt ? /* @__PURE__ */ jsx21(ModuleSelector, {}) : inSession ? /* @__PURE__ */ jsxs17(Fragment5, {
|
|
3829
4206
|
children: [
|
|
3830
|
-
transitionLabel && /* @__PURE__ */
|
|
4207
|
+
transitionLabel && /* @__PURE__ */ jsx21("div", {
|
|
3831
4208
|
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",
|
|
3832
4209
|
children: transitionLabel
|
|
3833
4210
|
}),
|
|
3834
|
-
/* @__PURE__ */
|
|
4211
|
+
/* @__PURE__ */ jsx21(ConnectedBody, {
|
|
3835
4212
|
activeTab: effectiveTab,
|
|
3836
4213
|
autoFocusChat
|
|
3837
4214
|
})
|
|
3838
4215
|
]
|
|
3839
|
-
}) : /* @__PURE__ */
|
|
4216
|
+
}) : /* @__PURE__ */ jsx21("div", {
|
|
3840
4217
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
|
|
3841
|
-
children: /* @__PURE__ */
|
|
4218
|
+
children: /* @__PURE__ */ jsx21(StartSessionPrompt, {
|
|
3842
4219
|
onStartSession,
|
|
3843
4220
|
agentId,
|
|
3844
4221
|
agentControls,
|
|
@@ -3850,7 +4227,7 @@ function AuthenticatedContent({
|
|
|
3850
4227
|
})
|
|
3851
4228
|
}, `${activeTab}-empty`)
|
|
3852
4229
|
}),
|
|
3853
|
-
(isConnected || isPaused) && !isDisconnecting && !hideControls && /* @__PURE__ */
|
|
4230
|
+
(isConnected || isPaused) && !isDisconnecting && !hideControls && /* @__PURE__ */ jsx21(MeetingControls, {
|
|
3854
4231
|
onHangUp: onDisconnect,
|
|
3855
4232
|
onPause,
|
|
3856
4233
|
onResume,
|
|
@@ -3862,17 +4239,17 @@ function AuthenticatedContent({
|
|
|
3862
4239
|
});
|
|
3863
4240
|
}
|
|
3864
4241
|
function AuthError() {
|
|
3865
|
-
return /* @__PURE__ */
|
|
4242
|
+
return /* @__PURE__ */ jsxs17("div", {
|
|
3866
4243
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:px-6 skippr:py-4 skippr:text-center",
|
|
3867
4244
|
children: [
|
|
3868
|
-
/* @__PURE__ */
|
|
4245
|
+
/* @__PURE__ */ jsx21(CircleAlert, {
|
|
3869
4246
|
className: "skippr:mb-3 skippr:size-7 skippr:text-destructive"
|
|
3870
4247
|
}),
|
|
3871
|
-
/* @__PURE__ */
|
|
4248
|
+
/* @__PURE__ */ jsx21("p", {
|
|
3872
4249
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
3873
4250
|
children: "We couldn't verify your session"
|
|
3874
4251
|
}),
|
|
3875
|
-
/* @__PURE__ */
|
|
4252
|
+
/* @__PURE__ */ jsx21("p", {
|
|
3876
4253
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
3877
4254
|
children: "Please contact administrator."
|
|
3878
4255
|
})
|
|
@@ -3881,7 +4258,7 @@ function AuthError() {
|
|
|
3881
4258
|
}
|
|
3882
4259
|
function ConnectedBanner() {
|
|
3883
4260
|
const remaining = useSessionRemaining();
|
|
3884
|
-
return /* @__PURE__ */
|
|
4261
|
+
return /* @__PURE__ */ jsx21(SessionWarningBanner, {
|
|
3885
4262
|
remaining
|
|
3886
4263
|
});
|
|
3887
4264
|
}
|
|
@@ -3892,17 +4269,17 @@ function ConnectedBody({
|
|
|
3892
4269
|
const { allMessages, agentState, sendChatMessage, isSendingChat } = useCombinedMessages();
|
|
3893
4270
|
const { phases } = usePhaseUpdates();
|
|
3894
4271
|
if (activeTab === "agenda") {
|
|
3895
|
-
return /* @__PURE__ */
|
|
4272
|
+
return /* @__PURE__ */ jsx21("div", {
|
|
3896
4273
|
className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto skippr:animate-skippr-tab-fade",
|
|
3897
|
-
children: /* @__PURE__ */
|
|
4274
|
+
children: /* @__PURE__ */ jsx21(SessionAgenda, {
|
|
3898
4275
|
phases,
|
|
3899
4276
|
hasStarted: allMessages.length > 0 || agentState === "speaking"
|
|
3900
4277
|
})
|
|
3901
4278
|
}, "agenda");
|
|
3902
4279
|
}
|
|
3903
|
-
return /* @__PURE__ */
|
|
4280
|
+
return /* @__PURE__ */ jsx21("div", {
|
|
3904
4281
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
|
|
3905
|
-
children: /* @__PURE__ */
|
|
4282
|
+
children: /* @__PURE__ */ jsx21(MessageList, {
|
|
3906
4283
|
messages: allMessages,
|
|
3907
4284
|
isStreaming: agentState === "speaking",
|
|
3908
4285
|
sendChatMessage,
|
|
@@ -3913,28 +4290,28 @@ function ConnectedBody({
|
|
|
3913
4290
|
}
|
|
3914
4291
|
|
|
3915
4292
|
// src/components/SidebarTrigger.tsx
|
|
3916
|
-
import { jsx as
|
|
4293
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
3917
4294
|
function SidebarTrigger() {
|
|
3918
4295
|
const { isPanelOpen, togglePanel, minimizePanel, minimizable, position, isMinimized } = useLiveAgent();
|
|
3919
4296
|
if (isMinimized)
|
|
3920
4297
|
return null;
|
|
3921
4298
|
const handleClick = isPanelOpen && minimizable ? minimizePanel : togglePanel;
|
|
3922
|
-
return /* @__PURE__ */
|
|
4299
|
+
return /* @__PURE__ */ jsx22("button", {
|
|
3923
4300
|
type: "button",
|
|
3924
4301
|
onClick: handleClick,
|
|
3925
4302
|
title: isPanelOpen ? "Close chat" : "Open chat",
|
|
3926
4303
|
"aria-label": isPanelOpen ? "Close chat" : "Open chat",
|
|
3927
4304
|
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"),
|
|
3928
|
-
children: isPanelOpen ? /* @__PURE__ */
|
|
4305
|
+
children: isPanelOpen ? /* @__PURE__ */ jsx22(ChevronDown, {
|
|
3929
4306
|
className: "skippr:size-5"
|
|
3930
|
-
}) : /* @__PURE__ */
|
|
4307
|
+
}) : /* @__PURE__ */ jsx22(Logo, {
|
|
3931
4308
|
className: "skippr:size-12"
|
|
3932
4309
|
})
|
|
3933
4310
|
});
|
|
3934
4311
|
}
|
|
3935
4312
|
|
|
3936
4313
|
// src/components/LiveAgent.tsx
|
|
3937
|
-
import { jsx as
|
|
4314
|
+
import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
3938
4315
|
function LiveAgent(props) {
|
|
3939
4316
|
const {
|
|
3940
4317
|
agentId: hostAgentId,
|
|
@@ -3966,20 +4343,20 @@ function LiveAgent(props) {
|
|
|
3966
4343
|
const usesHostAuth = !!getUserToken || !!userToken || !!authTokenProp;
|
|
3967
4344
|
const effectiveAuthToken = usesHostAuth ? authTokenProp : auth.authToken ?? undefined;
|
|
3968
4345
|
const hasModuleSelector = !hostAgentId;
|
|
3969
|
-
const [activeModule, setActiveModule] =
|
|
4346
|
+
const [activeModule, setActiveModule] = useState14(null);
|
|
3970
4347
|
const agentId = hasModuleSelector ? activeModule?.id ?? null : hostAgentId;
|
|
3971
4348
|
const agentControls = hasModuleSelector ? activeModule?.controls : hostAgentControls;
|
|
3972
|
-
const minimizeOnSessionStart =
|
|
4349
|
+
const minimizeOnSessionStart = useCallback9(() => {
|
|
3973
4350
|
if (minimizable) {
|
|
3974
4351
|
setIsMinimized(true);
|
|
3975
4352
|
setIsPanelOpen(false);
|
|
3976
4353
|
}
|
|
3977
4354
|
}, [minimizable]);
|
|
3978
|
-
const expandOnSessionStartError =
|
|
4355
|
+
const expandOnSessionStartError = useCallback9(() => {
|
|
3979
4356
|
setIsMinimized(false);
|
|
3980
4357
|
setIsPanelOpen(true);
|
|
3981
4358
|
}, []);
|
|
3982
|
-
const minimizeOnSessionDisconnect =
|
|
4359
|
+
const minimizeOnSessionDisconnect = useCallback9(() => {
|
|
3983
4360
|
if (hasModuleSelector) {
|
|
3984
4361
|
setActiveModule(null);
|
|
3985
4362
|
}
|
|
@@ -4015,17 +4392,17 @@ function LiveAgent(props) {
|
|
|
4015
4392
|
onStartError: expandOnSessionStartError,
|
|
4016
4393
|
onDisconnect: minimizeOnSessionDisconnect
|
|
4017
4394
|
});
|
|
4018
|
-
const teardownInFlightRef =
|
|
4395
|
+
const teardownInFlightRef = useRef13(false);
|
|
4019
4396
|
teardownInFlightRef.current = isPaused || isPausing || isDisconnecting;
|
|
4020
|
-
const handleRoomDisconnected =
|
|
4397
|
+
const handleRoomDisconnected = useCallback9(() => {
|
|
4021
4398
|
if (teardownInFlightRef.current)
|
|
4022
4399
|
return;
|
|
4023
4400
|
disconnect();
|
|
4024
4401
|
}, [disconnect]);
|
|
4025
|
-
const [isPanelOpen, setIsPanelOpen] =
|
|
4026
|
-
const [isMinimized, setIsMinimized] =
|
|
4027
|
-
const [sidebarTab, setSidebarTab] =
|
|
4028
|
-
const [phasesSnapshot, setPhasesSnapshot] =
|
|
4402
|
+
const [isPanelOpen, setIsPanelOpen] = useState14(defaultOpen);
|
|
4403
|
+
const [isMinimized, setIsMinimized] = useState14(minimizable && !defaultOpen);
|
|
4404
|
+
const [sidebarTab, setSidebarTab] = useState14("agenda");
|
|
4405
|
+
const [phasesSnapshot, setPhasesSnapshot] = useState14([]);
|
|
4029
4406
|
const {
|
|
4030
4407
|
modules: availableModules,
|
|
4031
4408
|
isLoading: isLoadingModules,
|
|
@@ -4045,7 +4422,7 @@ function LiveAgent(props) {
|
|
|
4045
4422
|
}, [activeModule, hostAgentId, availableModules]);
|
|
4046
4423
|
const agentMode = activeModuleForAgent?.mode ?? null;
|
|
4047
4424
|
const resumableSession = useMemo5(() => getResumableSession(activeModuleForAgent), [activeModuleForAgent]);
|
|
4048
|
-
const resumeSession =
|
|
4425
|
+
const resumeSession = useCallback9(async () => {
|
|
4049
4426
|
if (!resumableSession)
|
|
4050
4427
|
return;
|
|
4051
4428
|
await startSession({
|
|
@@ -4054,7 +4431,7 @@ function LiveAgent(props) {
|
|
|
4054
4431
|
existingSessionId: resumableSession.id
|
|
4055
4432
|
});
|
|
4056
4433
|
}, [resumableSession, startSession, agentControls]);
|
|
4057
|
-
const selectModule =
|
|
4434
|
+
const selectModule = useCallback9((moduleId) => {
|
|
4058
4435
|
const found = availableModules.find((m) => m.id === moduleId);
|
|
4059
4436
|
if (!found)
|
|
4060
4437
|
return;
|
|
@@ -4065,9 +4442,9 @@ function LiveAgent(props) {
|
|
|
4065
4442
|
existingSessionId: getResumableSessionId(found.currentSession, found.mode)
|
|
4066
4443
|
});
|
|
4067
4444
|
}, [availableModules, startSession]);
|
|
4068
|
-
const [welcomeDismissed, setWelcomeDismissed] =
|
|
4069
|
-
const dismissWelcome =
|
|
4070
|
-
const [currentPosition, setCurrentPosition] =
|
|
4445
|
+
const [welcomeDismissed, setWelcomeDismissed] = useState14(false);
|
|
4446
|
+
const dismissWelcome = useCallback9(() => setWelcomeDismissed(true), []);
|
|
4447
|
+
const [currentPosition, setCurrentPosition] = useState14(() => {
|
|
4071
4448
|
try {
|
|
4072
4449
|
const saved = localStorage.getItem("skippr_widget_position");
|
|
4073
4450
|
if (saved === "left" || saved === "right")
|
|
@@ -4075,20 +4452,20 @@ function LiveAgent(props) {
|
|
|
4075
4452
|
} catch {}
|
|
4076
4453
|
return position;
|
|
4077
4454
|
});
|
|
4078
|
-
const setPositionWithPersist =
|
|
4455
|
+
const setPositionWithPersist = useCallback9((pos) => {
|
|
4079
4456
|
setCurrentPosition(pos);
|
|
4080
4457
|
try {
|
|
4081
4458
|
localStorage.setItem("skippr_widget_position", pos);
|
|
4082
4459
|
} catch {}
|
|
4083
4460
|
}, []);
|
|
4084
|
-
const openPanel =
|
|
4085
|
-
const closePanel =
|
|
4086
|
-
const togglePanel =
|
|
4087
|
-
const expandPanel =
|
|
4461
|
+
const openPanel = useCallback9(() => setIsPanelOpen(true), []);
|
|
4462
|
+
const closePanel = useCallback9(() => setIsPanelOpen(false), []);
|
|
4463
|
+
const togglePanel = useCallback9(() => setIsPanelOpen((prev) => !prev), []);
|
|
4464
|
+
const expandPanel = useCallback9(() => {
|
|
4088
4465
|
setIsMinimized(false);
|
|
4089
4466
|
setIsPanelOpen(true);
|
|
4090
4467
|
}, []);
|
|
4091
|
-
const minimizePanel =
|
|
4468
|
+
const minimizePanel = useCallback9(() => {
|
|
4092
4469
|
if (!minimizable)
|
|
4093
4470
|
return;
|
|
4094
4471
|
setIsMinimized(true);
|
|
@@ -4199,33 +4576,34 @@ function LiveAgent(props) {
|
|
|
4199
4576
|
refetchModules,
|
|
4200
4577
|
selectModule
|
|
4201
4578
|
]);
|
|
4202
|
-
return /* @__PURE__ */
|
|
4579
|
+
return /* @__PURE__ */ jsx23(LiveAgentContext.Provider, {
|
|
4203
4580
|
value: ctx,
|
|
4204
|
-
children: /* @__PURE__ */
|
|
4581
|
+
children: /* @__PURE__ */ jsxs18(LiveKitRoom, {
|
|
4205
4582
|
serverUrl: connection?.livekitUrl,
|
|
4206
4583
|
token: connection?.token,
|
|
4207
4584
|
connect: shouldConnect,
|
|
4208
4585
|
audio: true,
|
|
4209
4586
|
onDisconnected: handleRoomDisconnected,
|
|
4210
4587
|
children: [
|
|
4211
|
-
connection && /* @__PURE__ */
|
|
4212
|
-
connection && captureMode === "screenshare" && /* @__PURE__ */
|
|
4588
|
+
connection && /* @__PURE__ */ jsx23(RoomAudioRenderer, {}),
|
|
4589
|
+
connection && captureMode === "screenshare" && /* @__PURE__ */ jsx23(AutoStartMedia, {
|
|
4213
4590
|
pendingScreenStream
|
|
4214
4591
|
}),
|
|
4215
|
-
connection && captureMode === "auto" && /* @__PURE__ */
|
|
4216
|
-
/* @__PURE__ */
|
|
4592
|
+
connection && captureMode === "auto" && /* @__PURE__ */ jsx23(DomCapture, {}),
|
|
4593
|
+
/* @__PURE__ */ jsxs18(ShadowHost, {
|
|
4217
4594
|
children: [
|
|
4218
|
-
connection && captureMode === "auto" && agentControls?.highlight && /* @__PURE__ */
|
|
4219
|
-
/* @__PURE__ */
|
|
4595
|
+
connection && captureMode === "auto" && agentControls?.highlight && /* @__PURE__ */ jsx23(HighlightOverlay, {}),
|
|
4596
|
+
connection && captureMode === "auto" && agentControls?.actions && /* @__PURE__ */ jsx23(PageActionHandler, {}),
|
|
4597
|
+
/* @__PURE__ */ jsxs18("div", {
|
|
4220
4598
|
id: WIDGET_ROOT_ID,
|
|
4221
4599
|
children: [
|
|
4222
|
-
isMinimized && /* @__PURE__ */
|
|
4600
|
+
isMinimized && /* @__PURE__ */ jsx23(MinimizedBubble, {
|
|
4223
4601
|
welcomeMessage,
|
|
4224
4602
|
welcomeDismissed,
|
|
4225
4603
|
onDismissWelcome: dismissWelcome
|
|
4226
4604
|
}),
|
|
4227
|
-
/* @__PURE__ */
|
|
4228
|
-
/* @__PURE__ */
|
|
4605
|
+
/* @__PURE__ */ jsx23(SidebarTrigger, {}),
|
|
4606
|
+
/* @__PURE__ */ jsx23(Sidebar, {
|
|
4229
4607
|
hideControls,
|
|
4230
4608
|
hideHeader,
|
|
4231
4609
|
startSessionLabel
|