@skippr/live-agent-sdk 0.118.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 {
@@ -12587,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";
@@ -13588,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]);
@@ -13674,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,
@@ -13697,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", {
@@ -13848,7 +13855,7 @@ function VoiceBarFrame({
       }),
       bannerActive && !chatOpen && !isCapturingSpeech && !planCardActive && /* @__PURE__ */ jsx52(VoiceBarNotification, {
         notifications,
-        pos,
+        pos: effectivePos,
         onDismiss: closeBanner
       }),
       /* @__PURE__ */ jsxs41("div", {
@@ -14548,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,
@@ -14922,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));