@skippr/live-agent-sdk 0.102.0 → 0.104.0

package/README.md

@@ -56,7 +56,6 @@ The widget opens with a picker of your active modules — the user chooses which
 
 ```tsx
 import { LiveAgent } from '@skippr/live-agent-sdk';
-import '@skippr/live-agent-sdk/styles';
 
 function App() {
   return <LiveAgent appKey="pk_live_your_key" />;

package/dist/esm/lib-exports.js

@@ -3745,6 +3745,9 @@ function mapApiMessages(messages) {
     timestamp: new Date(message.createdAt).getTime()
   }));
 }
+function hasLiveSession(flags) {
+  return flags.isConnected || flags.isStarting || flags.isPausing || flags.isDisconnecting || flags.isExchanging;
+}
 function getResumableSessionId(currentSession, mode) {
   if (!currentSession)
     return;
@@ -9640,17 +9643,8 @@ function useAdoptionTips() {
   if (!ctx) {
     throw new Error("useAdoptionTips must be used within a <LiveAgent> provider");
   }
-  const {
-    adoptionGoals,
-    agentMode,
-    hasResolvedModules,
-    isConnected,
-    isStarting,
-    isPausing,
-    isDisconnecting
-  } = ctx;
-  const sessionLive = isConnected || isStarting || isPausing || isDisconnecting;
-  const inStandardSession = sessionLive && agentMode !== AGENT_MODE.AlwaysOn;
+  const { adoptionGoals, agentMode, hasResolvedModules } = ctx;
+  const inStandardSession = hasLiveSession(ctx) && agentMode !== AGENT_MODE.AlwaysOn;
   if (inStandardSession || !hasResolvedModules || adoptionGoals.length === 0)
     return [];
   return adoptionGoals.slice(0, MAX_ADOPTION_TIPS);
@@ -9670,11 +9664,13 @@ function useBarNotifications() {
     hasResolvedModules,
     isConnected,
     previewStart,
+    selectModule,
     attendGoal
   } = ctx;
   const tips = useAdoptionTips();
   const { sendChatMessage } = useChatMessages();
   const inAlwaysOnSession = isConnected && agentMode === AGENT_MODE.AlwaysOn;
+  const inSession = hasLiveSession(ctx);
   const tipNotifications = tips.map((goal) => ({
     id: goal.goalId,
     kind: NOTIFICATION_KIND.Tip,
@@ -9693,7 +9689,7 @@ function useBarNotifications() {
     kind: NOTIFICATION_KIND.Module,
     message: module.name,
     accentColor: MODULE_ACCENT_COLOR,
-    activate: () => previewStart({ kind: PENDING_START_KIND.Module, moduleId: module.id })
+    activate: inSession ? () => void selectModule(module.id) : () => previewStart({ kind: PENDING_START_KIND.Module, moduleId: module.id })
   }));
   return [...tipNotifications, ...moduleNotifications];
 }
@@ -10613,8 +10609,8 @@ function VoiceBarFrame({
   const {
     isConnected,
     isStarting,
+    isExchanging,
     isPausing,
-    isDisconnecting,
     isAuthenticated,
     usesHostAuth,
     defaultAgentId,
@@ -10709,7 +10705,8 @@ function VoiceBarFrame({
     code: "Space",
     requireCtrl: true
   });
-  const sessionLive = isConnected || isStarting || isPausing || isDisconnecting;
+  const sessionLive = hasLiveSession(ctx);
+  const isLoading = isStarting || isExchanging;
   const canStart = isAuthenticated && (!!defaultAgentId || !!pendingStart);
   const showClose = canFold || sessionLive;
   const logoUrl = appearance?.logoUrl ?? null;
@@ -10725,7 +10722,7 @@ function VoiceBarFrame({
       minimizePanel();
     }
   };
-  useKeyboardStop({ enabled: sessionLive, onStop: closeBar });
+  useKeyboardStop({ enabled: sessionLive && !isPausing && !isLoading, onStop: closeBar });
   const hintSeenRef = useRef39(false);
   const requestPillBg = isCapturingSpeech ? "var(--skippr-brand-active)" : "var(--skippr-brand, #2bc0ae)";
   const agentStateLabel = state === "thinking" ? "thinking…" : state === "speaking" ? "talking…" : null;
@@ -10777,7 +10774,7 @@ function VoiceBarFrame({
   const linkCardActive = !!visibleLinkCard && isConnected && !planCardActive && !(isRoomChat && chatOpen) && !isCapturingSpeech && !isHeld && !autoOffClosing;
   const bannerActive = hasNotifications && bannerOpen;
   const slotClaimed = chatOpen || bannerActive || lineBlockOpen;
-  const autoBase = !isStarting && isConnected && !textMode && !pushOrTap && !autoOffClosing;
+  const autoBase = !isLoading && isConnected && !textMode && !pushOrTap && !autoOffClosing;
   const showHeldStrip = !slotClaimed && autoBase && isHeld;
   const showLiveStrip = !slotClaimed && autoBase && !isHeld && !planCardActive && (state === "thinking" || showActionControl);
   const showTimerStrip = !slotClaimed && !autoOffClosing && !isCapturingSpeech && !planCardActive && !showLiveStrip && !showHeldStrip && !!sessionTimer;
@@ -10980,9 +10977,9 @@ function VoiceBarFrame({
           showClose && /* @__PURE__ */ jsxs37("button", {
             type: "button",
             onClick: ifNotDragged(closeBar),
-            disabled: isPausing || isStarting,
+            disabled: isPausing || isLoading,
             "aria-label": sessionLive ? "End session" : "Close",
-            className: cn(EDGE_BUTTON, "skippr:relative skippr:size-[26px]", isStarting && "skippr:cursor-not-allowed skippr:opacity-40 skippr:hover:bg-transparent skippr:hover:text-[#b8b4ac]"),
+            className: cn(EDGE_BUTTON, "skippr:relative skippr:size-[26px]", isLoading && "skippr:cursor-not-allowed skippr:opacity-40 skippr:hover:bg-transparent skippr:hover:text-[#b8b4ac]"),
             children: [
               isPausing && /* @__PURE__ */ jsx45(BusyRing, {
                 tone: "brand"
@@ -10993,8 +10990,8 @@ function VoiceBarFrame({
               })
             ]
           }),
-          isStarting && /* @__PURE__ */ jsxs37("div", {
-            className: cn(PILL, "skippr:bg-[#F1EFEA] skippr:overflow-hidden skippr:[animation:skippr-fade-in_0.25s_ease]"),
+          isLoading && /* @__PURE__ */ jsxs37("div", {
+            className: cn(PILL, "skippr:bg-[#F1EFEA] skippr:overflow-hidden", !isExchanging && "skippr:[animation:skippr-fade-in_0.25s_ease]"),
             children: [
               /* @__PURE__ */ jsx45(LoadingAvatar, {
                 logoUrl
@@ -11019,7 +11016,7 @@ function VoiceBarFrame({
               })
             ]
           }),
-          !isStarting && isConnected && !textMode && pushOrTap && /* @__PURE__ */ jsx45(ShortcutHint, {
+          !isLoading && isConnected && !textMode && pushOrTap && /* @__PURE__ */ jsx45(ShortcutHint, {
             enabled: isPushToTalk,
             seenRef: hintSeenRef,
             suppressed: hintSuppressed,
@@ -11050,7 +11047,7 @@ function VoiceBarFrame({
               ]
             })
           }),
-          !isStarting && isConnected && !textMode && !pushOrTap && /* @__PURE__ */ jsxs37("div", {
+          !isLoading && isConnected && !textMode && !pushOrTap && /* @__PURE__ */ jsxs37("div", {
             style: { background: livePillBg, color: "var(--skippr-brand-foreground, #2d2b3d)" },
             className: cn(PILL, "skippr:gap-[9px] skippr:px-[8px]"),
             children: [
@@ -11123,7 +11120,7 @@ function VoiceBarFrame({
               })
             ]
           }),
-          !isStarting && isConnected && textMode && /* @__PURE__ */ jsxs37("div", {
+          !isLoading && isConnected && textMode && /* @__PURE__ */ jsxs37("div", {
             className: cn(PILL, "skippr:gap-[7px] skippr:bg-[#F1EFEA] skippr:text-[#5a5650] skippr:[animation:skippr-fade-in_0.25s_ease]"),
             children: [
               /* @__PURE__ */ jsx45(MessageSquare, {
@@ -11164,9 +11161,9 @@ function VoiceBarFrame({
           (sessionLive || isRoomChat) && /* @__PURE__ */ jsx45("button", {
             type: "button",
             onClick: ifNotDragged(toggleChat),
-            disabled: isStarting,
+            disabled: isLoading,
             "aria-label": "Open chat",
-            className: cn(EDGE_BUTTON, "skippr:size-[30px] skippr:text-[#8b877f]", isStarting && "skippr:cursor-not-allowed skippr:opacity-40 skippr:hover:bg-transparent skippr:hover:text-[#8b877f]"),
+            className: cn(EDGE_BUTTON, "skippr:size-[30px] skippr:text-[#8b877f]", isLoading && "skippr:cursor-not-allowed skippr:opacity-40 skippr:hover:bg-transparent skippr:hover:text-[#8b877f]"),
             children: /* @__PURE__ */ jsx45(MessageSquare, {
               className: "skippr:size-[15px]",
               strokeWidth: 2
@@ -11662,10 +11659,6 @@ function VoiceBar({ revealed }) {
     throw new Error("VoiceBar must be used within a <LiveAgent> provider");
   }
   const {
-    isConnected,
-    isStarting,
-    isPausing,
-    isDisconnecting,
     isMinimized,
     isAuthenticated,
     usesHostAuth,
@@ -11687,7 +11680,7 @@ function VoiceBar({ revealed }) {
   if (!revealed)
     return null;
   const launcherMode = appearance?.launcherMode ?? DEFAULT_LAUNCHER_MODE;
-  const sessionLive = isConnected || isStarting || isPausing || isDisconnecting;
+  const sessionLive = hasLiveSession(ctx);
   const canFold = launcherMode !== LAUNCHER_MODE.None;
   const needsLogin = !usesHostAuth && !isAuthenticated;
   const launcherEdge = appearance?.position === "left" ? "left" : "right";
@@ -11794,6 +11787,7 @@ function LiveAgent(props) {
   const effectiveAuthToken = usesHostAuth ? authTokenProp : auth.authToken ?? undefined;
   const [activeModule, setActiveModule] = useState39(null);
   const [sessionAgentMode, setSessionAgentMode] = useState39(null);
+  const [isExchanging, setIsExchanging] = useState39(false);
   const minimizeOnSessionStart = useCallback33(() => {
     if (minimizable) {
       setIsMinimized(true);
@@ -11804,7 +11798,10 @@ function LiveAgent(props) {
     setIsMinimized(false);
     setIsPanelOpen(true);
   }, []);
+  const isExchangeDisconnectingRef = useRef42(false);
   const minimizeOnSessionDisconnect = useCallback33(() => {
+    if (isExchangeDisconnectingRef.current)
+      return;
     setActiveModule(null);
     setSessionAgentMode(null);
     if (minimizable) {
@@ -11841,14 +11838,21 @@ function LiveAgent(props) {
     onStartError: expandOnSessionStartError,
     onDisconnect: minimizeOnSessionDisconnect
   });
-  const teardownInFlightRef = useRef42(false);
-  teardownInFlightRef.current = isPaused || isPausing || isDisconnecting;
+  const isConnected = connection !== null;
+  const isSessionLive = hasLiveSession({
+    isConnected,
+    isStarting,
+    isPausing,
+    isDisconnecting,
+    isExchanging
+  });
+  const isRoomReleasedRef = useRef42(false);
+  isRoomReleasedRef.current = !isConnected || isPausing || isDisconnecting;
   const handleRoomDisconnected = useCallback33(() => {
-    if (teardownInFlightRef.current)
+    if (isExchangeDisconnectingRef.current || isRoomReleasedRef.current)
       return;
     disconnect();
   }, [disconnect]);
-  const isSessionLive = connection !== null || isStarting || isPausing || isDisconnecting;
   const [isPanelOpen, setIsPanelOpen] = useState39(defaultOpen);
   const [isMinimized, setIsMinimized] = useState39(minimizable && !defaultOpen);
   const [pendingStart, setPendingStart] = useState39(null);
@@ -11864,7 +11868,6 @@ function LiveAgent(props) {
   const setTextModeState = useCallback33((enabled) => {
     setTextMode(enabled);
   }, []);
-  const isConnected = connection !== null;
   const showControlBar = isConnected || isStarting || isPausing;
   useEffect49(() => {
     if (!isConnected)
@@ -11921,19 +11924,40 @@ function LiveAgent(props) {
       existingSessionId: resumableSession.id
     });
   }, [resumableSession, operatingModule, startSession, baseAgentControls]);
-  const selectModule = useCallback33((moduleId, opts) => {
+  const selectModule = useCallback33(async (moduleId, opts) => {
+    if (isExchangeDisconnectingRef.current)
+      return;
     const found = availableModules.find((m) => m.id === moduleId);
     if (!found)
       return;
+    if (isSessionLive && found.id !== operatingModule?.id) {
+      isExchangeDisconnectingRef.current = true;
+      setIsExchanging(true);
+      try {
+        await disconnect();
+        setActiveModule(found);
+        setSessionAgentMode(found.mode);
+        await startSession({
+          agentId: found.id,
+          agentControls: found.controls,
+          existingSessionId: getResumableSessionId(found.currentSession, found.mode),
+          autoStarted: opts?.autoStarted
+        });
+      } finally {
+        isExchangeDisconnectingRef.current = false;
+        setIsExchanging(false);
+      }
+      return;
+    }
     setActiveModule(found);
     setSessionAgentMode(found.mode);
-    startSession({
+    await startSession({
       agentId: found.id,
       agentControls: found.controls,
       existingSessionId: getResumableSessionId(found.currentSession, found.mode),
       autoStarted: opts?.autoStarted
     });
-  }, [availableModules, startSession]);
+  }, [availableModules, startSession, isSessionLive, operatingModule, disconnect]);
   const startAdoptionSession = useCallback33((goal) => {
     attendGoal(goal.goalId);
     const found = availableModules.find((m) => m.id === goal.agentId);
@@ -12136,6 +12160,7 @@ function LiveAgent(props) {
     shouldConnect,
     isConnected,
     isStarting,
+    isExchanging,
     isDisconnecting,
     isPausing,
     error,
@@ -12222,6 +12247,7 @@ function LiveAgent(props) {
     shouldConnect,
     isConnected,
     isStarting,
+    isExchanging,
     isDisconnecting,
     isPausing,
     error,