@skippr/live-agent-sdk 0.25.0 → 0.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/lib-exports.js +280 -210
- package/dist/skippr-sdk.js +136 -136
- package/dist/types/components/Logo.d.ts +5 -0
- package/package.json +1 -1
- package/dist/esm/logo-icon-cn8fyke6.png +0 -0
- package/dist/logo-icon-cn8fyke6.png +0 -0
- package/dist/types/lib/assets.d.ts +0 -1
package/dist/esm/lib-exports.js
CHANGED
|
@@ -597,12 +597,6 @@ function useMediaControls() {
|
|
|
597
597
|
return { isMuted, toggleMute, isScreenSharing, toggleScreenShare };
|
|
598
598
|
}
|
|
599
599
|
|
|
600
|
-
// src/assets/logo-icon.png
|
|
601
|
-
var logo_icon_default = "./logo-icon-cn8fyke6.png";
|
|
602
|
-
|
|
603
|
-
// src/lib/assets.ts
|
|
604
|
-
var LOGO_URL = logo_icon_default;
|
|
605
|
-
|
|
606
600
|
// src/lib/utils.ts
|
|
607
601
|
import { clsx } from "clsx";
|
|
608
602
|
import { twMerge } from "tailwind-merge";
|
|
@@ -610,19 +604,101 @@ function cn(...inputs) {
|
|
|
610
604
|
return twMerge(clsx(inputs));
|
|
611
605
|
}
|
|
612
606
|
|
|
613
|
-
// src/components/
|
|
607
|
+
// src/components/Logo.tsx
|
|
608
|
+
import { useId } from "react";
|
|
614
609
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
610
|
+
function Logo({ className }) {
|
|
611
|
+
const reactId = useId().replace(/:/g, "");
|
|
612
|
+
const clipId = `skippr-logo-clip-${reactId}`;
|
|
613
|
+
const gradientId = `skippr-logo-gradient-${reactId}`;
|
|
614
|
+
return /* @__PURE__ */ jsxs("svg", {
|
|
615
|
+
width: "1em",
|
|
616
|
+
height: "1em",
|
|
617
|
+
viewBox: "0 0 30 30",
|
|
618
|
+
fill: "none",
|
|
619
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
620
|
+
role: "img",
|
|
621
|
+
"aria-label": "Skippr",
|
|
622
|
+
className,
|
|
623
|
+
children: [
|
|
624
|
+
/* @__PURE__ */ jsxs("g", {
|
|
625
|
+
clipPath: `url(#${clipId})`,
|
|
626
|
+
children: [
|
|
627
|
+
/* @__PURE__ */ jsx("path", {
|
|
628
|
+
d: "M0 10C0 4.47715 4.47715 0 10 0H20C25.5228 0 30 4.47715 30 10V20C30 25.5228 25.5228 30 20 30H10C4.47715 30 0 25.5228 0 20V10Z",
|
|
629
|
+
fill: "#2D2D3F"
|
|
630
|
+
}),
|
|
631
|
+
/* @__PURE__ */ jsx("rect", {
|
|
632
|
+
x: "7.83325",
|
|
633
|
+
y: "14.9404",
|
|
634
|
+
width: "12.4083",
|
|
635
|
+
height: "4.72833",
|
|
636
|
+
rx: "2.36417",
|
|
637
|
+
transform: "rotate(-45 7.83325 14.9404)",
|
|
638
|
+
fill: "#52FFF9"
|
|
639
|
+
}),
|
|
640
|
+
/* @__PURE__ */ jsx("path", {
|
|
641
|
+
d: "M18.8975 12.5928C20.2728 12.5928 21.3877 13.647 21.3877 14.9474C21.3877 16.2479 20.2728 17.3021 18.8975 17.3021L11.4269 17.3021C10.0516 17.3021 8.93665 16.2479 8.93665 14.9474C8.93665 13.647 10.0516 12.5928 11.4269 12.5928L18.8975 12.5928Z",
|
|
642
|
+
fill: `url(#${gradientId})`
|
|
643
|
+
}),
|
|
644
|
+
/* @__PURE__ */ jsx("rect", {
|
|
645
|
+
x: "10.1665",
|
|
646
|
+
y: "20.4404",
|
|
647
|
+
width: "12.4083",
|
|
648
|
+
height: "4.72833",
|
|
649
|
+
rx: "2.36417",
|
|
650
|
+
transform: "rotate(-45 10.1665 20.4404)",
|
|
651
|
+
fill: "white"
|
|
652
|
+
})
|
|
653
|
+
]
|
|
654
|
+
}),
|
|
655
|
+
/* @__PURE__ */ jsxs("defs", {
|
|
656
|
+
children: [
|
|
657
|
+
/* @__PURE__ */ jsxs("linearGradient", {
|
|
658
|
+
id: gradientId,
|
|
659
|
+
x1: "18.9237",
|
|
660
|
+
y1: "16.9997",
|
|
661
|
+
x2: "11.4129",
|
|
662
|
+
y2: "14.1904",
|
|
663
|
+
gradientUnits: "userSpaceOnUse",
|
|
664
|
+
children: [
|
|
665
|
+
/* @__PURE__ */ jsx("stop", {
|
|
666
|
+
offset: "0.473958",
|
|
667
|
+
stopColor: "white"
|
|
668
|
+
}),
|
|
669
|
+
/* @__PURE__ */ jsx("stop", {
|
|
670
|
+
offset: "1",
|
|
671
|
+
stopColor: "#52FFF9"
|
|
672
|
+
})
|
|
673
|
+
]
|
|
674
|
+
}),
|
|
675
|
+
/* @__PURE__ */ jsx("clipPath", {
|
|
676
|
+
id: clipId,
|
|
677
|
+
children: /* @__PURE__ */ jsx("rect", {
|
|
678
|
+
width: "30",
|
|
679
|
+
height: "30",
|
|
680
|
+
fill: "white"
|
|
681
|
+
})
|
|
682
|
+
})
|
|
683
|
+
]
|
|
684
|
+
})
|
|
685
|
+
]
|
|
686
|
+
});
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
// src/components/ui/tooltip.tsx
|
|
690
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
615
691
|
var ALIGN_CLASSES = {
|
|
616
692
|
center: "skippr:left-1/2 skippr:-translate-x-1/2",
|
|
617
693
|
start: "skippr:left-0",
|
|
618
694
|
end: "skippr:right-0"
|
|
619
695
|
};
|
|
620
696
|
function Tooltip({ label, children, position = "top", align = "center" }) {
|
|
621
|
-
return /* @__PURE__ */
|
|
697
|
+
return /* @__PURE__ */ jsxs2("span", {
|
|
622
698
|
className: "skippr:relative skippr:inline-flex skippr:group",
|
|
623
699
|
children: [
|
|
624
700
|
children,
|
|
625
|
-
/* @__PURE__ */
|
|
701
|
+
/* @__PURE__ */ jsx2("span", {
|
|
626
702
|
className: cn("skippr:pointer-events-none skippr:absolute skippr:z-10", "skippr:whitespace-nowrap skippr:rounded-md skippr:bg-foreground skippr:px-2 skippr:py-1", "skippr:text-[11px] skippr:text-background skippr:font-medium", "skippr:opacity-0 skippr:scale-95 skippr:transition-all skippr:duration-150", "skippr:group-hover:opacity-100 skippr:group-hover:scale-100", "skippr:group-focus-within:opacity-100 skippr:group-focus-within:scale-100", ALIGN_CLASSES[align], position === "top" && "skippr:bottom-full skippr:mb-1.5", position === "bottom" && "skippr:top-full skippr:mt-1.5"),
|
|
627
703
|
"aria-hidden": "true",
|
|
628
704
|
children: label
|
|
@@ -632,50 +708,48 @@ function Tooltip({ label, children, position = "top", align = "center" }) {
|
|
|
632
708
|
}
|
|
633
709
|
|
|
634
710
|
// src/components/MinimizedBubble.tsx
|
|
635
|
-
import { jsx as
|
|
711
|
+
import { jsx as jsx3, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
|
|
636
712
|
var BUBBLE_BUTTON = "skippr:flex skippr:size-12 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-[14px] skippr:shadow-[0_4px_16px_rgba(45,43,61,0.45),0_2px_4px_rgba(0,0,0,0.1)] skippr:transition-all skippr:hover:-translate-y-0.5 skippr:active:translate-y-0";
|
|
637
713
|
function AgentBubbleContent({ agentState }) {
|
|
638
714
|
if (agentState === "speaking") {
|
|
639
|
-
return /* @__PURE__ */
|
|
715
|
+
return /* @__PURE__ */ jsxs3("div", {
|
|
640
716
|
className: "skippr:flex skippr:h-5 skippr:items-center skippr:justify-center skippr:gap-[3px]",
|
|
641
717
|
children: [
|
|
642
|
-
/* @__PURE__ */
|
|
718
|
+
/* @__PURE__ */ jsx3("span", {
|
|
643
719
|
className: "skippr:w-[3px] skippr:h-2 skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_infinite]"
|
|
644
720
|
}),
|
|
645
|
-
/* @__PURE__ */
|
|
721
|
+
/* @__PURE__ */ jsx3("span", {
|
|
646
722
|
className: "skippr:w-[3px] skippr:h-3.5 skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_0.15s_infinite]"
|
|
647
723
|
}),
|
|
648
|
-
/* @__PURE__ */
|
|
724
|
+
/* @__PURE__ */ jsx3("span", {
|
|
649
725
|
className: "skippr:w-[3px] skippr:h-2.5 skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_0.3s_infinite]"
|
|
650
726
|
}),
|
|
651
|
-
/* @__PURE__ */
|
|
727
|
+
/* @__PURE__ */ jsx3("span", {
|
|
652
728
|
className: "skippr:w-[3px] skippr:h-4 skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_0.45s_infinite]"
|
|
653
729
|
}),
|
|
654
|
-
/* @__PURE__ */
|
|
730
|
+
/* @__PURE__ */ jsx3("span", {
|
|
655
731
|
className: "skippr:w-[3px] skippr:h-1.5 skippr:rounded-sm skippr:bg-white skippr:animate-[skippr-speak_1.1s_ease-in-out_0.6s_infinite]"
|
|
656
732
|
})
|
|
657
733
|
]
|
|
658
734
|
});
|
|
659
735
|
}
|
|
660
736
|
if (agentState === "thinking") {
|
|
661
|
-
return /* @__PURE__ */
|
|
737
|
+
return /* @__PURE__ */ jsxs3("div", {
|
|
662
738
|
className: "skippr:flex skippr:items-center skippr:justify-center skippr:gap-[4px]",
|
|
663
739
|
children: [
|
|
664
|
-
/* @__PURE__ */
|
|
740
|
+
/* @__PURE__ */ jsx3("span", {
|
|
665
741
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
666
742
|
}),
|
|
667
|
-
/* @__PURE__ */
|
|
743
|
+
/* @__PURE__ */ jsx3("span", {
|
|
668
744
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
669
745
|
}),
|
|
670
|
-
/* @__PURE__ */
|
|
746
|
+
/* @__PURE__ */ jsx3("span", {
|
|
671
747
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-white skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
672
748
|
})
|
|
673
749
|
]
|
|
674
750
|
});
|
|
675
751
|
}
|
|
676
|
-
return /* @__PURE__ */
|
|
677
|
-
src: LOGO_URL,
|
|
678
|
-
alt: "Skippr",
|
|
752
|
+
return /* @__PURE__ */ jsx3(Logo, {
|
|
679
753
|
className: "skippr:size-7"
|
|
680
754
|
});
|
|
681
755
|
}
|
|
@@ -684,60 +758,60 @@ function ConnectedBubbleContent() {
|
|
|
684
758
|
const { state: agentState } = useAgentVoiceState();
|
|
685
759
|
const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
|
|
686
760
|
const tooltipAlign = position === "right" ? "end" : "start";
|
|
687
|
-
return /* @__PURE__ */
|
|
761
|
+
return /* @__PURE__ */ jsxs3(Fragment, {
|
|
688
762
|
children: [
|
|
689
|
-
/* @__PURE__ */
|
|
763
|
+
/* @__PURE__ */ jsx3(Tooltip, {
|
|
690
764
|
label: isMuted ? "Unmute" : "Mute",
|
|
691
765
|
align: tooltipAlign,
|
|
692
|
-
children: /* @__PURE__ */
|
|
766
|
+
children: /* @__PURE__ */ jsx3("button", {
|
|
693
767
|
type: "button",
|
|
694
768
|
onClick: toggleMute,
|
|
695
769
|
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
696
770
|
className: cn(BUBBLE_BUTTON, isMuted ? "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90" : "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted"),
|
|
697
|
-
children: isMuted ? /* @__PURE__ */
|
|
771
|
+
children: isMuted ? /* @__PURE__ */ jsx3(MicOff, {
|
|
698
772
|
className: "skippr:size-5"
|
|
699
|
-
}) : /* @__PURE__ */
|
|
773
|
+
}) : /* @__PURE__ */ jsx3(Mic, {
|
|
700
774
|
className: "skippr:size-5"
|
|
701
775
|
})
|
|
702
776
|
})
|
|
703
777
|
}),
|
|
704
|
-
/* @__PURE__ */
|
|
778
|
+
/* @__PURE__ */ jsx3(Tooltip, {
|
|
705
779
|
label: isScreenSharing ? "Stop sharing" : "Share screen",
|
|
706
780
|
align: tooltipAlign,
|
|
707
|
-
children: /* @__PURE__ */
|
|
781
|
+
children: /* @__PURE__ */ jsx3("button", {
|
|
708
782
|
type: "button",
|
|
709
783
|
onClick: toggleScreenShare,
|
|
710
784
|
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
711
785
|
className: cn(BUBBLE_BUTTON, isScreenSharing ? "skippr:bg-bubble skippr:text-white skippr:hover:brightness-110" : "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted"),
|
|
712
|
-
children: isScreenSharing ? /* @__PURE__ */
|
|
786
|
+
children: isScreenSharing ? /* @__PURE__ */ jsx3(MonitorOff, {
|
|
713
787
|
className: "skippr:size-5"
|
|
714
|
-
}) : /* @__PURE__ */
|
|
788
|
+
}) : /* @__PURE__ */ jsx3(Monitor, {
|
|
715
789
|
className: "skippr:size-5"
|
|
716
790
|
})
|
|
717
791
|
})
|
|
718
792
|
}),
|
|
719
|
-
/* @__PURE__ */
|
|
793
|
+
/* @__PURE__ */ jsx3(Tooltip, {
|
|
720
794
|
label: "End session",
|
|
721
795
|
align: tooltipAlign,
|
|
722
|
-
children: /* @__PURE__ */
|
|
796
|
+
children: /* @__PURE__ */ jsx3("button", {
|
|
723
797
|
type: "button",
|
|
724
798
|
onClick: () => disconnect(),
|
|
725
799
|
"aria-label": "End session",
|
|
726
800
|
className: cn(BUBBLE_BUTTON, "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90"),
|
|
727
|
-
children: /* @__PURE__ */
|
|
801
|
+
children: /* @__PURE__ */ jsx3(PhoneOff, {
|
|
728
802
|
className: "skippr:size-5"
|
|
729
803
|
})
|
|
730
804
|
})
|
|
731
805
|
}),
|
|
732
|
-
/* @__PURE__ */
|
|
806
|
+
/* @__PURE__ */ jsx3(Tooltip, {
|
|
733
807
|
label: "Open chat & transcript",
|
|
734
808
|
align: tooltipAlign,
|
|
735
|
-
children: /* @__PURE__ */
|
|
809
|
+
children: /* @__PURE__ */ jsx3("button", {
|
|
736
810
|
type: "button",
|
|
737
811
|
onClick: expandPanel,
|
|
738
812
|
"aria-label": "Open chat & transcript",
|
|
739
813
|
className: cn(BUBBLE_BUTTON, "skippr:bg-bubble skippr:hover:brightness-110"),
|
|
740
|
-
children: /* @__PURE__ */
|
|
814
|
+
children: /* @__PURE__ */ jsx3(AgentBubbleContent, {
|
|
741
815
|
agentState
|
|
742
816
|
})
|
|
743
817
|
})
|
|
@@ -748,21 +822,19 @@ function ConnectedBubbleContent() {
|
|
|
748
822
|
function IdleBubbleContent() {
|
|
749
823
|
const { expandPanel, position } = useLiveAgent();
|
|
750
824
|
const tooltipAlign = position === "right" ? "end" : "start";
|
|
751
|
-
return /* @__PURE__ */
|
|
825
|
+
return /* @__PURE__ */ jsx3(Tooltip, {
|
|
752
826
|
label: "Open Skippr assistant",
|
|
753
827
|
align: tooltipAlign,
|
|
754
|
-
children: /* @__PURE__ */
|
|
828
|
+
children: /* @__PURE__ */ jsxs3("button", {
|
|
755
829
|
type: "button",
|
|
756
830
|
onClick: expandPanel,
|
|
757
831
|
"aria-label": "Skippr assistant",
|
|
758
832
|
className: cn(BUBBLE_BUTTON, "skippr:relative skippr:bg-bubble skippr:hover:brightness-110"),
|
|
759
833
|
children: [
|
|
760
|
-
/* @__PURE__ */
|
|
761
|
-
src: LOGO_URL,
|
|
762
|
-
alt: "Skippr",
|
|
834
|
+
/* @__PURE__ */ jsx3(Logo, {
|
|
763
835
|
className: "skippr:relative skippr:z-10 skippr:size-7"
|
|
764
836
|
}),
|
|
765
|
-
/* @__PURE__ */
|
|
837
|
+
/* @__PURE__ */ jsx3("span", {
|
|
766
838
|
className: "skippr:absolute skippr:-inset-[3px] skippr:animate-pulse skippr:rounded-[17px] skippr:border-2 skippr:border-bubble/50"
|
|
767
839
|
})
|
|
768
840
|
]
|
|
@@ -778,14 +850,14 @@ function WelcomeBubble({
|
|
|
778
850
|
const timer = setTimeout(onDismiss, 5000);
|
|
779
851
|
return () => clearTimeout(timer);
|
|
780
852
|
}, [onDismiss]);
|
|
781
|
-
return /* @__PURE__ */
|
|
853
|
+
return /* @__PURE__ */ jsxs3("button", {
|
|
782
854
|
type: "button",
|
|
783
855
|
className: cn("skippr:absolute skippr:bottom-full skippr:mb-3", "skippr:max-w-64 skippr:rounded-xl skippr:bg-card skippr:shadow-lg", "skippr:border skippr:border-border skippr:px-4 skippr:py-3", "skippr:text-sm skippr:text-foreground skippr:leading-relaxed skippr:text-left", "skippr:animate-[skippr-fade-in_0.3s_ease-out]", "skippr:cursor-pointer", position === "right" ? "skippr:right-0" : "skippr:left-0"),
|
|
784
856
|
onClick: onDismiss,
|
|
785
857
|
"aria-label": "Dismiss",
|
|
786
858
|
children: [
|
|
787
859
|
message,
|
|
788
|
-
/* @__PURE__ */
|
|
860
|
+
/* @__PURE__ */ jsx3("span", {
|
|
789
861
|
className: cn("skippr:absolute skippr:top-full skippr:size-2.5", "skippr:border-l skippr:border-t skippr:border-border skippr:bg-card", "skippr:rotate-[225deg]", position === "right" ? "skippr:right-5" : "skippr:left-5", "skippr:-mt-[5px]")
|
|
790
862
|
})
|
|
791
863
|
]
|
|
@@ -798,46 +870,46 @@ function MinimizedBubble({
|
|
|
798
870
|
}) {
|
|
799
871
|
const { isConnected, isStarting, position } = useLiveAgent();
|
|
800
872
|
const inSession = isConnected || isStarting;
|
|
801
|
-
return /* @__PURE__ */
|
|
873
|
+
return /* @__PURE__ */ jsxs3("div", {
|
|
802
874
|
className: cn("skippr:fixed skippr:bottom-6 skippr:z-[9999]", "skippr:flex skippr:items-center skippr:gap-2", position === "right" ? "skippr:right-6" : "skippr:left-6"),
|
|
803
875
|
children: [
|
|
804
|
-
welcomeMessage && !inSession && !welcomeDismissed && /* @__PURE__ */
|
|
876
|
+
welcomeMessage && !inSession && !welcomeDismissed && /* @__PURE__ */ jsx3(WelcomeBubble, {
|
|
805
877
|
message: welcomeMessage,
|
|
806
878
|
position,
|
|
807
879
|
onDismiss: onDismissWelcome
|
|
808
880
|
}),
|
|
809
|
-
inSession ? /* @__PURE__ */
|
|
881
|
+
inSession ? /* @__PURE__ */ jsx3(ConnectedBubbleContent, {}) : /* @__PURE__ */ jsx3(IdleBubbleContent, {})
|
|
810
882
|
]
|
|
811
883
|
});
|
|
812
884
|
}
|
|
813
885
|
|
|
814
886
|
// src/components/ObservingBanner.tsx
|
|
815
|
-
import { jsx as
|
|
887
|
+
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
816
888
|
function ObservingBanner() {
|
|
817
889
|
const { isConnected } = useLiveAgent();
|
|
818
890
|
const { isScreenSharing } = useMediaControls();
|
|
819
891
|
if (!isConnected || !isScreenSharing)
|
|
820
892
|
return null;
|
|
821
|
-
return /* @__PURE__ */
|
|
893
|
+
return /* @__PURE__ */ jsx4("div", {
|
|
822
894
|
className: "skippr:fixed skippr:top-0 skippr:left-0 skippr:right-0 skippr:z-[2147483647] skippr:flex skippr:justify-center skippr:pointer-events-none",
|
|
823
|
-
children: /* @__PURE__ */
|
|
895
|
+
children: /* @__PURE__ */ jsxs4("div", {
|
|
824
896
|
className: "skippr:pointer-events-auto skippr:flex skippr:items-center skippr:gap-2 skippr:bg-indigo-500/95 skippr:backdrop-blur-sm skippr:text-white skippr:text-xs skippr:font-medium skippr:px-4 skippr:py-1.5 skippr:rounded-b-lg skippr:shadow-lg",
|
|
825
897
|
children: [
|
|
826
|
-
/* @__PURE__ */
|
|
898
|
+
/* @__PURE__ */ jsxs4("span", {
|
|
827
899
|
className: "skippr:relative skippr:flex skippr:size-1.5",
|
|
828
900
|
children: [
|
|
829
|
-
/* @__PURE__ */
|
|
901
|
+
/* @__PURE__ */ jsx4("span", {
|
|
830
902
|
className: "skippr:absolute skippr:inline-flex skippr:size-full skippr:animate-ping skippr:rounded-full skippr:bg-emerald-400 skippr:opacity-75"
|
|
831
903
|
}),
|
|
832
|
-
/* @__PURE__ */
|
|
904
|
+
/* @__PURE__ */ jsx4("span", {
|
|
833
905
|
className: "skippr:relative skippr:inline-flex skippr:size-1.5 skippr:rounded-full skippr:bg-emerald-400"
|
|
834
906
|
})
|
|
835
907
|
]
|
|
836
908
|
}),
|
|
837
|
-
/* @__PURE__ */
|
|
909
|
+
/* @__PURE__ */ jsx4(Eye, {
|
|
838
910
|
className: "skippr:size-3.5"
|
|
839
911
|
}),
|
|
840
|
-
/* @__PURE__ */
|
|
912
|
+
/* @__PURE__ */ jsx4("span", {
|
|
841
913
|
children: "Skippr is observing this page"
|
|
842
914
|
})
|
|
843
915
|
]
|
|
@@ -1045,50 +1117,50 @@ function useElapsedSeconds(isRunning) {
|
|
|
1045
1117
|
}
|
|
1046
1118
|
|
|
1047
1119
|
// src/components/ChatHeader.tsx
|
|
1048
|
-
import { jsx as
|
|
1120
|
+
import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
1049
1121
|
function ChatHeader() {
|
|
1050
1122
|
const { isConnected, minimizePanel, minimizable } = useLiveAgent();
|
|
1051
1123
|
const elapsed = useElapsedSeconds(isConnected);
|
|
1052
|
-
return /* @__PURE__ */
|
|
1124
|
+
return /* @__PURE__ */ jsxs5("header", {
|
|
1053
1125
|
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",
|
|
1054
1126
|
children: [
|
|
1055
|
-
/* @__PURE__ */
|
|
1127
|
+
/* @__PURE__ */ jsx5("p", {
|
|
1056
1128
|
className: "skippr:text-sm skippr:font-semibold skippr:text-primary-foreground",
|
|
1057
1129
|
children: "Skippr"
|
|
1058
1130
|
}),
|
|
1059
|
-
/* @__PURE__ */
|
|
1131
|
+
/* @__PURE__ */ jsxs5("div", {
|
|
1060
1132
|
className: "skippr:flex skippr:items-center skippr:gap-2",
|
|
1061
1133
|
children: [
|
|
1062
|
-
isConnected && /* @__PURE__ */
|
|
1134
|
+
isConnected && /* @__PURE__ */ jsxs5("div", {
|
|
1063
1135
|
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",
|
|
1064
1136
|
children: [
|
|
1065
|
-
/* @__PURE__ */
|
|
1137
|
+
/* @__PURE__ */ jsxs5("span", {
|
|
1066
1138
|
className: "skippr:relative skippr:flex skippr:size-1.5",
|
|
1067
1139
|
children: [
|
|
1068
|
-
/* @__PURE__ */
|
|
1140
|
+
/* @__PURE__ */ jsx5("span", {
|
|
1069
1141
|
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"
|
|
1070
1142
|
}),
|
|
1071
|
-
/* @__PURE__ */
|
|
1143
|
+
/* @__PURE__ */ jsx5("span", {
|
|
1072
1144
|
className: "skippr:relative skippr:inline-flex skippr:size-1.5 skippr:rounded-full skippr:bg-red-400"
|
|
1073
1145
|
})
|
|
1074
1146
|
]
|
|
1075
1147
|
}),
|
|
1076
|
-
/* @__PURE__ */
|
|
1148
|
+
/* @__PURE__ */ jsx5("span", {
|
|
1077
1149
|
className: "skippr:text-[10px] skippr:font-medium skippr:text-primary-foreground",
|
|
1078
1150
|
children: "REC"
|
|
1079
1151
|
}),
|
|
1080
|
-
/* @__PURE__ */
|
|
1152
|
+
/* @__PURE__ */ jsx5("span", {
|
|
1081
1153
|
className: "skippr:text-[10px] skippr:font-mono skippr:text-primary-foreground",
|
|
1082
1154
|
children: formatTime(elapsed)
|
|
1083
1155
|
})
|
|
1084
1156
|
]
|
|
1085
1157
|
}),
|
|
1086
|
-
minimizable && /* @__PURE__ */
|
|
1158
|
+
minimizable && /* @__PURE__ */ jsx5("button", {
|
|
1087
1159
|
type: "button",
|
|
1088
1160
|
onClick: minimizePanel,
|
|
1089
1161
|
"aria-label": "Minimize",
|
|
1090
1162
|
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",
|
|
1091
|
-
children: /* @__PURE__ */
|
|
1163
|
+
children: /* @__PURE__ */ jsx5(Minimize2, {
|
|
1092
1164
|
className: "skippr:size-3.5"
|
|
1093
1165
|
})
|
|
1094
1166
|
})
|
|
@@ -1099,26 +1171,26 @@ function ChatHeader() {
|
|
|
1099
1171
|
}
|
|
1100
1172
|
|
|
1101
1173
|
// src/components/LoadingDots.tsx
|
|
1102
|
-
import { jsx as
|
|
1174
|
+
import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1103
1175
|
function LoadingDots({ label }) {
|
|
1104
|
-
return /* @__PURE__ */
|
|
1176
|
+
return /* @__PURE__ */ jsxs6("div", {
|
|
1105
1177
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:py-4",
|
|
1106
1178
|
children: [
|
|
1107
|
-
/* @__PURE__ */
|
|
1179
|
+
/* @__PURE__ */ jsxs6("div", {
|
|
1108
1180
|
className: "skippr:flex skippr:gap-1",
|
|
1109
1181
|
children: [
|
|
1110
|
-
/* @__PURE__ */
|
|
1182
|
+
/* @__PURE__ */ jsx6("span", {
|
|
1111
1183
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
1112
1184
|
}),
|
|
1113
|
-
/* @__PURE__ */
|
|
1185
|
+
/* @__PURE__ */ jsx6("span", {
|
|
1114
1186
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
1115
1187
|
}),
|
|
1116
|
-
/* @__PURE__ */
|
|
1188
|
+
/* @__PURE__ */ jsx6("span", {
|
|
1117
1189
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
1118
1190
|
})
|
|
1119
1191
|
]
|
|
1120
1192
|
}),
|
|
1121
|
-
/* @__PURE__ */
|
|
1193
|
+
/* @__PURE__ */ jsx6("p", {
|
|
1122
1194
|
className: "skippr:text-xs skippr:text-muted-foreground",
|
|
1123
1195
|
children: label
|
|
1124
1196
|
})
|
|
@@ -1131,7 +1203,7 @@ import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef3
|
|
|
1131
1203
|
|
|
1132
1204
|
// src/components/ui/button.tsx
|
|
1133
1205
|
import { forwardRef as forwardRef3 } from "react";
|
|
1134
|
-
import { jsx as
|
|
1206
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
1135
1207
|
var variantClasses = {
|
|
1136
1208
|
default: "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90",
|
|
1137
1209
|
destructive: "skippr:bg-destructive skippr:text-white skippr:hover:bg-destructive/90",
|
|
@@ -1150,7 +1222,7 @@ var sizeClasses = {
|
|
|
1150
1222
|
"icon-lg": "skippr:size-10"
|
|
1151
1223
|
};
|
|
1152
1224
|
var Button = forwardRef3(({ className, variant = "default", size = "default", ...props }, ref) => {
|
|
1153
|
-
return /* @__PURE__ */
|
|
1225
|
+
return /* @__PURE__ */ jsx7("button", {
|
|
1154
1226
|
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),
|
|
1155
1227
|
ref,
|
|
1156
1228
|
...props
|
|
@@ -1159,7 +1231,7 @@ var Button = forwardRef3(({ className, variant = "default", size = "default", ..
|
|
|
1159
1231
|
Button.displayName = "Button";
|
|
1160
1232
|
|
|
1161
1233
|
// src/components/LoginFlow.tsx
|
|
1162
|
-
import { jsx as
|
|
1234
|
+
import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1163
1235
|
var OTP_LENGTH = 6;
|
|
1164
1236
|
var DIGIT_KEYS = ["d0", "d1", "d2", "d3", "d4", "d5"];
|
|
1165
1237
|
function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
@@ -1180,7 +1252,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
|
1180
1252
|
await requestOtp(email);
|
|
1181
1253
|
}, [requestOtp, email]);
|
|
1182
1254
|
if (step === "otp") {
|
|
1183
|
-
return /* @__PURE__ */
|
|
1255
|
+
return /* @__PURE__ */ jsx8(OtpStep, {
|
|
1184
1256
|
email,
|
|
1185
1257
|
onSubmit: handleVerifyOtp,
|
|
1186
1258
|
onResend: handleResend,
|
|
@@ -1189,7 +1261,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
|
1189
1261
|
isSubmitting
|
|
1190
1262
|
});
|
|
1191
1263
|
}
|
|
1192
|
-
return /* @__PURE__ */
|
|
1264
|
+
return /* @__PURE__ */ jsx8(EmailStep, {
|
|
1193
1265
|
email,
|
|
1194
1266
|
onEmailChange: setEmail,
|
|
1195
1267
|
onSubmit: handleRequestOtp,
|
|
@@ -1203,30 +1275,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
1203
1275
|
if (email.trim())
|
|
1204
1276
|
onSubmit(email.trim());
|
|
1205
1277
|
}
|
|
1206
|
-
return /* @__PURE__ */
|
|
1278
|
+
return /* @__PURE__ */ jsxs7("div", {
|
|
1207
1279
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
|
|
1208
1280
|
children: [
|
|
1209
|
-
/* @__PURE__ */
|
|
1281
|
+
/* @__PURE__ */ jsxs7("div", {
|
|
1210
1282
|
className: "skippr:mb-4 skippr:text-center",
|
|
1211
1283
|
children: [
|
|
1212
|
-
/* @__PURE__ */
|
|
1284
|
+
/* @__PURE__ */ jsx8(Mail, {
|
|
1213
1285
|
className: "skippr:mx-auto skippr:mb-2 skippr:size-6 skippr:text-primary"
|
|
1214
1286
|
}),
|
|
1215
|
-
/* @__PURE__ */
|
|
1287
|
+
/* @__PURE__ */ jsx8("p", {
|
|
1216
1288
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
1217
1289
|
children: "Sign in to continue"
|
|
1218
1290
|
}),
|
|
1219
|
-
/* @__PURE__ */
|
|
1291
|
+
/* @__PURE__ */ jsx8("p", {
|
|
1220
1292
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
1221
1293
|
children: "Your email will be used to identify you across sessions"
|
|
1222
1294
|
})
|
|
1223
1295
|
]
|
|
1224
1296
|
}),
|
|
1225
|
-
/* @__PURE__ */
|
|
1297
|
+
/* @__PURE__ */ jsxs7("form", {
|
|
1226
1298
|
onSubmit: handleSubmit,
|
|
1227
1299
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
1228
1300
|
children: [
|
|
1229
|
-
/* @__PURE__ */
|
|
1301
|
+
/* @__PURE__ */ jsx8("input", {
|
|
1230
1302
|
type: "email",
|
|
1231
1303
|
placeholder: "you@example.com",
|
|
1232
1304
|
value: email,
|
|
@@ -1235,15 +1307,15 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
1235
1307
|
required: true,
|
|
1236
1308
|
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"
|
|
1237
1309
|
}),
|
|
1238
|
-
/* @__PURE__ */
|
|
1310
|
+
/* @__PURE__ */ jsx8(Button, {
|
|
1239
1311
|
type: "submit",
|
|
1240
1312
|
disabled: isSubmitting || !email.trim(),
|
|
1241
1313
|
className: "skippr:w-full",
|
|
1242
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
1314
|
+
children: isSubmitting ? /* @__PURE__ */ jsx8(LoaderCircle, {
|
|
1243
1315
|
className: "skippr:size-4 skippr:animate-spin"
|
|
1244
1316
|
}) : "Continue"
|
|
1245
1317
|
}),
|
|
1246
|
-
error && /* @__PURE__ */
|
|
1318
|
+
error && /* @__PURE__ */ jsx8("p", {
|
|
1247
1319
|
className: "skippr:text-xs skippr:text-center skippr:text-destructive",
|
|
1248
1320
|
children: error
|
|
1249
1321
|
})
|
|
@@ -1323,22 +1395,22 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
1323
1395
|
submittedRef.current = false;
|
|
1324
1396
|
inputRefs.current[0]?.focus();
|
|
1325
1397
|
}
|
|
1326
|
-
return /* @__PURE__ */
|
|
1398
|
+
return /* @__PURE__ */ jsxs7("div", {
|
|
1327
1399
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
|
|
1328
1400
|
children: [
|
|
1329
|
-
/* @__PURE__ */
|
|
1401
|
+
/* @__PURE__ */ jsxs7("div", {
|
|
1330
1402
|
className: "skippr:mb-4 skippr:text-center",
|
|
1331
1403
|
children: [
|
|
1332
|
-
/* @__PURE__ */
|
|
1404
|
+
/* @__PURE__ */ jsx8("p", {
|
|
1333
1405
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
1334
1406
|
children: "Enter verification code"
|
|
1335
1407
|
}),
|
|
1336
|
-
/* @__PURE__ */
|
|
1408
|
+
/* @__PURE__ */ jsxs7("p", {
|
|
1337
1409
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
1338
1410
|
children: [
|
|
1339
1411
|
"We sent a 6-digit code to",
|
|
1340
1412
|
" ",
|
|
1341
|
-
/* @__PURE__ */
|
|
1413
|
+
/* @__PURE__ */ jsx8("span", {
|
|
1342
1414
|
className: "skippr:font-medium skippr:text-foreground",
|
|
1343
1415
|
children: email
|
|
1344
1416
|
})
|
|
@@ -1346,13 +1418,13 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
1346
1418
|
})
|
|
1347
1419
|
]
|
|
1348
1420
|
}),
|
|
1349
|
-
/* @__PURE__ */
|
|
1421
|
+
/* @__PURE__ */ jsxs7("form", {
|
|
1350
1422
|
onSubmit: handleSubmit,
|
|
1351
1423
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
1352
1424
|
children: [
|
|
1353
|
-
/* @__PURE__ */
|
|
1425
|
+
/* @__PURE__ */ jsx8("div", {
|
|
1354
1426
|
className: "skippr:flex skippr:justify-center skippr:gap-1.5",
|
|
1355
|
-
children: digits.map((digit, index2) => /* @__PURE__ */
|
|
1427
|
+
children: digits.map((digit, index2) => /* @__PURE__ */ jsx8("input", {
|
|
1356
1428
|
ref: (el) => {
|
|
1357
1429
|
inputRefs.current[index2] = el;
|
|
1358
1430
|
},
|
|
@@ -1367,29 +1439,29 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
1367
1439
|
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"
|
|
1368
1440
|
}, DIGIT_KEYS[index2]))
|
|
1369
1441
|
}),
|
|
1370
|
-
error && /* @__PURE__ */
|
|
1442
|
+
error && /* @__PURE__ */ jsx8("p", {
|
|
1371
1443
|
className: "skippr:text-xs skippr:text-center skippr:text-destructive",
|
|
1372
1444
|
children: error
|
|
1373
1445
|
}),
|
|
1374
|
-
/* @__PURE__ */
|
|
1446
|
+
/* @__PURE__ */ jsx8(Button, {
|
|
1375
1447
|
type: "submit",
|
|
1376
1448
|
disabled: isSubmitting || digits.join("").length !== OTP_LENGTH,
|
|
1377
1449
|
className: "skippr:w-full",
|
|
1378
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
1450
|
+
children: isSubmitting ? /* @__PURE__ */ jsx8(LoaderCircle, {
|
|
1379
1451
|
className: "skippr:size-4 skippr:animate-spin"
|
|
1380
1452
|
}) : "Verify"
|
|
1381
1453
|
}),
|
|
1382
|
-
/* @__PURE__ */
|
|
1454
|
+
/* @__PURE__ */ jsxs7("div", {
|
|
1383
1455
|
className: "skippr:flex skippr:items-center skippr:justify-between skippr:text-xs",
|
|
1384
1456
|
children: [
|
|
1385
|
-
/* @__PURE__ */
|
|
1457
|
+
/* @__PURE__ */ jsx8("button", {
|
|
1386
1458
|
type: "button",
|
|
1387
1459
|
onClick: onBack,
|
|
1388
1460
|
disabled: isSubmitting,
|
|
1389
1461
|
className: "skippr:text-muted-foreground hover:skippr:text-foreground skippr:transition-colors disabled:skippr:opacity-50",
|
|
1390
1462
|
children: "Change email"
|
|
1391
1463
|
}),
|
|
1392
|
-
/* @__PURE__ */
|
|
1464
|
+
/* @__PURE__ */ jsx8("button", {
|
|
1393
1465
|
type: "button",
|
|
1394
1466
|
onClick: handleResend,
|
|
1395
1467
|
disabled: isSubmitting || resendCooldown > 0,
|
|
@@ -1405,50 +1477,50 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
1405
1477
|
}
|
|
1406
1478
|
|
|
1407
1479
|
// src/components/MeetingControls.tsx
|
|
1408
|
-
import { jsx as
|
|
1480
|
+
import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1409
1481
|
var CONTROL_BUTTON = "skippr:flex skippr:size-11 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-full skippr:transition-colors";
|
|
1410
1482
|
function MeetingControls({ onHangUp }) {
|
|
1411
1483
|
const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
|
|
1412
|
-
return /* @__PURE__ */
|
|
1484
|
+
return /* @__PURE__ */ jsxs8("div", {
|
|
1413
1485
|
className: "skippr:shrink-0 skippr:border-t skippr:border-border skippr:bg-background skippr:px-4 skippr:py-4",
|
|
1414
1486
|
children: [
|
|
1415
|
-
/* @__PURE__ */
|
|
1487
|
+
/* @__PURE__ */ jsxs8("div", {
|
|
1416
1488
|
className: "skippr:flex skippr:items-center skippr:justify-center skippr:gap-3",
|
|
1417
1489
|
children: [
|
|
1418
|
-
/* @__PURE__ */
|
|
1490
|
+
/* @__PURE__ */ jsx9("button", {
|
|
1419
1491
|
type: "button",
|
|
1420
1492
|
onClick: toggleMute,
|
|
1421
1493
|
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
1422
1494
|
className: cn(CONTROL_BUTTON, isMuted ? "skippr:bg-destructive/15 skippr:text-destructive skippr:hover:bg-destructive/25" : "skippr:bg-muted skippr:text-foreground skippr:hover:bg-muted/80"),
|
|
1423
|
-
children: isMuted ? /* @__PURE__ */
|
|
1495
|
+
children: isMuted ? /* @__PURE__ */ jsx9(MicOff, {
|
|
1424
1496
|
className: "skippr:size-5"
|
|
1425
|
-
}) : /* @__PURE__ */
|
|
1497
|
+
}) : /* @__PURE__ */ jsx9(Mic, {
|
|
1426
1498
|
className: "skippr:size-5"
|
|
1427
1499
|
})
|
|
1428
1500
|
}),
|
|
1429
|
-
/* @__PURE__ */
|
|
1501
|
+
/* @__PURE__ */ jsx9("button", {
|
|
1430
1502
|
type: "button",
|
|
1431
1503
|
onClick: toggleScreenShare,
|
|
1432
1504
|
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
1433
1505
|
className: cn(CONTROL_BUTTON, isScreenSharing ? "skippr:bg-bubble skippr:text-white skippr:hover:brightness-110" : "skippr:bg-muted skippr:text-foreground skippr:hover:bg-muted/80"),
|
|
1434
|
-
children: isScreenSharing ? /* @__PURE__ */
|
|
1506
|
+
children: isScreenSharing ? /* @__PURE__ */ jsx9(MonitorOff, {
|
|
1435
1507
|
className: "skippr:size-5"
|
|
1436
|
-
}) : /* @__PURE__ */
|
|
1508
|
+
}) : /* @__PURE__ */ jsx9(Monitor, {
|
|
1437
1509
|
className: "skippr:size-5"
|
|
1438
1510
|
})
|
|
1439
1511
|
}),
|
|
1440
|
-
/* @__PURE__ */
|
|
1512
|
+
/* @__PURE__ */ jsx9("button", {
|
|
1441
1513
|
type: "button",
|
|
1442
1514
|
onClick: onHangUp,
|
|
1443
1515
|
"aria-label": "End session",
|
|
1444
1516
|
className: cn(CONTROL_BUTTON, "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90"),
|
|
1445
|
-
children: /* @__PURE__ */
|
|
1517
|
+
children: /* @__PURE__ */ jsx9(PhoneOff, {
|
|
1446
1518
|
className: "skippr:size-5"
|
|
1447
1519
|
})
|
|
1448
1520
|
})
|
|
1449
1521
|
]
|
|
1450
1522
|
}),
|
|
1451
|
-
/* @__PURE__ */
|
|
1523
|
+
/* @__PURE__ */ jsx9("p", {
|
|
1452
1524
|
className: "skippr:mt-3 skippr:text-center skippr:text-[10px] skippr:text-muted-foreground",
|
|
1453
1525
|
children: "Powered by Skippr"
|
|
1454
1526
|
})
|
|
@@ -1461,7 +1533,7 @@ import { useEffect as useEffect10, useRef as useRef5 } from "react";
|
|
|
1461
1533
|
|
|
1462
1534
|
// src/components/ChatInput.tsx
|
|
1463
1535
|
import { useEffect as useEffect9, useRef as useRef4, useState as useState7 } from "react";
|
|
1464
|
-
import { jsx as
|
|
1536
|
+
import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1465
1537
|
var MAX_INPUT_HEIGHT = 60;
|
|
1466
1538
|
function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
1467
1539
|
const [inputText, setInputText] = useState7("");
|
|
@@ -1498,13 +1570,13 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
1498
1570
|
handleSubmit(e);
|
|
1499
1571
|
}
|
|
1500
1572
|
}
|
|
1501
|
-
return /* @__PURE__ */
|
|
1573
|
+
return /* @__PURE__ */ jsx10("form", {
|
|
1502
1574
|
onSubmit: handleSubmit,
|
|
1503
1575
|
className: "skippr:border-t skippr:border-border skippr:p-3",
|
|
1504
|
-
children: /* @__PURE__ */
|
|
1576
|
+
children: /* @__PURE__ */ jsxs9("div", {
|
|
1505
1577
|
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",
|
|
1506
1578
|
children: [
|
|
1507
|
-
/* @__PURE__ */
|
|
1579
|
+
/* @__PURE__ */ jsx10("textarea", {
|
|
1508
1580
|
ref: textareaRef,
|
|
1509
1581
|
rows: 1,
|
|
1510
1582
|
value: inputText,
|
|
@@ -1514,12 +1586,12 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
1514
1586
|
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",
|
|
1515
1587
|
style: { maxHeight: `${MAX_INPUT_HEIGHT}px` }
|
|
1516
1588
|
}),
|
|
1517
|
-
/* @__PURE__ */
|
|
1589
|
+
/* @__PURE__ */ jsx10("button", {
|
|
1518
1590
|
type: "submit",
|
|
1519
1591
|
disabled: !canSend,
|
|
1520
1592
|
"aria-label": "Send message",
|
|
1521
1593
|
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"),
|
|
1522
|
-
children: /* @__PURE__ */
|
|
1594
|
+
children: /* @__PURE__ */ jsx10(Send, {
|
|
1523
1595
|
className: "skippr:size-3.5"
|
|
1524
1596
|
})
|
|
1525
1597
|
})
|
|
@@ -1529,7 +1601,7 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
1529
1601
|
}
|
|
1530
1602
|
|
|
1531
1603
|
// src/components/ChatMessage.tsx
|
|
1532
|
-
import { jsx as
|
|
1604
|
+
import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1533
1605
|
function formatTimestamp(ts) {
|
|
1534
1606
|
return new Date(ts).toLocaleTimeString("en-US", {
|
|
1535
1607
|
hour: "numeric",
|
|
@@ -1539,23 +1611,23 @@ function formatTimestamp(ts) {
|
|
|
1539
1611
|
}
|
|
1540
1612
|
function ChatMessage({ message }) {
|
|
1541
1613
|
const isAgent = message.role === "assistant";
|
|
1542
|
-
return /* @__PURE__ */
|
|
1614
|
+
return /* @__PURE__ */ jsxs10("div", {
|
|
1543
1615
|
className: cn("skippr:flex skippr:gap-2", isAgent ? "skippr:items-start" : "skippr:justify-end"),
|
|
1544
1616
|
children: [
|
|
1545
|
-
isAgent && /* @__PURE__ */
|
|
1617
|
+
isAgent && /* @__PURE__ */ jsx11("div", {
|
|
1546
1618
|
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",
|
|
1547
|
-
children: /* @__PURE__ */
|
|
1619
|
+
children: /* @__PURE__ */ jsx11(Sparkles, {
|
|
1548
1620
|
className: "skippr:size-3.5 skippr:text-primary-foreground"
|
|
1549
1621
|
})
|
|
1550
1622
|
}),
|
|
1551
|
-
/* @__PURE__ */
|
|
1623
|
+
/* @__PURE__ */ jsxs10("div", {
|
|
1552
1624
|
className: cn("skippr:flex skippr:max-w-[80%] skippr:flex-col", isAgent ? "skippr:items-start" : "skippr:items-end"),
|
|
1553
1625
|
children: [
|
|
1554
|
-
/* @__PURE__ */
|
|
1626
|
+
/* @__PURE__ */ jsx11("div", {
|
|
1555
1627
|
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"),
|
|
1556
1628
|
children: message.content
|
|
1557
1629
|
}),
|
|
1558
|
-
message.timestamp && /* @__PURE__ */
|
|
1630
|
+
message.timestamp && /* @__PURE__ */ jsx11("span", {
|
|
1559
1631
|
className: "skippr:mt-1 skippr:px-1 skippr:text-[10px] skippr:text-muted-foreground/60",
|
|
1560
1632
|
children: formatTimestamp(message.timestamp)
|
|
1561
1633
|
})
|
|
@@ -1566,33 +1638,33 @@ function ChatMessage({ message }) {
|
|
|
1566
1638
|
}
|
|
1567
1639
|
|
|
1568
1640
|
// src/components/TypingIndicator.tsx
|
|
1569
|
-
import { jsx as
|
|
1641
|
+
import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1570
1642
|
function TypingIndicator() {
|
|
1571
|
-
return /* @__PURE__ */
|
|
1643
|
+
return /* @__PURE__ */ jsxs11("div", {
|
|
1572
1644
|
className: "skippr:flex skippr:items-start skippr:gap-2 skippr:animate-skippr-tab-fade",
|
|
1573
1645
|
children: [
|
|
1574
|
-
/* @__PURE__ */
|
|
1646
|
+
/* @__PURE__ */ jsx12("div", {
|
|
1575
1647
|
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",
|
|
1576
|
-
children: /* @__PURE__ */
|
|
1648
|
+
children: /* @__PURE__ */ jsx12(Sparkles, {
|
|
1577
1649
|
className: "skippr:size-3.5 skippr:text-primary-foreground"
|
|
1578
1650
|
})
|
|
1579
1651
|
}),
|
|
1580
|
-
/* @__PURE__ */
|
|
1652
|
+
/* @__PURE__ */ jsxs11("div", {
|
|
1581
1653
|
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",
|
|
1582
1654
|
children: [
|
|
1583
|
-
/* @__PURE__ */
|
|
1655
|
+
/* @__PURE__ */ jsx12("span", {
|
|
1584
1656
|
children: "Agent is analyzing your screen"
|
|
1585
1657
|
}),
|
|
1586
|
-
/* @__PURE__ */
|
|
1658
|
+
/* @__PURE__ */ jsxs11("span", {
|
|
1587
1659
|
className: "skippr:inline-flex skippr:items-center skippr:gap-[2px]",
|
|
1588
1660
|
children: [
|
|
1589
|
-
/* @__PURE__ */
|
|
1661
|
+
/* @__PURE__ */ jsx12("span", {
|
|
1590
1662
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:0ms]"
|
|
1591
1663
|
}),
|
|
1592
|
-
/* @__PURE__ */
|
|
1664
|
+
/* @__PURE__ */ jsx12("span", {
|
|
1593
1665
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:200ms]"
|
|
1594
1666
|
}),
|
|
1595
|
-
/* @__PURE__ */
|
|
1667
|
+
/* @__PURE__ */ jsx12("span", {
|
|
1596
1668
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:400ms]"
|
|
1597
1669
|
})
|
|
1598
1670
|
]
|
|
@@ -1604,7 +1676,7 @@ function TypingIndicator() {
|
|
|
1604
1676
|
}
|
|
1605
1677
|
|
|
1606
1678
|
// src/components/MessageList.tsx
|
|
1607
|
-
import { jsx as
|
|
1679
|
+
import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1608
1680
|
function MessageList({
|
|
1609
1681
|
messages,
|
|
1610
1682
|
isStreaming,
|
|
@@ -1618,25 +1690,25 @@ function MessageList({
|
|
|
1618
1690
|
scrollRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
1619
1691
|
}, [messages.length, lastMessage?.content]);
|
|
1620
1692
|
const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
|
|
1621
|
-
return /* @__PURE__ */
|
|
1693
|
+
return /* @__PURE__ */ jsxs12("div", {
|
|
1622
1694
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
1623
1695
|
children: [
|
|
1624
|
-
/* @__PURE__ */
|
|
1696
|
+
/* @__PURE__ */ jsxs12("div", {
|
|
1625
1697
|
className: "skippr:min-h-0 skippr:flex-1 skippr:space-y-4 skippr:overflow-y-auto skippr:p-4",
|
|
1626
1698
|
children: [
|
|
1627
|
-
messages.length === 0 && !showTyping && /* @__PURE__ */
|
|
1699
|
+
messages.length === 0 && !showTyping && /* @__PURE__ */ jsx13(LoadingDots, {
|
|
1628
1700
|
label: "Waiting for conversation to begin..."
|
|
1629
1701
|
}),
|
|
1630
|
-
messages.map((message) => /* @__PURE__ */
|
|
1702
|
+
messages.map((message) => /* @__PURE__ */ jsx13(ChatMessage, {
|
|
1631
1703
|
message
|
|
1632
1704
|
}, message.id)),
|
|
1633
|
-
showTyping && /* @__PURE__ */
|
|
1634
|
-
/* @__PURE__ */
|
|
1705
|
+
showTyping && /* @__PURE__ */ jsx13(TypingIndicator, {}),
|
|
1706
|
+
/* @__PURE__ */ jsx13("div", {
|
|
1635
1707
|
ref: scrollRef
|
|
1636
1708
|
})
|
|
1637
1709
|
]
|
|
1638
1710
|
}),
|
|
1639
|
-
/* @__PURE__ */
|
|
1711
|
+
/* @__PURE__ */ jsx13(ChatInput, {
|
|
1640
1712
|
sendChatMessage,
|
|
1641
1713
|
isSendingChat,
|
|
1642
1714
|
autoFocus
|
|
@@ -1646,49 +1718,49 @@ function MessageList({
|
|
|
1646
1718
|
}
|
|
1647
1719
|
|
|
1648
1720
|
// src/components/SessionAgenda.tsx
|
|
1649
|
-
import { jsx as
|
|
1721
|
+
import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1650
1722
|
function SessionAgenda({ phases }) {
|
|
1651
1723
|
if (phases.length === 0) {
|
|
1652
|
-
return /* @__PURE__ */
|
|
1724
|
+
return /* @__PURE__ */ jsx14("div", {
|
|
1653
1725
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
1654
|
-
children: /* @__PURE__ */
|
|
1726
|
+
children: /* @__PURE__ */ jsx14(LoadingDots, {
|
|
1655
1727
|
label: "Waiting for agenda to load..."
|
|
1656
1728
|
})
|
|
1657
1729
|
});
|
|
1658
1730
|
}
|
|
1659
|
-
return /* @__PURE__ */
|
|
1731
|
+
return /* @__PURE__ */ jsx14("div", {
|
|
1660
1732
|
className: "skippr:flex-1 skippr:overflow-y-auto skippr:px-4 skippr:py-4",
|
|
1661
|
-
children: /* @__PURE__ */
|
|
1733
|
+
children: /* @__PURE__ */ jsx14("div", {
|
|
1662
1734
|
className: "skippr:space-y-1",
|
|
1663
1735
|
children: phases.map((phase) => {
|
|
1664
1736
|
const isActive = phase.status === "active";
|
|
1665
1737
|
const isCompleted = phase.status === "completed";
|
|
1666
|
-
return /* @__PURE__ */
|
|
1738
|
+
return /* @__PURE__ */ jsxs13("div", {
|
|
1667
1739
|
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"),
|
|
1668
1740
|
children: [
|
|
1669
|
-
/* @__PURE__ */
|
|
1741
|
+
/* @__PURE__ */ jsx14("div", {
|
|
1670
1742
|
className: "skippr:mt-0.5",
|
|
1671
|
-
children: isCompleted ? /* @__PURE__ */
|
|
1743
|
+
children: isCompleted ? /* @__PURE__ */ jsx14(CircleCheck, {
|
|
1672
1744
|
className: "skippr:size-4 skippr:text-chart-3"
|
|
1673
|
-
}) : isActive ? /* @__PURE__ */
|
|
1745
|
+
}) : isActive ? /* @__PURE__ */ jsx14(Circle, {
|
|
1674
1746
|
className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
|
|
1675
|
-
}) : /* @__PURE__ */
|
|
1747
|
+
}) : /* @__PURE__ */ jsx14(Circle, {
|
|
1676
1748
|
className: "skippr:size-4 skippr:text-muted-foreground/30"
|
|
1677
1749
|
})
|
|
1678
1750
|
}),
|
|
1679
|
-
/* @__PURE__ */
|
|
1751
|
+
/* @__PURE__ */ jsxs13("div", {
|
|
1680
1752
|
className: "skippr:min-w-0 skippr:flex-1",
|
|
1681
1753
|
children: [
|
|
1682
|
-
/* @__PURE__ */
|
|
1754
|
+
/* @__PURE__ */ jsx14("p", {
|
|
1683
1755
|
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"),
|
|
1684
1756
|
children: phase.name
|
|
1685
1757
|
}),
|
|
1686
|
-
phase.highlights.length > 0 && /* @__PURE__ */
|
|
1758
|
+
phase.highlights.length > 0 && /* @__PURE__ */ jsx14("ul", {
|
|
1687
1759
|
className: "skippr:mt-1 skippr:space-y-0.5",
|
|
1688
|
-
children: phase.highlights.map((text) => /* @__PURE__ */
|
|
1760
|
+
children: phase.highlights.map((text) => /* @__PURE__ */ jsxs13("li", {
|
|
1689
1761
|
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"),
|
|
1690
1762
|
children: [
|
|
1691
|
-
/* @__PURE__ */
|
|
1763
|
+
/* @__PURE__ */ jsx14("span", {
|
|
1692
1764
|
className: "skippr:size-1 skippr:shrink-0 skippr:rounded-full skippr:bg-current"
|
|
1693
1765
|
}),
|
|
1694
1766
|
text
|
|
@@ -1705,12 +1777,12 @@ function SessionAgenda({ phases }) {
|
|
|
1705
1777
|
}
|
|
1706
1778
|
|
|
1707
1779
|
// src/components/SessionWarningBanner.tsx
|
|
1708
|
-
import { jsx as
|
|
1780
|
+
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
1709
1781
|
var SESSION_WARNING_THRESHOLD_SECS = 60;
|
|
1710
1782
|
function SessionWarningBanner({ remaining }) {
|
|
1711
1783
|
if (remaining === null || remaining <= 0 || remaining > SESSION_WARNING_THRESHOLD_SECS)
|
|
1712
1784
|
return null;
|
|
1713
|
-
return /* @__PURE__ */
|
|
1785
|
+
return /* @__PURE__ */ jsx15("div", {
|
|
1714
1786
|
"data-testid": "session-warning-banner",
|
|
1715
1787
|
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",
|
|
1716
1788
|
children: "Session ending soon"
|
|
@@ -1718,24 +1790,24 @@ function SessionWarningBanner({ remaining }) {
|
|
|
1718
1790
|
}
|
|
1719
1791
|
|
|
1720
1792
|
// src/components/StartSessionPrompt.tsx
|
|
1721
|
-
import { jsx as
|
|
1793
|
+
import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1722
1794
|
function StartSessionPrompt({
|
|
1723
1795
|
onStartSession,
|
|
1724
1796
|
isStarting,
|
|
1725
1797
|
error,
|
|
1726
1798
|
label = "Talk to Skippr"
|
|
1727
1799
|
}) {
|
|
1728
|
-
return /* @__PURE__ */
|
|
1800
|
+
return /* @__PURE__ */ jsxs14("div", {
|
|
1729
1801
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:px-4",
|
|
1730
1802
|
children: [
|
|
1731
|
-
/* @__PURE__ */
|
|
1803
|
+
/* @__PURE__ */ jsx16("button", {
|
|
1732
1804
|
type: "button",
|
|
1733
1805
|
onClick: onStartSession,
|
|
1734
1806
|
disabled: isStarting,
|
|
1735
1807
|
className: "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",
|
|
1736
1808
|
children: isStarting ? "Starting..." : label
|
|
1737
1809
|
}),
|
|
1738
|
-
error && /* @__PURE__ */
|
|
1810
|
+
error && /* @__PURE__ */ jsx16("p", {
|
|
1739
1811
|
className: "skippr:text-xs skippr:text-destructive",
|
|
1740
1812
|
children: error
|
|
1741
1813
|
})
|
|
@@ -1744,7 +1816,7 @@ function StartSessionPrompt({
|
|
|
1744
1816
|
}
|
|
1745
1817
|
|
|
1746
1818
|
// src/components/Sidebar.tsx
|
|
1747
|
-
import { jsx as
|
|
1819
|
+
import { jsx as jsx17, jsxs as jsxs15, Fragment as Fragment2 } from "react/jsx-runtime";
|
|
1748
1820
|
function Sidebar({
|
|
1749
1821
|
hideControls = false,
|
|
1750
1822
|
hideHeader = false,
|
|
@@ -1785,22 +1857,22 @@ function Sidebar({
|
|
|
1785
1857
|
document.body.style.transition = "";
|
|
1786
1858
|
};
|
|
1787
1859
|
}, [isSidebar, isPanelOpen, position]);
|
|
1788
|
-
return /* @__PURE__ */
|
|
1860
|
+
return /* @__PURE__ */ jsxs15("div", {
|
|
1789
1861
|
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-[calc(100vh-112px)] 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"),
|
|
1790
1862
|
style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined },
|
|
1791
1863
|
children: [
|
|
1792
|
-
!hideHeader && /* @__PURE__ */
|
|
1793
|
-
!isAuthenticated && isValidating ? /* @__PURE__ */
|
|
1864
|
+
!hideHeader && /* @__PURE__ */ jsx17(ChatHeader, {}),
|
|
1865
|
+
!isAuthenticated && isValidating ? /* @__PURE__ */ jsx17("div", {
|
|
1794
1866
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
1795
|
-
children: /* @__PURE__ */
|
|
1867
|
+
children: /* @__PURE__ */ jsx17(LoadingDots, {
|
|
1796
1868
|
label: "Loading..."
|
|
1797
1869
|
})
|
|
1798
|
-
}) : !isAuthenticated ? /* @__PURE__ */
|
|
1870
|
+
}) : !isAuthenticated ? /* @__PURE__ */ jsx17(LoginFlow, {
|
|
1799
1871
|
requestOtp,
|
|
1800
1872
|
verifyOtp,
|
|
1801
1873
|
error: authError,
|
|
1802
1874
|
isSubmitting: isAuthSubmitting
|
|
1803
|
-
}) : /* @__PURE__ */
|
|
1875
|
+
}) : /* @__PURE__ */ jsx17(AuthenticatedContent, {
|
|
1804
1876
|
isConnected,
|
|
1805
1877
|
onStartSession: startSession,
|
|
1806
1878
|
onDisconnect: disconnect,
|
|
@@ -1827,50 +1899,50 @@ function AuthenticatedContent({
|
|
|
1827
1899
|
startSessionLabel,
|
|
1828
1900
|
autoFocusChat
|
|
1829
1901
|
}) {
|
|
1830
|
-
return /* @__PURE__ */
|
|
1902
|
+
return /* @__PURE__ */ jsxs15(Fragment2, {
|
|
1831
1903
|
children: [
|
|
1832
|
-
isConnected && /* @__PURE__ */
|
|
1833
|
-
/* @__PURE__ */
|
|
1904
|
+
isConnected && /* @__PURE__ */ jsx17(ConnectedBanner, {}),
|
|
1905
|
+
/* @__PURE__ */ jsxs15("div", {
|
|
1834
1906
|
className: "skippr:flex skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-2",
|
|
1835
1907
|
children: [
|
|
1836
|
-
/* @__PURE__ */
|
|
1908
|
+
/* @__PURE__ */ jsxs15("button", {
|
|
1837
1909
|
type: "button",
|
|
1838
1910
|
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"),
|
|
1839
1911
|
onClick: () => onTabChange("chat"),
|
|
1840
1912
|
children: [
|
|
1841
|
-
/* @__PURE__ */
|
|
1913
|
+
/* @__PURE__ */ jsx17(MessageCircle, {
|
|
1842
1914
|
className: "skippr:size-3.5"
|
|
1843
1915
|
}),
|
|
1844
1916
|
"Chat",
|
|
1845
|
-
activeTab === "chat" && /* @__PURE__ */
|
|
1917
|
+
activeTab === "chat" && /* @__PURE__ */ jsx17("span", {
|
|
1846
1918
|
className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
1847
1919
|
})
|
|
1848
1920
|
]
|
|
1849
1921
|
}),
|
|
1850
|
-
/* @__PURE__ */
|
|
1922
|
+
/* @__PURE__ */ jsxs15("button", {
|
|
1851
1923
|
type: "button",
|
|
1852
1924
|
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"),
|
|
1853
1925
|
onClick: () => onTabChange("agenda"),
|
|
1854
1926
|
children: [
|
|
1855
|
-
/* @__PURE__ */
|
|
1927
|
+
/* @__PURE__ */ jsx17(Calendar, {
|
|
1856
1928
|
className: "skippr:size-3.5"
|
|
1857
1929
|
}),
|
|
1858
1930
|
"Agenda",
|
|
1859
|
-
activeTab === "agenda" && /* @__PURE__ */
|
|
1931
|
+
activeTab === "agenda" && /* @__PURE__ */ jsx17("span", {
|
|
1860
1932
|
className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
1861
1933
|
})
|
|
1862
1934
|
]
|
|
1863
1935
|
})
|
|
1864
1936
|
]
|
|
1865
1937
|
}),
|
|
1866
|
-
/* @__PURE__ */
|
|
1938
|
+
/* @__PURE__ */ jsx17("div", {
|
|
1867
1939
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
1868
|
-
children: isConnected ? /* @__PURE__ */
|
|
1940
|
+
children: isConnected ? /* @__PURE__ */ jsx17(ConnectedBody, {
|
|
1869
1941
|
activeTab,
|
|
1870
1942
|
autoFocusChat
|
|
1871
|
-
}) : /* @__PURE__ */
|
|
1943
|
+
}) : /* @__PURE__ */ jsx17("div", {
|
|
1872
1944
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
|
|
1873
|
-
children: /* @__PURE__ */
|
|
1945
|
+
children: /* @__PURE__ */ jsx17(StartSessionPrompt, {
|
|
1874
1946
|
onStartSession,
|
|
1875
1947
|
isStarting,
|
|
1876
1948
|
error,
|
|
@@ -1878,7 +1950,7 @@ function AuthenticatedContent({
|
|
|
1878
1950
|
})
|
|
1879
1951
|
}, `${activeTab}-empty`)
|
|
1880
1952
|
}),
|
|
1881
|
-
isConnected && !hideControls && /* @__PURE__ */
|
|
1953
|
+
isConnected && !hideControls && /* @__PURE__ */ jsx17(MeetingControls, {
|
|
1882
1954
|
onHangUp: onDisconnect
|
|
1883
1955
|
})
|
|
1884
1956
|
]
|
|
@@ -1886,7 +1958,7 @@ function AuthenticatedContent({
|
|
|
1886
1958
|
}
|
|
1887
1959
|
function ConnectedBanner() {
|
|
1888
1960
|
const remaining = useSessionRemaining();
|
|
1889
|
-
return /* @__PURE__ */
|
|
1961
|
+
return /* @__PURE__ */ jsx17(SessionWarningBanner, {
|
|
1890
1962
|
remaining
|
|
1891
1963
|
});
|
|
1892
1964
|
}
|
|
@@ -1897,16 +1969,16 @@ function ConnectedBody({
|
|
|
1897
1969
|
const { allMessages, agentState, sendChatMessage, isSendingChat } = useCombinedMessages();
|
|
1898
1970
|
const { phases } = usePhaseUpdates();
|
|
1899
1971
|
if (activeTab === "agenda") {
|
|
1900
|
-
return /* @__PURE__ */
|
|
1972
|
+
return /* @__PURE__ */ jsx17("div", {
|
|
1901
1973
|
className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto skippr:animate-skippr-tab-fade",
|
|
1902
|
-
children: /* @__PURE__ */
|
|
1974
|
+
children: /* @__PURE__ */ jsx17(SessionAgenda, {
|
|
1903
1975
|
phases
|
|
1904
1976
|
})
|
|
1905
1977
|
}, "agenda");
|
|
1906
1978
|
}
|
|
1907
|
-
return /* @__PURE__ */
|
|
1979
|
+
return /* @__PURE__ */ jsx17("div", {
|
|
1908
1980
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
|
|
1909
|
-
children: /* @__PURE__ */
|
|
1981
|
+
children: /* @__PURE__ */ jsx17(MessageList, {
|
|
1910
1982
|
messages: allMessages,
|
|
1911
1983
|
isStreaming: agentState === "speaking",
|
|
1912
1984
|
sendChatMessage,
|
|
@@ -1917,30 +1989,28 @@ function ConnectedBody({
|
|
|
1917
1989
|
}
|
|
1918
1990
|
|
|
1919
1991
|
// src/components/SidebarTrigger.tsx
|
|
1920
|
-
import { jsx as
|
|
1992
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
1921
1993
|
function SidebarTrigger() {
|
|
1922
1994
|
const { isPanelOpen, togglePanel, minimizePanel, minimizable, position, isMinimized } = useLiveAgent();
|
|
1923
1995
|
if (isMinimized)
|
|
1924
1996
|
return null;
|
|
1925
1997
|
const handleClick = isPanelOpen && minimizable ? minimizePanel : togglePanel;
|
|
1926
|
-
return /* @__PURE__ */
|
|
1998
|
+
return /* @__PURE__ */ jsx18("button", {
|
|
1927
1999
|
type: "button",
|
|
1928
2000
|
onClick: handleClick,
|
|
1929
2001
|
title: isPanelOpen ? "Close chat" : "Open chat",
|
|
1930
2002
|
"aria-label": isPanelOpen ? "Close chat" : "Open chat",
|
|
1931
2003
|
className: cn("skippr:fixed skippr:bottom-6 skippr:z-[9998]", "skippr:flex skippr:size-12 skippr:items-center skippr:justify-center", "skippr:rounded-[14px] skippr:bg-bubble skippr:text-white", "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", position === "right" ? "skippr:right-6" : "skippr:left-6"),
|
|
1932
|
-
children: isPanelOpen ? /* @__PURE__ */
|
|
2004
|
+
children: isPanelOpen ? /* @__PURE__ */ jsx18(ChevronDown, {
|
|
1933
2005
|
className: "skippr:size-5"
|
|
1934
|
-
}) : /* @__PURE__ */
|
|
1935
|
-
src: LOGO_URL,
|
|
1936
|
-
alt: "Skippr",
|
|
2006
|
+
}) : /* @__PURE__ */ jsx18(Logo, {
|
|
1937
2007
|
className: "skippr:size-7"
|
|
1938
2008
|
})
|
|
1939
2009
|
});
|
|
1940
2010
|
}
|
|
1941
2011
|
|
|
1942
2012
|
// src/components/LiveAgent.tsx
|
|
1943
|
-
import { jsx as
|
|
2013
|
+
import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1944
2014
|
function LiveAgent({
|
|
1945
2015
|
agentId,
|
|
1946
2016
|
authToken: authTokenProp,
|
|
@@ -2078,27 +2148,27 @@ function LiveAgent({
|
|
|
2078
2148
|
sidebarTab,
|
|
2079
2149
|
autoFocusChat
|
|
2080
2150
|
]);
|
|
2081
|
-
return /* @__PURE__ */
|
|
2151
|
+
return /* @__PURE__ */ jsx19(LiveAgentContext.Provider, {
|
|
2082
2152
|
value: ctx,
|
|
2083
|
-
children: /* @__PURE__ */
|
|
2153
|
+
children: /* @__PURE__ */ jsxs16(LiveKitRoom, {
|
|
2084
2154
|
serverUrl: connection?.livekitUrl,
|
|
2085
2155
|
token: connection?.token,
|
|
2086
2156
|
connect: shouldConnect,
|
|
2087
2157
|
audio: true,
|
|
2088
2158
|
onDisconnected: disconnect,
|
|
2089
2159
|
children: [
|
|
2090
|
-
connection && /* @__PURE__ */
|
|
2091
|
-
showObservingBanner && /* @__PURE__ */
|
|
2092
|
-
connection && /* @__PURE__ */
|
|
2160
|
+
connection && /* @__PURE__ */ jsx19(RoomAudioRenderer, {}),
|
|
2161
|
+
showObservingBanner && /* @__PURE__ */ jsx19(ObservingBanner, {}),
|
|
2162
|
+
connection && /* @__PURE__ */ jsx19(AutoStartMedia, {
|
|
2093
2163
|
pendingScreenStream
|
|
2094
2164
|
}),
|
|
2095
|
-
isMinimized && /* @__PURE__ */
|
|
2165
|
+
isMinimized && /* @__PURE__ */ jsx19(MinimizedBubble, {
|
|
2096
2166
|
welcomeMessage,
|
|
2097
2167
|
welcomeDismissed,
|
|
2098
2168
|
onDismissWelcome: dismissWelcome
|
|
2099
2169
|
}),
|
|
2100
|
-
/* @__PURE__ */
|
|
2101
|
-
/* @__PURE__ */
|
|
2170
|
+
/* @__PURE__ */ jsx19(SidebarTrigger, {}),
|
|
2171
|
+
/* @__PURE__ */ jsx19(Sidebar, {
|
|
2102
2172
|
hideControls,
|
|
2103
2173
|
hideHeader,
|
|
2104
2174
|
startSessionLabel
|