@skippr/live-agent-sdk 0.40.0 → 0.42.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 +249 -206
- package/dist/skippr-sdk.css +1 -1
- package/dist/skippr-sdk.js +101 -98
- package/dist/types/components/ShadowHost.d.ts +5 -0
- package/package.json +1 -1
- package/dist/types/lib/react-compat.d.ts +0 -26
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 useCallback8, useMemo as useMemo5, useRef as
|
|
11
|
+
import { useCallback as useCallback8, useMemo as useMemo5, useRef as useRef11, useState as useState12 } from "react";
|
|
12
12
|
|
|
13
13
|
// src/context/LiveAgentContext.tsx
|
|
14
14
|
import { createContext } from "react";
|
|
@@ -2037,16 +2037,10 @@ function HighlightOverlay() {
|
|
|
2037
2037
|
// src/components/MinimizedBubble.tsx
|
|
2038
2038
|
import { useEffect as useEffect7 } from "react";
|
|
2039
2039
|
|
|
2040
|
-
// src/lib/react-compat.ts
|
|
2041
|
-
import * as React from "react";
|
|
2042
|
-
function selectContextHook(use2, useContext3) {
|
|
2043
|
-
return use2 ?? useContext3;
|
|
2044
|
-
}
|
|
2045
|
-
var useContextValue = selectContextHook(React.use, React.useContext);
|
|
2046
|
-
|
|
2047
2040
|
// src/hooks/useLiveAgent.ts
|
|
2041
|
+
import { useContext as useContext2 } from "react";
|
|
2048
2042
|
function useLiveAgent() {
|
|
2049
|
-
const ctx =
|
|
2043
|
+
const ctx = useContext2(LiveAgentContext);
|
|
2050
2044
|
if (!ctx) {
|
|
2051
2045
|
throw new Error("useLiveAgent must be used within a <LiveAgent> provider");
|
|
2052
2046
|
}
|
|
@@ -2469,11 +2463,56 @@ function MinimizedBubble({
|
|
|
2469
2463
|
});
|
|
2470
2464
|
}
|
|
2471
2465
|
|
|
2466
|
+
// src/components/ShadowHost.tsx
|
|
2467
|
+
import { useLayoutEffect, useRef as useRef5, useState as useState5 } from "react";
|
|
2468
|
+
import { createPortal } from "react-dom";
|
|
2469
|
+
import { jsx as jsx5, Fragment as Fragment3 } from "react/jsx-runtime";
|
|
2470
|
+
var PROPERTIES_STYLE_ID = "skippr-tw-properties";
|
|
2471
|
+
var PROPERTY_RULE = /@property\s+[^{]+\{[^}]*\}/g;
|
|
2472
|
+
function hoistTailwindProperties(css) {
|
|
2473
|
+
const propertyRules = css.match(PROPERTY_RULE);
|
|
2474
|
+
if (propertyRules && !document.getElementById(PROPERTIES_STYLE_ID)) {
|
|
2475
|
+
const propertiesStyle = document.createElement("style");
|
|
2476
|
+
propertiesStyle.id = PROPERTIES_STYLE_ID;
|
|
2477
|
+
propertiesStyle.textContent = propertyRules.join(`
|
|
2478
|
+
`);
|
|
2479
|
+
document.head.appendChild(propertiesStyle);
|
|
2480
|
+
}
|
|
2481
|
+
return css.replace(PROPERTY_RULE, "");
|
|
2482
|
+
}
|
|
2483
|
+
function ShadowHost({ children }) {
|
|
2484
|
+
const hostRef = useRef5(null);
|
|
2485
|
+
const [shadowRoot, setShadowRoot] = useState5(null);
|
|
2486
|
+
const css = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
|
2487
|
+
@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}}`;
|
|
2488
|
+
useLayoutEffect(() => {
|
|
2489
|
+
const host = hostRef.current;
|
|
2490
|
+
if (!host || !css)
|
|
2491
|
+
return;
|
|
2492
|
+
const root = host.shadowRoot ?? (() => {
|
|
2493
|
+
const created = host.attachShadow({ mode: "open" });
|
|
2494
|
+
const style = document.createElement("style");
|
|
2495
|
+
style.textContent = hoistTailwindProperties(css);
|
|
2496
|
+
created.appendChild(style);
|
|
2497
|
+
return created;
|
|
2498
|
+
})();
|
|
2499
|
+
setShadowRoot(root);
|
|
2500
|
+
}, [css]);
|
|
2501
|
+
if (!css)
|
|
2502
|
+
return /* @__PURE__ */ jsx5(Fragment3, {
|
|
2503
|
+
children
|
|
2504
|
+
});
|
|
2505
|
+
return /* @__PURE__ */ jsx5("div", {
|
|
2506
|
+
ref: hostRef,
|
|
2507
|
+
children: shadowRoot && createPortal(children, shadowRoot)
|
|
2508
|
+
});
|
|
2509
|
+
}
|
|
2510
|
+
|
|
2472
2511
|
// src/components/Sidebar.tsx
|
|
2473
|
-
import { useEffect as useEffect16 } from "react";
|
|
2512
|
+
import { useContext as useContext5, useEffect as useEffect16 } from "react";
|
|
2474
2513
|
|
|
2475
2514
|
// src/hooks/useCombinedMessages.ts
|
|
2476
|
-
import { useMemo as useMemo4 } from "react";
|
|
2515
|
+
import { useContext as useContext3, useMemo as useMemo4 } from "react";
|
|
2477
2516
|
|
|
2478
2517
|
// src/hooks/useChatMessages.ts
|
|
2479
2518
|
import { useChat, useLocalParticipant as useLocalParticipant4 } from "@livekit/components-react/hooks";
|
|
@@ -2541,7 +2580,7 @@ function useCombinedMessages() {
|
|
|
2541
2580
|
const { transcriptMessages } = useStreamingTranscript();
|
|
2542
2581
|
const { chatMessages, sendChatMessage, isSendingChat } = useChatMessages();
|
|
2543
2582
|
const { state: agentState } = useAgentVoiceState();
|
|
2544
|
-
const historyMessages =
|
|
2583
|
+
const historyMessages = useContext3(LiveAgentContext)?.historyMessages ?? [];
|
|
2545
2584
|
const liveMessages = useMemo4(() => {
|
|
2546
2585
|
if (chatMessages.length === 0)
|
|
2547
2586
|
return transcriptMessages;
|
|
@@ -2559,13 +2598,13 @@ function useCombinedMessages() {
|
|
|
2559
2598
|
}
|
|
2560
2599
|
|
|
2561
2600
|
// src/hooks/usePhaseUpdates.ts
|
|
2562
|
-
import { useCallback as useCallback6, useEffect as useEffect9 } from "react";
|
|
2601
|
+
import { useCallback as useCallback6, useContext as useContext4, useEffect as useEffect9 } from "react";
|
|
2563
2602
|
|
|
2564
2603
|
// src/hooks/useAgentState.ts
|
|
2565
2604
|
import { useRemoteParticipants } from "@livekit/components-react/hooks";
|
|
2566
|
-
import { useEffect as useEffect8, useState as
|
|
2605
|
+
import { useEffect as useEffect8, useState as useState6 } from "react";
|
|
2567
2606
|
function useAgentState(attributeKey, parse, initial) {
|
|
2568
|
-
const [value, setValue] =
|
|
2607
|
+
const [value, setValue] = useState6(initial);
|
|
2569
2608
|
const remoteParticipants = useRemoteParticipants();
|
|
2570
2609
|
useEffect8(() => {
|
|
2571
2610
|
const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
|
|
@@ -2615,7 +2654,7 @@ function parsePhases(json) {
|
|
|
2615
2654
|
function usePhaseUpdates() {
|
|
2616
2655
|
const parse = useCallback6(parsePhases, []);
|
|
2617
2656
|
const livePhases = useAgentState("phases", parse, []);
|
|
2618
|
-
const ctx =
|
|
2657
|
+
const ctx = useContext4(LiveAgentContext);
|
|
2619
2658
|
useEffect9(() => {
|
|
2620
2659
|
if (livePhases.length > 0)
|
|
2621
2660
|
ctx?.setPhasesSnapshot(livePhases);
|
|
@@ -2625,7 +2664,7 @@ function usePhaseUpdates() {
|
|
|
2625
2664
|
}
|
|
2626
2665
|
|
|
2627
2666
|
// src/hooks/useSessionRemaining.ts
|
|
2628
|
-
import { useEffect as useEffect10, useRef as
|
|
2667
|
+
import { useEffect as useEffect10, useRef as useRef6, useState as useState7 } from "react";
|
|
2629
2668
|
|
|
2630
2669
|
// src/lib/format.ts
|
|
2631
2670
|
function formatTime(seconds) {
|
|
@@ -2641,8 +2680,8 @@ function parseNumber(s) {
|
|
|
2641
2680
|
// src/hooks/useSessionRemaining.ts
|
|
2642
2681
|
function useSessionRemaining() {
|
|
2643
2682
|
const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
|
|
2644
|
-
const endTimeRef =
|
|
2645
|
-
const [remaining, setRemaining] =
|
|
2683
|
+
const endTimeRef = useRef6(null);
|
|
2684
|
+
const [remaining, setRemaining] = useState7(null);
|
|
2646
2685
|
useEffect10(() => {
|
|
2647
2686
|
if (maxCallDuration === null || endTimeRef.current !== null)
|
|
2648
2687
|
return;
|
|
@@ -2660,9 +2699,9 @@ function useSessionRemaining() {
|
|
|
2660
2699
|
}
|
|
2661
2700
|
|
|
2662
2701
|
// src/hooks/useElapsedSeconds.ts
|
|
2663
|
-
import { useEffect as useEffect11, useState as
|
|
2702
|
+
import { useEffect as useEffect11, useState as useState8 } from "react";
|
|
2664
2703
|
function useElapsedSeconds(isRunning) {
|
|
2665
|
-
const [elapsed, setElapsed] =
|
|
2704
|
+
const [elapsed, setElapsed] = useState8(0);
|
|
2666
2705
|
useEffect11(() => {
|
|
2667
2706
|
if (!isRunning) {
|
|
2668
2707
|
setElapsed(0);
|
|
@@ -2679,14 +2718,14 @@ function useElapsedSeconds(isRunning) {
|
|
|
2679
2718
|
}
|
|
2680
2719
|
|
|
2681
2720
|
// src/components/ChatHeader.tsx
|
|
2682
|
-
import { jsx as
|
|
2721
|
+
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
2683
2722
|
function ChatHeader() {
|
|
2684
2723
|
const { isConnected, minimizePanel, minimizable } = useLiveAgent();
|
|
2685
2724
|
const elapsed = useElapsedSeconds(isConnected);
|
|
2686
2725
|
return /* @__PURE__ */ jsxs5("header", {
|
|
2687
2726
|
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",
|
|
2688
2727
|
children: [
|
|
2689
|
-
/* @__PURE__ */
|
|
2728
|
+
/* @__PURE__ */ jsx6("p", {
|
|
2690
2729
|
className: "skippr:text-sm skippr:font-semibold skippr:text-primary-foreground",
|
|
2691
2730
|
children: "Skippr"
|
|
2692
2731
|
}),
|
|
@@ -2699,30 +2738,30 @@ function ChatHeader() {
|
|
|
2699
2738
|
/* @__PURE__ */ jsxs5("span", {
|
|
2700
2739
|
className: "skippr:relative skippr:flex skippr:size-1.5",
|
|
2701
2740
|
children: [
|
|
2702
|
-
/* @__PURE__ */
|
|
2741
|
+
/* @__PURE__ */ jsx6("span", {
|
|
2703
2742
|
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"
|
|
2704
2743
|
}),
|
|
2705
|
-
/* @__PURE__ */
|
|
2744
|
+
/* @__PURE__ */ jsx6("span", {
|
|
2706
2745
|
className: "skippr:relative skippr:inline-flex skippr:size-1.5 skippr:rounded-full skippr:bg-red-400"
|
|
2707
2746
|
})
|
|
2708
2747
|
]
|
|
2709
2748
|
}),
|
|
2710
|
-
/* @__PURE__ */
|
|
2749
|
+
/* @__PURE__ */ jsx6("span", {
|
|
2711
2750
|
className: "skippr:text-[10px] skippr:font-medium skippr:text-primary-foreground",
|
|
2712
2751
|
children: "REC"
|
|
2713
2752
|
}),
|
|
2714
|
-
/* @__PURE__ */
|
|
2753
|
+
/* @__PURE__ */ jsx6("span", {
|
|
2715
2754
|
className: "skippr:text-[10px] skippr:font-mono skippr:text-primary-foreground",
|
|
2716
2755
|
children: formatTime(elapsed)
|
|
2717
2756
|
})
|
|
2718
2757
|
]
|
|
2719
2758
|
}),
|
|
2720
|
-
minimizable && /* @__PURE__ */
|
|
2759
|
+
minimizable && /* @__PURE__ */ jsx6("button", {
|
|
2721
2760
|
type: "button",
|
|
2722
2761
|
onClick: minimizePanel,
|
|
2723
2762
|
"aria-label": "Minimize",
|
|
2724
2763
|
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",
|
|
2725
|
-
children: /* @__PURE__ */
|
|
2764
|
+
children: /* @__PURE__ */ jsx6(Minimize2, {
|
|
2726
2765
|
className: "skippr:size-3.5"
|
|
2727
2766
|
})
|
|
2728
2767
|
})
|
|
@@ -2733,7 +2772,7 @@ function ChatHeader() {
|
|
|
2733
2772
|
}
|
|
2734
2773
|
|
|
2735
2774
|
// src/components/LoadingDots.tsx
|
|
2736
|
-
import { jsx as
|
|
2775
|
+
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
2737
2776
|
function LoadingDots({ label }) {
|
|
2738
2777
|
return /* @__PURE__ */ jsxs6("div", {
|
|
2739
2778
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:py-4",
|
|
@@ -2741,18 +2780,18 @@ function LoadingDots({ label }) {
|
|
|
2741
2780
|
/* @__PURE__ */ jsxs6("div", {
|
|
2742
2781
|
className: "skippr:flex skippr:gap-1",
|
|
2743
2782
|
children: [
|
|
2744
|
-
/* @__PURE__ */
|
|
2783
|
+
/* @__PURE__ */ jsx7("span", {
|
|
2745
2784
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:0ms]"
|
|
2746
2785
|
}),
|
|
2747
|
-
/* @__PURE__ */
|
|
2786
|
+
/* @__PURE__ */ jsx7("span", {
|
|
2748
2787
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:150ms]"
|
|
2749
2788
|
}),
|
|
2750
|
-
/* @__PURE__ */
|
|
2789
|
+
/* @__PURE__ */ jsx7("span", {
|
|
2751
2790
|
className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:300ms]"
|
|
2752
2791
|
})
|
|
2753
2792
|
]
|
|
2754
2793
|
}),
|
|
2755
|
-
/* @__PURE__ */
|
|
2794
|
+
/* @__PURE__ */ jsx7("p", {
|
|
2756
2795
|
className: "skippr:text-xs skippr:text-muted-foreground",
|
|
2757
2796
|
children: label
|
|
2758
2797
|
})
|
|
@@ -2761,11 +2800,11 @@ function LoadingDots({ label }) {
|
|
|
2761
2800
|
}
|
|
2762
2801
|
|
|
2763
2802
|
// src/components/LoginFlow.tsx
|
|
2764
|
-
import { useCallback as useCallback7, useEffect as useEffect12, useRef as
|
|
2803
|
+
import { useCallback as useCallback7, useEffect as useEffect12, useRef as useRef7, useState as useState9 } from "react";
|
|
2765
2804
|
|
|
2766
2805
|
// src/components/ui/button.tsx
|
|
2767
2806
|
import { forwardRef as forwardRef3 } from "react";
|
|
2768
|
-
import { jsx as
|
|
2807
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
2769
2808
|
var variantClasses = {
|
|
2770
2809
|
default: "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90",
|
|
2771
2810
|
destructive: "skippr:bg-destructive skippr:text-white skippr:hover:bg-destructive/90",
|
|
@@ -2784,7 +2823,7 @@ var sizeClasses = {
|
|
|
2784
2823
|
"icon-lg": "skippr:size-10"
|
|
2785
2824
|
};
|
|
2786
2825
|
var Button = forwardRef3(({ className, variant = "default", size = "default", ...props }, ref) => {
|
|
2787
|
-
return /* @__PURE__ */
|
|
2826
|
+
return /* @__PURE__ */ jsx8("button", {
|
|
2788
2827
|
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),
|
|
2789
2828
|
ref,
|
|
2790
2829
|
...props
|
|
@@ -2793,12 +2832,12 @@ var Button = forwardRef3(({ className, variant = "default", size = "default", ..
|
|
|
2793
2832
|
Button.displayName = "Button";
|
|
2794
2833
|
|
|
2795
2834
|
// src/components/LoginFlow.tsx
|
|
2796
|
-
import { jsx as
|
|
2835
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
2797
2836
|
var OTP_LENGTH = 6;
|
|
2798
2837
|
var DIGIT_KEYS = ["d0", "d1", "d2", "d3", "d4", "d5"];
|
|
2799
2838
|
function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
2800
|
-
const [step, setStep] =
|
|
2801
|
-
const [email, setEmail] =
|
|
2839
|
+
const [step, setStep] = useState9("email");
|
|
2840
|
+
const [email, setEmail] = useState9("");
|
|
2802
2841
|
const handleRequestOtp = useCallback7(async (emailValue) => {
|
|
2803
2842
|
const success = await requestOtp(emailValue);
|
|
2804
2843
|
if (success)
|
|
@@ -2814,7 +2853,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
|
2814
2853
|
await requestOtp(email);
|
|
2815
2854
|
}, [requestOtp, email]);
|
|
2816
2855
|
if (step === "otp") {
|
|
2817
|
-
return /* @__PURE__ */
|
|
2856
|
+
return /* @__PURE__ */ jsx9(OtpStep, {
|
|
2818
2857
|
email,
|
|
2819
2858
|
onSubmit: handleVerifyOtp,
|
|
2820
2859
|
onResend: handleResend,
|
|
@@ -2823,7 +2862,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
|
2823
2862
|
isSubmitting
|
|
2824
2863
|
});
|
|
2825
2864
|
}
|
|
2826
|
-
return /* @__PURE__ */
|
|
2865
|
+
return /* @__PURE__ */ jsx9(EmailStep, {
|
|
2827
2866
|
email,
|
|
2828
2867
|
onEmailChange: setEmail,
|
|
2829
2868
|
onSubmit: handleRequestOtp,
|
|
@@ -2843,14 +2882,14 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
2843
2882
|
/* @__PURE__ */ jsxs7("div", {
|
|
2844
2883
|
className: "skippr:mb-4 skippr:text-center",
|
|
2845
2884
|
children: [
|
|
2846
|
-
/* @__PURE__ */
|
|
2885
|
+
/* @__PURE__ */ jsx9(Mail, {
|
|
2847
2886
|
className: "skippr:mx-auto skippr:mb-2 skippr:size-6 skippr:text-primary"
|
|
2848
2887
|
}),
|
|
2849
|
-
/* @__PURE__ */
|
|
2888
|
+
/* @__PURE__ */ jsx9("p", {
|
|
2850
2889
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
2851
2890
|
children: "Sign in to continue"
|
|
2852
2891
|
}),
|
|
2853
|
-
/* @__PURE__ */
|
|
2892
|
+
/* @__PURE__ */ jsx9("p", {
|
|
2854
2893
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
2855
2894
|
children: "Your email will be used to identify you across sessions"
|
|
2856
2895
|
})
|
|
@@ -2860,7 +2899,7 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
2860
2899
|
onSubmit: handleSubmit,
|
|
2861
2900
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
2862
2901
|
children: [
|
|
2863
|
-
/* @__PURE__ */
|
|
2902
|
+
/* @__PURE__ */ jsx9("input", {
|
|
2864
2903
|
type: "email",
|
|
2865
2904
|
placeholder: "you@example.com",
|
|
2866
2905
|
value: email,
|
|
@@ -2869,15 +2908,15 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
2869
2908
|
required: true,
|
|
2870
2909
|
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"
|
|
2871
2910
|
}),
|
|
2872
|
-
/* @__PURE__ */
|
|
2911
|
+
/* @__PURE__ */ jsx9(Button, {
|
|
2873
2912
|
type: "submit",
|
|
2874
2913
|
disabled: isSubmitting || !email.trim(),
|
|
2875
2914
|
className: "skippr:w-full",
|
|
2876
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
2915
|
+
children: isSubmitting ? /* @__PURE__ */ jsx9(LoaderCircle, {
|
|
2877
2916
|
className: "skippr:size-4 skippr:animate-spin"
|
|
2878
2917
|
}) : "Continue"
|
|
2879
2918
|
}),
|
|
2880
|
-
error && /* @__PURE__ */
|
|
2919
|
+
error && /* @__PURE__ */ jsx9("p", {
|
|
2881
2920
|
className: "skippr:text-xs skippr:text-center skippr:text-destructive",
|
|
2882
2921
|
children: error
|
|
2883
2922
|
})
|
|
@@ -2887,10 +2926,10 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
2887
2926
|
});
|
|
2888
2927
|
}
|
|
2889
2928
|
function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
2890
|
-
const [digits, setDigits] =
|
|
2891
|
-
const [resendCooldown, setResendCooldown] =
|
|
2892
|
-
const inputRefs =
|
|
2893
|
-
const submittedRef =
|
|
2929
|
+
const [digits, setDigits] = useState9(Array(OTP_LENGTH).fill(""));
|
|
2930
|
+
const [resendCooldown, setResendCooldown] = useState9(0);
|
|
2931
|
+
const inputRefs = useRef7([]);
|
|
2932
|
+
const submittedRef = useRef7(false);
|
|
2894
2933
|
useEffect12(() => {
|
|
2895
2934
|
inputRefs.current[0]?.focus();
|
|
2896
2935
|
}, []);
|
|
@@ -2963,7 +3002,7 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
2963
3002
|
/* @__PURE__ */ jsxs7("div", {
|
|
2964
3003
|
className: "skippr:mb-4 skippr:text-center",
|
|
2965
3004
|
children: [
|
|
2966
|
-
/* @__PURE__ */
|
|
3005
|
+
/* @__PURE__ */ jsx9("p", {
|
|
2967
3006
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
2968
3007
|
children: "Enter verification code"
|
|
2969
3008
|
}),
|
|
@@ -2972,7 +3011,7 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
2972
3011
|
children: [
|
|
2973
3012
|
"We sent a 6-digit code to",
|
|
2974
3013
|
" ",
|
|
2975
|
-
/* @__PURE__ */
|
|
3014
|
+
/* @__PURE__ */ jsx9("span", {
|
|
2976
3015
|
className: "skippr:font-medium skippr:text-foreground",
|
|
2977
3016
|
children: email
|
|
2978
3017
|
})
|
|
@@ -2984,9 +3023,9 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
2984
3023
|
onSubmit: handleSubmit,
|
|
2985
3024
|
className: "skippr:flex skippr:flex-col skippr:gap-3",
|
|
2986
3025
|
children: [
|
|
2987
|
-
/* @__PURE__ */
|
|
3026
|
+
/* @__PURE__ */ jsx9("div", {
|
|
2988
3027
|
className: "skippr:flex skippr:justify-center skippr:gap-1.5",
|
|
2989
|
-
children: digits.map((digit, index2) => /* @__PURE__ */
|
|
3028
|
+
children: digits.map((digit, index2) => /* @__PURE__ */ jsx9("input", {
|
|
2990
3029
|
ref: (el) => {
|
|
2991
3030
|
inputRefs.current[index2] = el;
|
|
2992
3031
|
},
|
|
@@ -3001,29 +3040,29 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3001
3040
|
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"
|
|
3002
3041
|
}, DIGIT_KEYS[index2]))
|
|
3003
3042
|
}),
|
|
3004
|
-
error && /* @__PURE__ */
|
|
3043
|
+
error && /* @__PURE__ */ jsx9("p", {
|
|
3005
3044
|
className: "skippr:text-xs skippr:text-center skippr:text-destructive",
|
|
3006
3045
|
children: error
|
|
3007
3046
|
}),
|
|
3008
|
-
/* @__PURE__ */
|
|
3047
|
+
/* @__PURE__ */ jsx9(Button, {
|
|
3009
3048
|
type: "submit",
|
|
3010
3049
|
disabled: isSubmitting || digits.join("").length !== OTP_LENGTH,
|
|
3011
3050
|
className: "skippr:w-full",
|
|
3012
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
3051
|
+
children: isSubmitting ? /* @__PURE__ */ jsx9(LoaderCircle, {
|
|
3013
3052
|
className: "skippr:size-4 skippr:animate-spin"
|
|
3014
3053
|
}) : "Verify"
|
|
3015
3054
|
}),
|
|
3016
3055
|
/* @__PURE__ */ jsxs7("div", {
|
|
3017
3056
|
className: "skippr:flex skippr:items-center skippr:justify-between skippr:text-xs",
|
|
3018
3057
|
children: [
|
|
3019
|
-
/* @__PURE__ */
|
|
3058
|
+
/* @__PURE__ */ jsx9("button", {
|
|
3020
3059
|
type: "button",
|
|
3021
3060
|
onClick: onBack,
|
|
3022
3061
|
disabled: isSubmitting,
|
|
3023
3062
|
className: "skippr:text-muted-foreground hover:skippr:text-foreground skippr:transition-colors disabled:skippr:opacity-50",
|
|
3024
3063
|
children: "Change email"
|
|
3025
3064
|
}),
|
|
3026
|
-
/* @__PURE__ */
|
|
3065
|
+
/* @__PURE__ */ jsx9("button", {
|
|
3027
3066
|
type: "button",
|
|
3028
3067
|
onClick: handleResend,
|
|
3029
3068
|
disabled: isSubmitting || resendCooldown > 0,
|
|
@@ -3039,7 +3078,7 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
3039
3078
|
}
|
|
3040
3079
|
|
|
3041
3080
|
// src/components/MeetingControls.tsx
|
|
3042
|
-
import { jsx as
|
|
3081
|
+
import { jsx as jsx10, jsxs as jsxs8, Fragment as Fragment4 } from "react/jsx-runtime";
|
|
3043
3082
|
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";
|
|
3044
3083
|
var MUTED_BUTTON = "skippr:bg-muted skippr:text-foreground skippr:hover:bg-muted/80";
|
|
3045
3084
|
function MeetingControls({
|
|
@@ -3058,62 +3097,62 @@ function MeetingControls({
|
|
|
3058
3097
|
/* @__PURE__ */ jsxs8("div", {
|
|
3059
3098
|
className: "skippr:flex skippr:items-center skippr:justify-center skippr:gap-3",
|
|
3060
3099
|
children: [
|
|
3061
|
-
!showPaused && /* @__PURE__ */ jsxs8(
|
|
3100
|
+
!showPaused && /* @__PURE__ */ jsxs8(Fragment4, {
|
|
3062
3101
|
children: [
|
|
3063
|
-
/* @__PURE__ */
|
|
3102
|
+
/* @__PURE__ */ jsx10("button", {
|
|
3064
3103
|
type: "button",
|
|
3065
3104
|
onClick: toggleMute,
|
|
3066
3105
|
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
3067
3106
|
className: cn(CONTROL_BUTTON2, isMuted ? "skippr:bg-destructive/15 skippr:text-destructive skippr:hover:bg-destructive/25" : MUTED_BUTTON),
|
|
3068
|
-
children: isMuted ? /* @__PURE__ */
|
|
3107
|
+
children: isMuted ? /* @__PURE__ */ jsx10(MicOff, {
|
|
3069
3108
|
className: "skippr:size-5"
|
|
3070
|
-
}) : /* @__PURE__ */
|
|
3109
|
+
}) : /* @__PURE__ */ jsx10(Mic, {
|
|
3071
3110
|
className: "skippr:size-5"
|
|
3072
3111
|
})
|
|
3073
3112
|
}),
|
|
3074
|
-
showScreenShareToggle && /* @__PURE__ */
|
|
3113
|
+
showScreenShareToggle && /* @__PURE__ */ jsx10("button", {
|
|
3075
3114
|
type: "button",
|
|
3076
3115
|
onClick: toggleScreenShare,
|
|
3077
3116
|
"aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
|
|
3078
3117
|
className: cn(CONTROL_BUTTON2, isScreenSharing ? "skippr:bg-bubble skippr:text-white skippr:hover:brightness-110" : MUTED_BUTTON),
|
|
3079
|
-
children: isScreenSharing ? /* @__PURE__ */
|
|
3118
|
+
children: isScreenSharing ? /* @__PURE__ */ jsx10(MonitorOff, {
|
|
3080
3119
|
className: "skippr:size-5"
|
|
3081
|
-
}) : /* @__PURE__ */
|
|
3120
|
+
}) : /* @__PURE__ */ jsx10(Monitor, {
|
|
3082
3121
|
className: "skippr:size-5"
|
|
3083
3122
|
})
|
|
3084
3123
|
})
|
|
3085
3124
|
]
|
|
3086
3125
|
}),
|
|
3087
|
-
showPaused ? onResume && /* @__PURE__ */
|
|
3126
|
+
showPaused ? onResume && /* @__PURE__ */ jsx10("button", {
|
|
3088
3127
|
type: "button",
|
|
3089
3128
|
onClick: onResume,
|
|
3090
3129
|
disabled: isPausing,
|
|
3091
3130
|
"aria-label": "Resume session",
|
|
3092
3131
|
className: cn(CONTROL_BUTTON2, MUTED_BUTTON),
|
|
3093
|
-
children: /* @__PURE__ */
|
|
3132
|
+
children: /* @__PURE__ */ jsx10(Play, {
|
|
3094
3133
|
className: "skippr:size-5"
|
|
3095
3134
|
})
|
|
3096
|
-
}) : onPause && /* @__PURE__ */
|
|
3135
|
+
}) : onPause && /* @__PURE__ */ jsx10("button", {
|
|
3097
3136
|
type: "button",
|
|
3098
3137
|
onClick: onPause,
|
|
3099
3138
|
"aria-label": "Pause session",
|
|
3100
3139
|
className: cn(CONTROL_BUTTON2, MUTED_BUTTON),
|
|
3101
|
-
children: /* @__PURE__ */
|
|
3140
|
+
children: /* @__PURE__ */ jsx10(Pause, {
|
|
3102
3141
|
className: "skippr:size-5"
|
|
3103
3142
|
})
|
|
3104
3143
|
}),
|
|
3105
|
-
/* @__PURE__ */
|
|
3144
|
+
/* @__PURE__ */ jsx10("button", {
|
|
3106
3145
|
type: "button",
|
|
3107
3146
|
onClick: onHangUp,
|
|
3108
3147
|
"aria-label": "End session",
|
|
3109
3148
|
className: cn(CONTROL_BUTTON2, "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90"),
|
|
3110
|
-
children: /* @__PURE__ */
|
|
3149
|
+
children: /* @__PURE__ */ jsx10(PhoneOff, {
|
|
3111
3150
|
className: "skippr:size-5"
|
|
3112
3151
|
})
|
|
3113
3152
|
})
|
|
3114
3153
|
]
|
|
3115
3154
|
}),
|
|
3116
|
-
/* @__PURE__ */
|
|
3155
|
+
/* @__PURE__ */ jsx10("p", {
|
|
3117
3156
|
className: "skippr:mt-3 skippr:text-center skippr:text-[10px] skippr:text-muted-foreground",
|
|
3118
3157
|
children: "Powered by Skippr"
|
|
3119
3158
|
})
|
|
@@ -3122,15 +3161,15 @@ function MeetingControls({
|
|
|
3122
3161
|
}
|
|
3123
3162
|
|
|
3124
3163
|
// src/components/MessageList.tsx
|
|
3125
|
-
import { useEffect as useEffect14, useRef as
|
|
3164
|
+
import { useEffect as useEffect14, useRef as useRef9 } from "react";
|
|
3126
3165
|
|
|
3127
3166
|
// src/components/ChatInput.tsx
|
|
3128
|
-
import { useEffect as useEffect13, useRef as
|
|
3129
|
-
import { jsx as
|
|
3167
|
+
import { useEffect as useEffect13, useRef as useRef8, useState as useState10 } from "react";
|
|
3168
|
+
import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
3130
3169
|
var MAX_INPUT_HEIGHT = 60;
|
|
3131
3170
|
function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
3132
|
-
const [inputText, setInputText] =
|
|
3133
|
-
const textareaRef =
|
|
3171
|
+
const [inputText, setInputText] = useState10("");
|
|
3172
|
+
const textareaRef = useRef8(null);
|
|
3134
3173
|
const canSend = inputText.trim().length > 0 && !isSendingChat;
|
|
3135
3174
|
useEffect13(() => {
|
|
3136
3175
|
if (autoFocus)
|
|
@@ -3163,13 +3202,13 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3163
3202
|
handleSubmit(e);
|
|
3164
3203
|
}
|
|
3165
3204
|
}
|
|
3166
|
-
return /* @__PURE__ */
|
|
3205
|
+
return /* @__PURE__ */ jsx11("form", {
|
|
3167
3206
|
onSubmit: handleSubmit,
|
|
3168
3207
|
className: "skippr:border-t skippr:border-border skippr:p-3",
|
|
3169
3208
|
children: /* @__PURE__ */ jsxs9("div", {
|
|
3170
3209
|
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",
|
|
3171
3210
|
children: [
|
|
3172
|
-
/* @__PURE__ */
|
|
3211
|
+
/* @__PURE__ */ jsx11("textarea", {
|
|
3173
3212
|
ref: textareaRef,
|
|
3174
3213
|
rows: 1,
|
|
3175
3214
|
value: inputText,
|
|
@@ -3179,12 +3218,12 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3179
3218
|
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",
|
|
3180
3219
|
style: { maxHeight: `${MAX_INPUT_HEIGHT}px` }
|
|
3181
3220
|
}),
|
|
3182
|
-
/* @__PURE__ */
|
|
3221
|
+
/* @__PURE__ */ jsx11("button", {
|
|
3183
3222
|
type: "submit",
|
|
3184
3223
|
disabled: !canSend,
|
|
3185
3224
|
"aria-label": "Send message",
|
|
3186
3225
|
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"),
|
|
3187
|
-
children: /* @__PURE__ */
|
|
3226
|
+
children: /* @__PURE__ */ jsx11(Send, {
|
|
3188
3227
|
className: "skippr:size-3.5"
|
|
3189
3228
|
})
|
|
3190
3229
|
})
|
|
@@ -3194,7 +3233,7 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
|
3194
3233
|
}
|
|
3195
3234
|
|
|
3196
3235
|
// src/components/ChatMessage.tsx
|
|
3197
|
-
import { jsx as
|
|
3236
|
+
import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
3198
3237
|
function formatTimestamp(ts) {
|
|
3199
3238
|
return new Date(ts).toLocaleTimeString("en-US", {
|
|
3200
3239
|
hour: "numeric",
|
|
@@ -3207,20 +3246,20 @@ function ChatMessage({ message }) {
|
|
|
3207
3246
|
return /* @__PURE__ */ jsxs10("div", {
|
|
3208
3247
|
className: cn("skippr:flex skippr:gap-2", isAgent ? "skippr:items-start" : "skippr:justify-end"),
|
|
3209
3248
|
children: [
|
|
3210
|
-
isAgent && /* @__PURE__ */
|
|
3249
|
+
isAgent && /* @__PURE__ */ jsx12("div", {
|
|
3211
3250
|
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",
|
|
3212
|
-
children: /* @__PURE__ */
|
|
3251
|
+
children: /* @__PURE__ */ jsx12(Sparkles, {
|
|
3213
3252
|
className: "skippr:size-3.5 skippr:text-primary-foreground"
|
|
3214
3253
|
})
|
|
3215
3254
|
}),
|
|
3216
3255
|
/* @__PURE__ */ jsxs10("div", {
|
|
3217
3256
|
className: cn("skippr:flex skippr:max-w-[80%] skippr:flex-col", isAgent ? "skippr:items-start" : "skippr:items-end"),
|
|
3218
3257
|
children: [
|
|
3219
|
-
/* @__PURE__ */
|
|
3258
|
+
/* @__PURE__ */ jsx12("div", {
|
|
3220
3259
|
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"),
|
|
3221
3260
|
children: message.content
|
|
3222
3261
|
}),
|
|
3223
|
-
message.timestamp && /* @__PURE__ */
|
|
3262
|
+
message.timestamp && /* @__PURE__ */ jsx12("span", {
|
|
3224
3263
|
className: "skippr:mt-1 skippr:px-1 skippr:text-[10px] skippr:text-muted-foreground/60",
|
|
3225
3264
|
children: formatTimestamp(message.timestamp)
|
|
3226
3265
|
})
|
|
@@ -3231,33 +3270,33 @@ function ChatMessage({ message }) {
|
|
|
3231
3270
|
}
|
|
3232
3271
|
|
|
3233
3272
|
// src/components/TypingIndicator.tsx
|
|
3234
|
-
import { jsx as
|
|
3273
|
+
import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
3235
3274
|
function TypingIndicator() {
|
|
3236
3275
|
return /* @__PURE__ */ jsxs11("div", {
|
|
3237
3276
|
className: "skippr:flex skippr:items-start skippr:gap-2 skippr:animate-skippr-tab-fade",
|
|
3238
3277
|
children: [
|
|
3239
|
-
/* @__PURE__ */
|
|
3278
|
+
/* @__PURE__ */ jsx13("div", {
|
|
3240
3279
|
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",
|
|
3241
|
-
children: /* @__PURE__ */
|
|
3280
|
+
children: /* @__PURE__ */ jsx13(Sparkles, {
|
|
3242
3281
|
className: "skippr:size-3.5 skippr:text-primary-foreground"
|
|
3243
3282
|
})
|
|
3244
3283
|
}),
|
|
3245
3284
|
/* @__PURE__ */ jsxs11("div", {
|
|
3246
3285
|
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",
|
|
3247
3286
|
children: [
|
|
3248
|
-
/* @__PURE__ */
|
|
3287
|
+
/* @__PURE__ */ jsx13("span", {
|
|
3249
3288
|
children: "Agent is analyzing your screen"
|
|
3250
3289
|
}),
|
|
3251
3290
|
/* @__PURE__ */ jsxs11("span", {
|
|
3252
3291
|
className: "skippr:inline-flex skippr:items-center skippr:gap-[2px]",
|
|
3253
3292
|
children: [
|
|
3254
|
-
/* @__PURE__ */
|
|
3293
|
+
/* @__PURE__ */ jsx13("span", {
|
|
3255
3294
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:0ms]"
|
|
3256
3295
|
}),
|
|
3257
|
-
/* @__PURE__ */
|
|
3296
|
+
/* @__PURE__ */ jsx13("span", {
|
|
3258
3297
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:200ms]"
|
|
3259
3298
|
}),
|
|
3260
|
-
/* @__PURE__ */
|
|
3299
|
+
/* @__PURE__ */ jsx13("span", {
|
|
3261
3300
|
className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:400ms]"
|
|
3262
3301
|
})
|
|
3263
3302
|
]
|
|
@@ -3269,7 +3308,7 @@ function TypingIndicator() {
|
|
|
3269
3308
|
}
|
|
3270
3309
|
|
|
3271
3310
|
// src/components/MessageList.tsx
|
|
3272
|
-
import { jsx as
|
|
3311
|
+
import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
3273
3312
|
function MessageList({
|
|
3274
3313
|
messages,
|
|
3275
3314
|
isStreaming,
|
|
@@ -3277,7 +3316,7 @@ function MessageList({
|
|
|
3277
3316
|
isSendingChat,
|
|
3278
3317
|
autoFocus = false
|
|
3279
3318
|
}) {
|
|
3280
|
-
const scrollRef =
|
|
3319
|
+
const scrollRef = useRef9(null);
|
|
3281
3320
|
const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
|
|
3282
3321
|
useEffect14(() => {
|
|
3283
3322
|
scrollRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
@@ -3289,19 +3328,19 @@ function MessageList({
|
|
|
3289
3328
|
/* @__PURE__ */ jsxs12("div", {
|
|
3290
3329
|
className: "skippr:min-h-0 skippr:flex-1 skippr:space-y-4 skippr:overflow-y-auto skippr:p-4",
|
|
3291
3330
|
children: [
|
|
3292
|
-
messages.length === 0 && !showTyping && /* @__PURE__ */
|
|
3331
|
+
messages.length === 0 && !showTyping && /* @__PURE__ */ jsx14(LoadingDots, {
|
|
3293
3332
|
label: "Waiting for conversation to begin..."
|
|
3294
3333
|
}),
|
|
3295
|
-
messages.map((message) => /* @__PURE__ */
|
|
3334
|
+
messages.map((message) => /* @__PURE__ */ jsx14(ChatMessage, {
|
|
3296
3335
|
message
|
|
3297
3336
|
}, message.id)),
|
|
3298
|
-
showTyping && /* @__PURE__ */
|
|
3299
|
-
/* @__PURE__ */
|
|
3337
|
+
showTyping && /* @__PURE__ */ jsx14(TypingIndicator, {}),
|
|
3338
|
+
/* @__PURE__ */ jsx14("div", {
|
|
3300
3339
|
ref: scrollRef
|
|
3301
3340
|
})
|
|
3302
3341
|
]
|
|
3303
3342
|
}),
|
|
3304
|
-
/* @__PURE__ */
|
|
3343
|
+
/* @__PURE__ */ jsx14(ChatInput, {
|
|
3305
3344
|
sendChatMessage,
|
|
3306
3345
|
isSendingChat,
|
|
3307
3346
|
autoFocus
|
|
@@ -3311,8 +3350,8 @@ function MessageList({
|
|
|
3311
3350
|
}
|
|
3312
3351
|
|
|
3313
3352
|
// src/components/ModuleSelector.tsx
|
|
3314
|
-
import { useEffect as useEffect15, useRef as
|
|
3315
|
-
import { jsx as
|
|
3353
|
+
import { useEffect as useEffect15, useRef as useRef10, useState as useState11 } from "react";
|
|
3354
|
+
import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
3316
3355
|
var AGENT_TYPE_ICONS = {
|
|
3317
3356
|
onboarding: UserPlus,
|
|
3318
3357
|
demo: Rocket,
|
|
@@ -3334,9 +3373,9 @@ function ModuleSelector() {
|
|
|
3334
3373
|
error
|
|
3335
3374
|
} = useLiveAgent();
|
|
3336
3375
|
const isBusy = isStarting || isDisconnecting;
|
|
3337
|
-
const scrollRef =
|
|
3338
|
-
const [showScrollHint, setShowScrollHint] =
|
|
3339
|
-
const [isScrolled, setIsScrolled] =
|
|
3376
|
+
const scrollRef = useRef10(null);
|
|
3377
|
+
const [showScrollHint, setShowScrollHint] = useState11(false);
|
|
3378
|
+
const [isScrolled, setIsScrolled] = useState11(false);
|
|
3340
3379
|
useEffect15(() => {
|
|
3341
3380
|
const el = scrollRef.current;
|
|
3342
3381
|
if (!el)
|
|
@@ -3359,9 +3398,9 @@ function ModuleSelector() {
|
|
|
3359
3398
|
};
|
|
3360
3399
|
}, []);
|
|
3361
3400
|
if (isLoadingModules && availableModules.length === 0) {
|
|
3362
|
-
return /* @__PURE__ */
|
|
3401
|
+
return /* @__PURE__ */ jsx15("div", {
|
|
3363
3402
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center skippr:p-6",
|
|
3364
|
-
children: /* @__PURE__ */
|
|
3403
|
+
children: /* @__PURE__ */ jsx15(LoadingDots, {
|
|
3365
3404
|
label: "Loading modules..."
|
|
3366
3405
|
})
|
|
3367
3406
|
});
|
|
@@ -3370,15 +3409,15 @@ function ModuleSelector() {
|
|
|
3370
3409
|
return /* @__PURE__ */ jsxs13("div", {
|
|
3371
3410
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:p-6 skippr:text-center",
|
|
3372
3411
|
children: [
|
|
3373
|
-
/* @__PURE__ */
|
|
3412
|
+
/* @__PURE__ */ jsx15("p", {
|
|
3374
3413
|
className: "skippr:text-sm skippr:text-foreground",
|
|
3375
3414
|
children: "Couldn't load modules."
|
|
3376
3415
|
}),
|
|
3377
|
-
/* @__PURE__ */
|
|
3416
|
+
/* @__PURE__ */ jsx15("p", {
|
|
3378
3417
|
className: "skippr:text-xs skippr:text-muted-foreground",
|
|
3379
3418
|
children: modulesError
|
|
3380
3419
|
}),
|
|
3381
|
-
/* @__PURE__ */
|
|
3420
|
+
/* @__PURE__ */ jsx15("button", {
|
|
3382
3421
|
type: "button",
|
|
3383
3422
|
onClick: () => void refetchModules(),
|
|
3384
3423
|
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",
|
|
@@ -3388,9 +3427,9 @@ function ModuleSelector() {
|
|
|
3388
3427
|
});
|
|
3389
3428
|
}
|
|
3390
3429
|
if (availableModules.length === 0) {
|
|
3391
|
-
return /* @__PURE__ */
|
|
3430
|
+
return /* @__PURE__ */ jsx15("div", {
|
|
3392
3431
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center skippr:p-6 skippr:text-center",
|
|
3393
|
-
children: /* @__PURE__ */
|
|
3432
|
+
children: /* @__PURE__ */ jsx15("p", {
|
|
3394
3433
|
className: "skippr:text-sm skippr:text-muted-foreground",
|
|
3395
3434
|
children: "No experts available."
|
|
3396
3435
|
})
|
|
@@ -3403,19 +3442,19 @@ function ModuleSelector() {
|
|
|
3403
3442
|
ref: scrollRef,
|
|
3404
3443
|
className: "skippr-no-scrollbar skippr:flex-1 skippr:overflow-y-auto",
|
|
3405
3444
|
children: [
|
|
3406
|
-
/* @__PURE__ */
|
|
3445
|
+
/* @__PURE__ */ jsx15("h3", {
|
|
3407
3446
|
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" : ""}`,
|
|
3408
3447
|
children: "Choose an agent"
|
|
3409
3448
|
}),
|
|
3410
3449
|
/* @__PURE__ */ jsxs13("div", {
|
|
3411
3450
|
className: "skippr:px-4 skippr:pt-3 skippr:pb-5",
|
|
3412
3451
|
children: [
|
|
3413
|
-
error && /* @__PURE__ */
|
|
3452
|
+
error && /* @__PURE__ */ jsx15("div", {
|
|
3414
3453
|
role: "alert",
|
|
3415
3454
|
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",
|
|
3416
3455
|
children: error
|
|
3417
3456
|
}),
|
|
3418
|
-
/* @__PURE__ */
|
|
3457
|
+
/* @__PURE__ */ jsx15("div", {
|
|
3419
3458
|
className: "skippr:grid skippr:grid-cols-2 skippr:gap-2.5",
|
|
3420
3459
|
children: availableModules.map((module, index2) => {
|
|
3421
3460
|
const isFeatured = index2 === 0;
|
|
@@ -3433,9 +3472,9 @@ function ModuleSelector() {
|
|
|
3433
3472
|
onClick: () => selectModule(module.id),
|
|
3434
3473
|
className: `${base} ${layout} ${variant} ${span}`,
|
|
3435
3474
|
children: [
|
|
3436
|
-
/* @__PURE__ */
|
|
3475
|
+
/* @__PURE__ */ jsx15("div", {
|
|
3437
3476
|
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",
|
|
3438
|
-
children: /* @__PURE__ */
|
|
3477
|
+
children: /* @__PURE__ */ jsx15(Icon2, {
|
|
3439
3478
|
className: isFeatured ? "skippr:h-4 skippr:w-4" : "skippr:h-4 skippr:w-4 skippr:text-muted-foreground"
|
|
3440
3479
|
})
|
|
3441
3480
|
}),
|
|
@@ -3445,14 +3484,14 @@ function ModuleSelector() {
|
|
|
3445
3484
|
/* @__PURE__ */ jsxs13("div", {
|
|
3446
3485
|
className: "skippr:flex skippr:items-center skippr:gap-1.5",
|
|
3447
3486
|
children: [
|
|
3448
|
-
/* @__PURE__ */
|
|
3487
|
+
/* @__PURE__ */ jsx15("p", {
|
|
3449
3488
|
className: "skippr:line-clamp-1 skippr:text-sm skippr:font-semibold",
|
|
3450
3489
|
children: module.name
|
|
3451
3490
|
}),
|
|
3452
3491
|
sessionState === "resume" && /* @__PURE__ */ jsxs13("span", {
|
|
3453
3492
|
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"}`,
|
|
3454
3493
|
children: [
|
|
3455
|
-
/* @__PURE__ */
|
|
3494
|
+
/* @__PURE__ */ jsx15(Play, {
|
|
3456
3495
|
className: "skippr:size-2.5"
|
|
3457
3496
|
}),
|
|
3458
3497
|
"Resume"
|
|
@@ -3461,7 +3500,7 @@ function ModuleSelector() {
|
|
|
3461
3500
|
sessionState === "completed" && /* @__PURE__ */ jsxs13("span", {
|
|
3462
3501
|
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",
|
|
3463
3502
|
children: [
|
|
3464
|
-
/* @__PURE__ */
|
|
3503
|
+
/* @__PURE__ */ jsx15(CircleCheck, {
|
|
3465
3504
|
className: "skippr:size-2.5"
|
|
3466
3505
|
}),
|
|
3467
3506
|
"Completed"
|
|
@@ -3470,7 +3509,7 @@ function ModuleSelector() {
|
|
|
3470
3509
|
sessionState === "expired" && /* @__PURE__ */ jsxs13("span", {
|
|
3471
3510
|
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",
|
|
3472
3511
|
children: [
|
|
3473
|
-
/* @__PURE__ */
|
|
3512
|
+
/* @__PURE__ */ jsx15(Clock, {
|
|
3474
3513
|
className: "skippr:size-2.5"
|
|
3475
3514
|
}),
|
|
3476
3515
|
"Expired"
|
|
@@ -3478,7 +3517,7 @@ function ModuleSelector() {
|
|
|
3478
3517
|
})
|
|
3479
3518
|
]
|
|
3480
3519
|
}),
|
|
3481
|
-
module.description && /* @__PURE__ */
|
|
3520
|
+
module.description && /* @__PURE__ */ jsx15("p", {
|
|
3482
3521
|
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",
|
|
3483
3522
|
children: module.description
|
|
3484
3523
|
})
|
|
@@ -3492,7 +3531,7 @@ function ModuleSelector() {
|
|
|
3492
3531
|
})
|
|
3493
3532
|
]
|
|
3494
3533
|
}),
|
|
3495
|
-
showScrollHint && /* @__PURE__ */
|
|
3534
|
+
showScrollHint && /* @__PURE__ */ jsx15("div", {
|
|
3496
3535
|
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"
|
|
3497
3536
|
})
|
|
3498
3537
|
]
|
|
@@ -3500,19 +3539,19 @@ function ModuleSelector() {
|
|
|
3500
3539
|
}
|
|
3501
3540
|
|
|
3502
3541
|
// src/components/SessionAgenda.tsx
|
|
3503
|
-
import { jsx as
|
|
3542
|
+
import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
3504
3543
|
function SessionAgenda({ phases, hasStarted }) {
|
|
3505
3544
|
if (phases.length === 0 || !hasStarted) {
|
|
3506
|
-
return /* @__PURE__ */
|
|
3545
|
+
return /* @__PURE__ */ jsx16("div", {
|
|
3507
3546
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
3508
|
-
children: /* @__PURE__ */
|
|
3547
|
+
children: /* @__PURE__ */ jsx16(LoadingDots, {
|
|
3509
3548
|
label: "Waiting for agenda to load..."
|
|
3510
3549
|
})
|
|
3511
3550
|
});
|
|
3512
3551
|
}
|
|
3513
|
-
return /* @__PURE__ */
|
|
3552
|
+
return /* @__PURE__ */ jsx16("div", {
|
|
3514
3553
|
className: "skippr:flex-1 skippr:overflow-y-auto skippr:px-4 skippr:py-4",
|
|
3515
|
-
children: /* @__PURE__ */
|
|
3554
|
+
children: /* @__PURE__ */ jsx16("div", {
|
|
3516
3555
|
className: "skippr:space-y-1",
|
|
3517
3556
|
children: phases.map((phase) => {
|
|
3518
3557
|
const isActive = phase.status === "active";
|
|
@@ -3520,29 +3559,29 @@ function SessionAgenda({ phases, hasStarted }) {
|
|
|
3520
3559
|
return /* @__PURE__ */ jsxs14("div", {
|
|
3521
3560
|
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"),
|
|
3522
3561
|
children: [
|
|
3523
|
-
/* @__PURE__ */
|
|
3562
|
+
/* @__PURE__ */ jsx16("div", {
|
|
3524
3563
|
className: "skippr:mt-0.5",
|
|
3525
|
-
children: isCompleted ? /* @__PURE__ */
|
|
3564
|
+
children: isCompleted ? /* @__PURE__ */ jsx16(CircleCheck, {
|
|
3526
3565
|
className: "skippr:size-4 skippr:text-chart-3"
|
|
3527
|
-
}) : isActive ? /* @__PURE__ */
|
|
3566
|
+
}) : isActive ? /* @__PURE__ */ jsx16(Circle, {
|
|
3528
3567
|
className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
|
|
3529
|
-
}) : /* @__PURE__ */
|
|
3568
|
+
}) : /* @__PURE__ */ jsx16(Circle, {
|
|
3530
3569
|
className: "skippr:size-4 skippr:text-muted-foreground/30"
|
|
3531
3570
|
})
|
|
3532
3571
|
}),
|
|
3533
3572
|
/* @__PURE__ */ jsxs14("div", {
|
|
3534
3573
|
className: "skippr:min-w-0 skippr:flex-1",
|
|
3535
3574
|
children: [
|
|
3536
|
-
/* @__PURE__ */
|
|
3575
|
+
/* @__PURE__ */ jsx16("p", {
|
|
3537
3576
|
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"),
|
|
3538
3577
|
children: phase.name
|
|
3539
3578
|
}),
|
|
3540
|
-
phase.highlights.length > 0 && /* @__PURE__ */
|
|
3579
|
+
phase.highlights.length > 0 && /* @__PURE__ */ jsx16("ul", {
|
|
3541
3580
|
className: "skippr:mt-1 skippr:space-y-0.5",
|
|
3542
3581
|
children: phase.highlights.map((text) => /* @__PURE__ */ jsxs14("li", {
|
|
3543
3582
|
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"),
|
|
3544
3583
|
children: [
|
|
3545
|
-
/* @__PURE__ */
|
|
3584
|
+
/* @__PURE__ */ jsx16("span", {
|
|
3546
3585
|
className: "skippr:size-1 skippr:shrink-0 skippr:rounded-full skippr:bg-current"
|
|
3547
3586
|
}),
|
|
3548
3587
|
text
|
|
@@ -3559,12 +3598,12 @@ function SessionAgenda({ phases, hasStarted }) {
|
|
|
3559
3598
|
}
|
|
3560
3599
|
|
|
3561
3600
|
// src/components/SessionWarningBanner.tsx
|
|
3562
|
-
import { jsx as
|
|
3601
|
+
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
3563
3602
|
var SESSION_WARNING_THRESHOLD_SECS = 60;
|
|
3564
3603
|
function SessionWarningBanner({ remaining }) {
|
|
3565
3604
|
if (remaining === null || remaining <= 0 || remaining > SESSION_WARNING_THRESHOLD_SECS)
|
|
3566
3605
|
return null;
|
|
3567
|
-
return /* @__PURE__ */
|
|
3606
|
+
return /* @__PURE__ */ jsx17("div", {
|
|
3568
3607
|
"data-testid": "session-warning-banner",
|
|
3569
3608
|
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",
|
|
3570
3609
|
children: "Session ending soon"
|
|
@@ -3572,7 +3611,7 @@ function SessionWarningBanner({ remaining }) {
|
|
|
3572
3611
|
}
|
|
3573
3612
|
|
|
3574
3613
|
// src/components/StartSessionPrompt.tsx
|
|
3575
|
-
import { jsx as
|
|
3614
|
+
import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
3576
3615
|
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";
|
|
3577
3616
|
function StartSessionPrompt({
|
|
3578
3617
|
onStartSession,
|
|
@@ -3587,13 +3626,13 @@ function StartSessionPrompt({
|
|
|
3587
3626
|
return /* @__PURE__ */ jsxs15("div", {
|
|
3588
3627
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:px-4",
|
|
3589
3628
|
children: [
|
|
3590
|
-
canResume && onResume ? /* @__PURE__ */
|
|
3629
|
+
canResume && onResume ? /* @__PURE__ */ jsx18("button", {
|
|
3591
3630
|
type: "button",
|
|
3592
3631
|
onClick: onResume,
|
|
3593
3632
|
disabled: isStarting,
|
|
3594
3633
|
className: PROMPT_BUTTON,
|
|
3595
3634
|
children: isStarting ? "Resuming..." : "Resume session"
|
|
3596
|
-
}) : /* @__PURE__ */
|
|
3635
|
+
}) : /* @__PURE__ */ jsx18("button", {
|
|
3597
3636
|
type: "button",
|
|
3598
3637
|
onClick: () => {
|
|
3599
3638
|
if (!agentId)
|
|
@@ -3604,7 +3643,7 @@ function StartSessionPrompt({
|
|
|
3604
3643
|
className: PROMPT_BUTTON,
|
|
3605
3644
|
children: isStarting ? "Starting..." : label
|
|
3606
3645
|
}),
|
|
3607
|
-
error && /* @__PURE__ */
|
|
3646
|
+
error && /* @__PURE__ */ jsx18("p", {
|
|
3608
3647
|
className: "skippr:text-xs skippr:text-destructive",
|
|
3609
3648
|
children: error
|
|
3610
3649
|
})
|
|
@@ -3613,7 +3652,7 @@ function StartSessionPrompt({
|
|
|
3613
3652
|
}
|
|
3614
3653
|
|
|
3615
3654
|
// src/components/Sidebar.tsx
|
|
3616
|
-
import { jsx as
|
|
3655
|
+
import { jsx as jsx19, jsxs as jsxs16, Fragment as Fragment5 } from "react/jsx-runtime";
|
|
3617
3656
|
function Sidebar({
|
|
3618
3657
|
hideControls = false,
|
|
3619
3658
|
hideHeader = false,
|
|
@@ -3649,7 +3688,7 @@ function Sidebar({
|
|
|
3649
3688
|
agentMode,
|
|
3650
3689
|
agentControls
|
|
3651
3690
|
} = useLiveAgent();
|
|
3652
|
-
const internalCtx =
|
|
3691
|
+
const internalCtx = useContext5(LiveAgentContext);
|
|
3653
3692
|
const usesHostAuth = internalCtx?.usesHostAuth ?? false;
|
|
3654
3693
|
const authFailed = internalCtx?.authFailed ?? false;
|
|
3655
3694
|
const showAgenda = agentMode !== AGENT_MODE.AlwaysOn;
|
|
@@ -3673,8 +3712,8 @@ function Sidebar({
|
|
|
3673
3712
|
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"),
|
|
3674
3713
|
style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined },
|
|
3675
3714
|
children: [
|
|
3676
|
-
!hideHeader && /* @__PURE__ */
|
|
3677
|
-
authFailed ? /* @__PURE__ */
|
|
3715
|
+
!hideHeader && /* @__PURE__ */ jsx19(ChatHeader, {}),
|
|
3716
|
+
authFailed ? /* @__PURE__ */ jsx19(AuthError, {}) : isAuthenticated ? /* @__PURE__ */ jsx19(AuthenticatedContent, {
|
|
3678
3717
|
isConnected,
|
|
3679
3718
|
isPaused,
|
|
3680
3719
|
isPausing,
|
|
@@ -3696,12 +3735,12 @@ function Sidebar({
|
|
|
3696
3735
|
agentId,
|
|
3697
3736
|
agentControls,
|
|
3698
3737
|
showAgenda
|
|
3699
|
-
}) : usesHostAuth || isValidating ? /* @__PURE__ */
|
|
3738
|
+
}) : usesHostAuth || isValidating ? /* @__PURE__ */ jsx19("div", {
|
|
3700
3739
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
3701
|
-
children: /* @__PURE__ */
|
|
3740
|
+
children: /* @__PURE__ */ jsx19(LoadingDots, {
|
|
3702
3741
|
label: "Loading..."
|
|
3703
3742
|
})
|
|
3704
|
-
}) : /* @__PURE__ */
|
|
3743
|
+
}) : /* @__PURE__ */ jsx19(LoginFlow, {
|
|
3705
3744
|
requestOtp,
|
|
3706
3745
|
verifyOtp,
|
|
3707
3746
|
error: authError,
|
|
@@ -3745,9 +3784,9 @@ function AuthenticatedContent({
|
|
|
3745
3784
|
} else if (isPaused) {
|
|
3746
3785
|
transitionLabel = "Paused";
|
|
3747
3786
|
}
|
|
3748
|
-
return /* @__PURE__ */ jsxs16(
|
|
3787
|
+
return /* @__PURE__ */ jsxs16(Fragment5, {
|
|
3749
3788
|
children: [
|
|
3750
|
-
isConnected && /* @__PURE__ */
|
|
3789
|
+
isConnected && /* @__PURE__ */ jsx19(ConnectedBanner, {}),
|
|
3751
3790
|
showTabBar && /* @__PURE__ */ jsxs16("div", {
|
|
3752
3791
|
className: "skippr:flex skippr:items-center skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-2",
|
|
3753
3792
|
children: [
|
|
@@ -3756,11 +3795,11 @@ function AuthenticatedContent({
|
|
|
3756
3795
|
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"),
|
|
3757
3796
|
onClick: () => onTabChange("chat"),
|
|
3758
3797
|
children: [
|
|
3759
|
-
/* @__PURE__ */
|
|
3798
|
+
/* @__PURE__ */ jsx19(MessageCircle, {
|
|
3760
3799
|
className: "skippr:size-3.5"
|
|
3761
3800
|
}),
|
|
3762
3801
|
"Chat",
|
|
3763
|
-
activeTab === "chat" && /* @__PURE__ */
|
|
3802
|
+
activeTab === "chat" && /* @__PURE__ */ jsx19("span", {
|
|
3764
3803
|
className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
3765
3804
|
})
|
|
3766
3805
|
]
|
|
@@ -3770,38 +3809,38 @@ function AuthenticatedContent({
|
|
|
3770
3809
|
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"),
|
|
3771
3810
|
onClick: () => onTabChange("agenda"),
|
|
3772
3811
|
children: [
|
|
3773
|
-
/* @__PURE__ */
|
|
3812
|
+
/* @__PURE__ */ jsx19(Calendar, {
|
|
3774
3813
|
className: "skippr:size-3.5"
|
|
3775
3814
|
}),
|
|
3776
3815
|
"Agenda",
|
|
3777
|
-
activeTab === "agenda" && /* @__PURE__ */
|
|
3816
|
+
activeTab === "agenda" && /* @__PURE__ */ jsx19("span", {
|
|
3778
3817
|
className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
|
|
3779
3818
|
})
|
|
3780
3819
|
]
|
|
3781
3820
|
})
|
|
3782
3821
|
]
|
|
3783
3822
|
}),
|
|
3784
|
-
/* @__PURE__ */
|
|
3823
|
+
/* @__PURE__ */ jsx19("div", {
|
|
3785
3824
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
|
|
3786
|
-
children: isDisconnecting ? /* @__PURE__ */
|
|
3825
|
+
children: isDisconnecting ? /* @__PURE__ */ jsx19("div", {
|
|
3787
3826
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
3788
|
-
children: /* @__PURE__ */
|
|
3827
|
+
children: /* @__PURE__ */ jsx19(LoadingDots, {
|
|
3789
3828
|
label: "Ending session..."
|
|
3790
3829
|
})
|
|
3791
|
-
}) : showSelectorAsPrompt ? /* @__PURE__ */
|
|
3830
|
+
}) : showSelectorAsPrompt ? /* @__PURE__ */ jsx19(ModuleSelector, {}) : inSession ? /* @__PURE__ */ jsxs16(Fragment5, {
|
|
3792
3831
|
children: [
|
|
3793
|
-
transitionLabel && /* @__PURE__ */
|
|
3832
|
+
transitionLabel && /* @__PURE__ */ jsx19("div", {
|
|
3794
3833
|
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",
|
|
3795
3834
|
children: transitionLabel
|
|
3796
3835
|
}),
|
|
3797
|
-
/* @__PURE__ */
|
|
3836
|
+
/* @__PURE__ */ jsx19(ConnectedBody, {
|
|
3798
3837
|
activeTab: effectiveTab,
|
|
3799
3838
|
autoFocusChat
|
|
3800
3839
|
})
|
|
3801
3840
|
]
|
|
3802
|
-
}) : /* @__PURE__ */
|
|
3841
|
+
}) : /* @__PURE__ */ jsx19("div", {
|
|
3803
3842
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
|
|
3804
|
-
children: /* @__PURE__ */
|
|
3843
|
+
children: /* @__PURE__ */ jsx19(StartSessionPrompt, {
|
|
3805
3844
|
onStartSession,
|
|
3806
3845
|
agentId,
|
|
3807
3846
|
agentControls,
|
|
@@ -3813,7 +3852,7 @@ function AuthenticatedContent({
|
|
|
3813
3852
|
})
|
|
3814
3853
|
}, `${activeTab}-empty`)
|
|
3815
3854
|
}),
|
|
3816
|
-
(isConnected || isPaused) && !isDisconnecting && !hideControls && /* @__PURE__ */
|
|
3855
|
+
(isConnected || isPaused) && !isDisconnecting && !hideControls && /* @__PURE__ */ jsx19(MeetingControls, {
|
|
3817
3856
|
onHangUp: onDisconnect,
|
|
3818
3857
|
onPause,
|
|
3819
3858
|
onResume,
|
|
@@ -3828,14 +3867,14 @@ function AuthError() {
|
|
|
3828
3867
|
return /* @__PURE__ */ jsxs16("div", {
|
|
3829
3868
|
className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:px-6 skippr:py-4 skippr:text-center",
|
|
3830
3869
|
children: [
|
|
3831
|
-
/* @__PURE__ */
|
|
3870
|
+
/* @__PURE__ */ jsx19(CircleAlert, {
|
|
3832
3871
|
className: "skippr:mb-3 skippr:size-7 skippr:text-destructive"
|
|
3833
3872
|
}),
|
|
3834
|
-
/* @__PURE__ */
|
|
3873
|
+
/* @__PURE__ */ jsx19("p", {
|
|
3835
3874
|
className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
|
|
3836
3875
|
children: "We couldn't verify your session"
|
|
3837
3876
|
}),
|
|
3838
|
-
/* @__PURE__ */
|
|
3877
|
+
/* @__PURE__ */ jsx19("p", {
|
|
3839
3878
|
className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
|
|
3840
3879
|
children: "Please contact administrator."
|
|
3841
3880
|
})
|
|
@@ -3844,7 +3883,7 @@ function AuthError() {
|
|
|
3844
3883
|
}
|
|
3845
3884
|
function ConnectedBanner() {
|
|
3846
3885
|
const remaining = useSessionRemaining();
|
|
3847
|
-
return /* @__PURE__ */
|
|
3886
|
+
return /* @__PURE__ */ jsx19(SessionWarningBanner, {
|
|
3848
3887
|
remaining
|
|
3849
3888
|
});
|
|
3850
3889
|
}
|
|
@@ -3855,17 +3894,17 @@ function ConnectedBody({
|
|
|
3855
3894
|
const { allMessages, agentState, sendChatMessage, isSendingChat } = useCombinedMessages();
|
|
3856
3895
|
const { phases } = usePhaseUpdates();
|
|
3857
3896
|
if (activeTab === "agenda") {
|
|
3858
|
-
return /* @__PURE__ */
|
|
3897
|
+
return /* @__PURE__ */ jsx19("div", {
|
|
3859
3898
|
className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto skippr:animate-skippr-tab-fade",
|
|
3860
|
-
children: /* @__PURE__ */
|
|
3899
|
+
children: /* @__PURE__ */ jsx19(SessionAgenda, {
|
|
3861
3900
|
phases,
|
|
3862
3901
|
hasStarted: allMessages.length > 0 || agentState === "speaking"
|
|
3863
3902
|
})
|
|
3864
3903
|
}, "agenda");
|
|
3865
3904
|
}
|
|
3866
|
-
return /* @__PURE__ */
|
|
3905
|
+
return /* @__PURE__ */ jsx19("div", {
|
|
3867
3906
|
className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
|
|
3868
|
-
children: /* @__PURE__ */
|
|
3907
|
+
children: /* @__PURE__ */ jsx19(MessageList, {
|
|
3869
3908
|
messages: allMessages,
|
|
3870
3909
|
isStreaming: agentState === "speaking",
|
|
3871
3910
|
sendChatMessage,
|
|
@@ -3876,28 +3915,28 @@ function ConnectedBody({
|
|
|
3876
3915
|
}
|
|
3877
3916
|
|
|
3878
3917
|
// src/components/SidebarTrigger.tsx
|
|
3879
|
-
import { jsx as
|
|
3918
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
3880
3919
|
function SidebarTrigger() {
|
|
3881
3920
|
const { isPanelOpen, togglePanel, minimizePanel, minimizable, position, isMinimized } = useLiveAgent();
|
|
3882
3921
|
if (isMinimized)
|
|
3883
3922
|
return null;
|
|
3884
3923
|
const handleClick = isPanelOpen && minimizable ? minimizePanel : togglePanel;
|
|
3885
|
-
return /* @__PURE__ */
|
|
3924
|
+
return /* @__PURE__ */ jsx20("button", {
|
|
3886
3925
|
type: "button",
|
|
3887
3926
|
onClick: handleClick,
|
|
3888
3927
|
title: isPanelOpen ? "Close chat" : "Open chat",
|
|
3889
3928
|
"aria-label": isPanelOpen ? "Close chat" : "Open chat",
|
|
3890
3929
|
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"),
|
|
3891
|
-
children: isPanelOpen ? /* @__PURE__ */
|
|
3930
|
+
children: isPanelOpen ? /* @__PURE__ */ jsx20(ChevronDown, {
|
|
3892
3931
|
className: "skippr:size-5"
|
|
3893
|
-
}) : /* @__PURE__ */
|
|
3932
|
+
}) : /* @__PURE__ */ jsx20(Logo, {
|
|
3894
3933
|
className: "skippr:size-12"
|
|
3895
3934
|
})
|
|
3896
3935
|
});
|
|
3897
3936
|
}
|
|
3898
3937
|
|
|
3899
3938
|
// src/components/LiveAgent.tsx
|
|
3900
|
-
import { jsx as
|
|
3939
|
+
import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
3901
3940
|
function LiveAgent(props) {
|
|
3902
3941
|
const {
|
|
3903
3942
|
agentId: hostAgentId,
|
|
@@ -3929,7 +3968,7 @@ function LiveAgent(props) {
|
|
|
3929
3968
|
const usesHostAuth = !!getUserToken || !!userToken || !!authTokenProp;
|
|
3930
3969
|
const effectiveAuthToken = usesHostAuth ? authTokenProp : auth.authToken ?? undefined;
|
|
3931
3970
|
const hasModuleSelector = !hostAgentId;
|
|
3932
|
-
const [activeModule, setActiveModule] =
|
|
3971
|
+
const [activeModule, setActiveModule] = useState12(null);
|
|
3933
3972
|
const agentId = hasModuleSelector ? activeModule?.id ?? null : hostAgentId;
|
|
3934
3973
|
const agentControls = hasModuleSelector ? activeModule?.controls : hostAgentControls;
|
|
3935
3974
|
const minimizeOnSessionStart = useCallback8(() => {
|
|
@@ -3978,17 +4017,17 @@ function LiveAgent(props) {
|
|
|
3978
4017
|
onStartError: expandOnSessionStartError,
|
|
3979
4018
|
onDisconnect: minimizeOnSessionDisconnect
|
|
3980
4019
|
});
|
|
3981
|
-
const teardownInFlightRef =
|
|
4020
|
+
const teardownInFlightRef = useRef11(false);
|
|
3982
4021
|
teardownInFlightRef.current = isPaused || isPausing || isDisconnecting;
|
|
3983
4022
|
const handleRoomDisconnected = useCallback8(() => {
|
|
3984
4023
|
if (teardownInFlightRef.current)
|
|
3985
4024
|
return;
|
|
3986
4025
|
disconnect();
|
|
3987
4026
|
}, [disconnect]);
|
|
3988
|
-
const [isPanelOpen, setIsPanelOpen] =
|
|
3989
|
-
const [isMinimized, setIsMinimized] =
|
|
3990
|
-
const [sidebarTab, setSidebarTab] =
|
|
3991
|
-
const [phasesSnapshot, setPhasesSnapshot] =
|
|
4027
|
+
const [isPanelOpen, setIsPanelOpen] = useState12(defaultOpen);
|
|
4028
|
+
const [isMinimized, setIsMinimized] = useState12(minimizable && !defaultOpen);
|
|
4029
|
+
const [sidebarTab, setSidebarTab] = useState12("agenda");
|
|
4030
|
+
const [phasesSnapshot, setPhasesSnapshot] = useState12([]);
|
|
3992
4031
|
const {
|
|
3993
4032
|
modules: availableModules,
|
|
3994
4033
|
isLoading: isLoadingModules,
|
|
@@ -4028,9 +4067,9 @@ function LiveAgent(props) {
|
|
|
4028
4067
|
existingSessionId: getResumableSessionId(found.currentSession, found.mode)
|
|
4029
4068
|
});
|
|
4030
4069
|
}, [availableModules, startSession]);
|
|
4031
|
-
const [welcomeDismissed, setWelcomeDismissed] =
|
|
4070
|
+
const [welcomeDismissed, setWelcomeDismissed] = useState12(false);
|
|
4032
4071
|
const dismissWelcome = useCallback8(() => setWelcomeDismissed(true), []);
|
|
4033
|
-
const [currentPosition, setCurrentPosition] =
|
|
4072
|
+
const [currentPosition, setCurrentPosition] = useState12(() => {
|
|
4034
4073
|
try {
|
|
4035
4074
|
const saved = localStorage.getItem("skippr_widget_position");
|
|
4036
4075
|
if (saved === "left" || saved === "right")
|
|
@@ -4162,7 +4201,7 @@ function LiveAgent(props) {
|
|
|
4162
4201
|
refetchModules,
|
|
4163
4202
|
selectModule
|
|
4164
4203
|
]);
|
|
4165
|
-
return /* @__PURE__ */
|
|
4204
|
+
return /* @__PURE__ */ jsx21(LiveAgentContext.Provider, {
|
|
4166
4205
|
value: ctx,
|
|
4167
4206
|
children: /* @__PURE__ */ jsxs17(LiveKitRoom, {
|
|
4168
4207
|
serverUrl: connection?.livekitUrl,
|
|
@@ -4171,25 +4210,29 @@ function LiveAgent(props) {
|
|
|
4171
4210
|
audio: true,
|
|
4172
4211
|
onDisconnected: handleRoomDisconnected,
|
|
4173
4212
|
children: [
|
|
4174
|
-
connection && /* @__PURE__ */
|
|
4175
|
-
connection && captureMode === "screenshare" && /* @__PURE__ */
|
|
4213
|
+
connection && /* @__PURE__ */ jsx21(RoomAudioRenderer, {}),
|
|
4214
|
+
connection && captureMode === "screenshare" && /* @__PURE__ */ jsx21(AutoStartMedia, {
|
|
4176
4215
|
pendingScreenStream
|
|
4177
4216
|
}),
|
|
4178
|
-
connection && captureMode === "auto" && /* @__PURE__ */
|
|
4179
|
-
|
|
4180
|
-
/* @__PURE__ */ jsxs17("div", {
|
|
4181
|
-
id: WIDGET_ROOT_ID,
|
|
4217
|
+
connection && captureMode === "auto" && /* @__PURE__ */ jsx21(DomCapture, {}),
|
|
4218
|
+
/* @__PURE__ */ jsxs17(ShadowHost, {
|
|
4182
4219
|
children: [
|
|
4183
|
-
|
|
4184
|
-
|
|
4185
|
-
|
|
4186
|
-
|
|
4187
|
-
|
|
4188
|
-
|
|
4189
|
-
|
|
4190
|
-
|
|
4191
|
-
|
|
4192
|
-
|
|
4220
|
+
connection && captureMode === "auto" && agentControls?.highlight && /* @__PURE__ */ jsx21(HighlightOverlay, {}),
|
|
4221
|
+
/* @__PURE__ */ jsxs17("div", {
|
|
4222
|
+
id: WIDGET_ROOT_ID,
|
|
4223
|
+
children: [
|
|
4224
|
+
isMinimized && /* @__PURE__ */ jsx21(MinimizedBubble, {
|
|
4225
|
+
welcomeMessage,
|
|
4226
|
+
welcomeDismissed,
|
|
4227
|
+
onDismissWelcome: dismissWelcome
|
|
4228
|
+
}),
|
|
4229
|
+
/* @__PURE__ */ jsx21(SidebarTrigger, {}),
|
|
4230
|
+
/* @__PURE__ */ jsx21(Sidebar, {
|
|
4231
|
+
hideControls,
|
|
4232
|
+
hideHeader,
|
|
4233
|
+
startSessionLabel
|
|
4234
|
+
})
|
|
4235
|
+
]
|
|
4193
4236
|
})
|
|
4194
4237
|
]
|
|
4195
4238
|
}),
|