@skippr/live-agent-sdk 0.117.0 → 0.119.0

package/dist/esm/lib-exports.js

@@ -6169,11 +6169,11 @@ function barPopsDown(pos) {
 function barLeftAligned(pos) {
   return pos.x + VOICE_BAR_WIDTH_PX / 2 < window.innerWidth / 2;
 }
-function defaultBarPos() {
+function defaultBarPos(widthPx) {
   return clampBarPos({
-    x: window.innerWidth / 2 - VOICE_BAR_WIDTH_PX / 2,
+    x: window.innerWidth / 2 - widthPx / 2,
     y: window.innerHeight - VOICE_BAR_EDGE_MARGIN_PX - VOICE_BAR_HEIGHT_PX
-  }, VOICE_BAR_WIDTH_PX);
+  }, widthPx);
 }
 function barPosStyle(pos) {
   return {
@@ -10605,7 +10605,7 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
   return /* @__PURE__ */ jsxs24("form", {
     onSubmit: handleSubmit,
     "data-skippr-no-drag": "",
-    className: "skippr:flex skippr:items-center skippr:gap-[7px] skippr:border-t skippr:border-[rgba(45,45,63,0.08)] skippr:bg-white skippr:p-[9px]",
+    className: "skippr:flex skippr:shrink-0 skippr:items-center skippr:gap-[7px] skippr:border-t skippr:border-[rgba(45,45,63,0.08)] skippr:bg-white skippr:p-[9px]",
     children: [
       /* @__PURE__ */ jsx31("textarea", {
         ref: textareaRef,
@@ -10738,17 +10738,20 @@ function LinkCard({ card, onDismiss }) {
             href: card.url,
             target: "_blank",
             rel: "noopener noreferrer",
-            className: "skippr:inline-flex skippr:flex-1 skippr:items-center skippr:justify-center skippr:gap-2 skippr:rounded-md skippr:bg-primary skippr:py-2 skippr:text-sm skippr:font-medium skippr:text-primary-foreground skippr:transition-all skippr:hover:bg-primary/90 skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-ring skippr:focus-visible:ring-offset-2",
+            className: "skippr:inline-flex skippr:min-w-0 skippr:flex-1 skippr:items-center skippr:justify-center skippr:gap-2 skippr:rounded-md skippr:bg-primary skippr:py-2 skippr:text-xs skippr:font-medium skippr:text-primary-foreground skippr:transition-all skippr:hover:bg-primary/90 skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-ring skippr:focus-visible:ring-offset-2",
             children: [
               /* @__PURE__ */ jsx33(ExternalLink, {
-                className: "skippr:size-4"
+                className: "skippr:size-4 skippr:shrink-0"
               }),
-              copy.cardOpenLink
+              /* @__PURE__ */ jsx33("span", {
+                className: "skippr:truncate",
+                children: copy.cardOpenLink
+              })
             ]
           }),
           /* @__PURE__ */ jsxs26(Button, {
             variant: "outline",
-            className: "skippr:flex-1 skippr:py-2",
+            className: "skippr:px-2 skippr:py-2 skippr:text-xs",
             onClick: handleCopy,
             "aria-label": copy.cardCopyLink,
             children: [
@@ -10776,21 +10779,21 @@ var APPROVING_RESET_MS = 8000;
 function StepIcon({ status }) {
   if (status === "done") {
     return /* @__PURE__ */ jsx34(CircleCheck, {
-      className: "skippr:size-4 skippr:text-chart-3"
+      className: "skippr:size-4 skippr:shrink-0 skippr:text-chart-3"
     });
   }
   if (status === "failed") {
     return /* @__PURE__ */ jsx34(CircleX, {
-      className: "skippr:size-4 skippr:text-destructive"
+      className: "skippr:size-4 skippr:shrink-0 skippr:text-destructive"
     });
   }
   if (status === "active") {
     return /* @__PURE__ */ jsx34(Circle, {
-      className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
+      className: "skippr:size-4 skippr:shrink-0 skippr:fill-primary/30 skippr:text-primary"
     });
   }
   return /* @__PURE__ */ jsx34(Circle, {
-    className: "skippr:size-4 skippr:text-muted-foreground/30"
+    className: "skippr:size-4 skippr:shrink-0 skippr:text-muted-foreground/30"
   });
 }
 function PlanCard({ plan, sendChatMessage, onDismiss }) {
@@ -10822,14 +10825,14 @@ function PlanCard({ plan, sendChatMessage, onDismiss }) {
     return () => clearTimeout(timer);
   }, [plan.state, onDismiss]);
   return /* @__PURE__ */ jsxs27("div", {
-    className: "skippr:rounded-2xl skippr:rounded-tl-md skippr:bg-card skippr:p-3.5 skippr:ring-2 skippr:ring-brand",
+    className: "skippr:flex skippr:min-h-0 skippr:min-w-0 skippr:flex-1 skippr:flex-col skippr:rounded-2xl skippr:rounded-tl-md skippr:bg-card skippr:p-3.5 skippr:ring-2 skippr:ring-brand",
     children: [
       /* @__PURE__ */ jsx34("p", {
-        className: "skippr:mb-3 skippr:text-xs skippr:font-semibold skippr:leading-snug skippr:text-foreground",
+        className: "skippr:mb-3 skippr:shrink-0 skippr:text-xs skippr:font-semibold skippr:leading-snug skippr:text-foreground",
         children: copy.planTitle
       }),
       /* @__PURE__ */ jsx34("div", {
-        className: "skippr:max-h-[132px] skippr:space-y-2 skippr:overflow-y-auto skippr:overscroll-contain",
+        className: "skippr:min-h-0 skippr:max-h-[132px] skippr:space-y-2 skippr:overflow-y-auto skippr:overscroll-contain",
         children: plan.steps.map((step) => /* @__PURE__ */ jsxs27("div", {
           className: "skippr:flex skippr:items-center skippr:gap-2",
           children: [
@@ -10844,22 +10847,25 @@ function PlanCard({ plan, sendChatMessage, onDismiss }) {
         }, step.index))
       }),
       awaitingApproval && /* @__PURE__ */ jsxs27("div", {
-        className: "skippr:mt-3.5 skippr:flex skippr:gap-2",
+        className: "skippr:mt-3.5 skippr:flex skippr:shrink-0 skippr:gap-2",
         children: [
           /* @__PURE__ */ jsxs27(Button, {
-            className: "skippr:flex-1 skippr:gap-1.5 skippr:py-2",
+            className: "skippr:min-w-0 skippr:flex-1 skippr:gap-1.5 skippr:px-3 skippr:py-2 skippr:text-xs",
             disabled: isApproving,
             onClick: approve,
             children: [
               isApproving && /* @__PURE__ */ jsx34("span", {
                 className: "skippr:size-3 skippr:shrink-0 skippr:animate-spin skippr:rounded-full skippr:border-2 skippr:border-white/30 skippr:border-t-white"
               }),
-              isApproving ? copy.planApproving : copy.planApprove
+              /* @__PURE__ */ jsx34("span", {
+                className: "skippr:truncate",
+                children: isApproving ? copy.planApproving : copy.planApprove
+              })
             ]
           }),
           /* @__PURE__ */ jsx34(Button, {
             variant: "outline",
-            className: "skippr:flex-1 skippr:py-2",
+            className: "skippr:px-3 skippr:py-2 skippr:text-xs",
             disabled: isApproving,
             onClick: () => sendChatMessage(CANCEL_MESSAGE),
             children: copy.planCancel
@@ -11000,7 +11006,7 @@ function MessageList({
       }),
       isPlanShowing && /* @__PURE__ */ jsx36("div", {
         "data-skippr-no-drag": "",
-        className: "skippr:shrink-0 skippr:border-t skippr:border-border skippr:p-3",
+        className: "skippr:flex skippr:min-h-0 skippr:border-t skippr:border-border skippr:p-3",
         children: /* @__PURE__ */ jsx36(PlanCard, {
           plan,
           sendChatMessage,
@@ -12581,7 +12587,7 @@ function useBarNotifications() {
 
 // src/components/VoiceBarFrame.tsx
 import { useIsSpeaking, useLocalParticipant as useLocalParticipant13 } from "@livekit/components-react/hooks";
-import { useCallback as useCallback34, useContext as useContext27, useEffect as useEffect48, useRef as useRef43, useState as useState39 } from "react";
+import { useCallback as useCallback34, useContext as useContext27, useEffect as useEffect48, useLayoutEffect as useLayoutEffect5, useRef as useRef43, useState as useState39 } from "react";
 
 // src/hooks/useKeyboardStop.ts
 import { useEffect as useEffect40, useRef as useRef37 } from "react";
@@ -13582,8 +13588,15 @@ function VoiceBarFrame({
   const showLivePill = !isLoading && isConnected && !textMode && !pushOrTap;
   const barWidthPx = !showLivePill ? VOICE_BAR_WIDTH_PX : isHeld ? 120 : 156;
   barWidthRef.current = barWidthPx;
-  useEffect48(() => {
-    const inBounds = clampBarPos(pos, barWidthPx);
+  const effectivePos = pos ?? defaultBarPos(barWidthPx);
+  const posWidthRef = useRef43(barWidthPx);
+  useLayoutEffect5(() => {
+    const prevWidthPx = posWidthRef.current;
+    posWidthRef.current = barWidthPx;
+    if (pos === null)
+      return;
+    const centered = prevWidthPx === barWidthPx ? pos : { x: pos.x + Math.trunc((prevWidthPx - barWidthPx) / 2), y: pos.y };
+    const inBounds = clampBarPos(centered, barWidthPx);
     if (inBounds.x !== pos.x)
       onDrop(inBounds, barWidthPx);
   }, [pos, barWidthPx, onDrop]);
@@ -13668,8 +13681,8 @@ function VoiceBarFrame({
   const showAutoOffStrip = !slotClaimed && autoOffClosing;
   const hintSuppressed = slotClaimed || isCapturingSpeech || planCardActive || showLiveStrip || isHeld || showTimerStrip || showAutoOffStrip;
   const liveStripLabel = showActionControl ? copy.voiceBarWorking : copy.voiceBarThinking;
-  const popsDown = barPopsDown(pos);
-  const isLeftAligned = barLeftAligned(pos);
+  const popsDown = barPopsDown(effectivePos);
+  const isLeftAligned = barLeftAligned(effectivePos);
   const stripStyle = {
     position: "absolute",
     left: 0,
@@ -13691,7 +13704,7 @@ function VoiceBarFrame({
   const pillEvaporate = autoOffClosing ? "skippr:[animation:skippr-evaporate_3.2s_ease-in_forwards] skippr:motion-reduce:animate-none" : "";
   return /* @__PURE__ */ jsxs41("div", {
     ref: setContainerRefs,
-    style: { ...barPosStyle(pos), width: barWidthPx },
+    style: { ...barPosStyle(effectivePos), width: barWidthPx },
     className: "skippr:fixed skippr:z-[9999] skippr:flex skippr:touch-none skippr:cursor-grab skippr:items-center",
     children: [
       glow && /* @__PURE__ */ jsx52("span", {
@@ -13842,7 +13855,7 @@ function VoiceBarFrame({
       }),
       bannerActive && !chatOpen && !isCapturingSpeech && !planCardActive && /* @__PURE__ */ jsx52(VoiceBarNotification, {
         notifications,
-        pos,
+        pos: effectivePos,
         onDismiss: closeBanner
       }),
       /* @__PURE__ */ jsxs41("div", {
@@ -14542,9 +14555,8 @@ function VoiceBar({ revealed }) {
   if (isPanelOpen && splashSurfaces.panel) {
     return null;
   }
-  const effectiveBarPos = barPos ?? defaultBarPos();
   return /* @__PURE__ */ jsx55(VoiceBarFrame, {
-    pos: effectiveBarPos,
+    pos: barPos,
     canFold,
     notifications,
     onDrop: setBarPos,
@@ -14916,7 +14928,7 @@ function LiveAgent(props) {
     const syncBarToViewport = () => {
       const ratios = barPosRatioRef.current;
       const measured = voiceBarRef.current?.getBoundingClientRect().width;
-      setBarPosState(ratios === null ? defaultBarPos() : clampBarPos({
+      setBarPosState(ratios === null ? null : clampBarPos({
         x: ratios.xRatio * window.innerWidth,
         y: ratios.yRatio * window.innerHeight
       }, measured || VOICE_BAR_WIDTH_PX));