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