@unctad-ai/voice-agent-ui 5.0.0 → 5.0.2

package/dist/{VoiceSettingsView-AMFLQL3Z.js → VoiceSettingsView-GDVOO6A3.js}

@@ -5,7 +5,7 @@ import {
   SliderSetting,
   ToggleSetting,
   VoiceSettingsView
-} from "./chunk-SRZ6RHED.js";
+} from "./chunk-342HTDVN.js";
 export {
   Divider,
   SelectSetting,
@@ -14,4 +14,4 @@ export {
   ToggleSetting,
   VoiceSettingsView as default
 };
-//# sourceMappingURL=VoiceSettingsView-AMFLQL3Z.js.map
+//# sourceMappingURL=VoiceSettingsView-GDVOO6A3.js.map

package/dist/{chunk-SRZ6RHED.js → chunk-342HTDVN.js}

@@ -1505,7 +1505,7 @@ function VoiceSettingsView({ onBack, onVolumeChange }) {
           ) : /* @__PURE__ */ jsx3("span", {}),
           /* @__PURE__ */ jsxs2("span", { children: [
             "Kit v",
-            /* @__PURE__ */ jsx3("span", { style: { fontWeight: 500, color: "#6b7280" }, children: "5.0.0" })
+            /* @__PURE__ */ jsx3("span", { style: { fontWeight: 500, color: "#6b7280" }, children: "5.0.2" })
           ] })
         ] }) })
       ]
@@ -1597,4 +1597,4 @@ export {
   SettingsSection,
   Divider
 };
-//# sourceMappingURL=chunk-SRZ6RHED.js.map
+//# sourceMappingURL=chunk-342HTDVN.js.map

package/dist/index.js

@@ -8,7 +8,7 @@ import {
   VoiceSettingsProvider,
   VoiceSettingsView,
   useVoiceSettings
-} from "./chunk-SRZ6RHED.js";
+} from "./chunk-342HTDVN.js";
 
 // src/VoiceAgentProvider.tsx
 import { SiteConfigProvider } from "@unctad-ai/voice-agent-core";
@@ -1665,7 +1665,9 @@ function PipelineMetricsBar({
 
 // src/components/GlassCopilotPanel.tsx
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var VoiceSettingsView2 = lazy(() => import("./VoiceSettingsView-AMFLQL3Z.js"));
+var VoiceSettingsView2 = lazy(() => import("./VoiceSettingsView-GDVOO6A3.js"));
+var RETRY_INITIAL_MS = 3e3;
+var RETRY_MAX_MS = 3e4;
 var STATE_LABELS = {
   IDLE: "Tap mic to speak",
   LISTENING: "Listening...",
@@ -1680,7 +1682,7 @@ var ARIA_LIVE_LABELS = {
   speaking: "Playing response",
   error: "An error occurred"
 };
-function CopilotFAB({ onClick, portraitSrc }) {
+function CopilotFAB({ onClick, portraitSrc, isOffline = false }) {
   const { colors } = useSiteConfig4();
   return /* @__PURE__ */ jsx9(
     motion5.button,
@@ -1699,7 +1701,7 @@ function CopilotFAB({ onClick, portraitSrc }) {
       },
       "aria-label": "Open voice assistant",
       "data-testid": "voice-agent-fab",
-      children: /* @__PURE__ */ jsx9("div", { className: "agent-fab-border", style: { width: 54, height: 54, "--agent-primary": colors.primary }, children: /* @__PURE__ */ jsx9("div", { className: "agent-fab-border-inner", children: portraitSrc ? /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx9("div", { className: "agent-fab-border", style: { width: 54, height: 54, "--agent-primary": isOffline ? "#9ca3af" : colors.primary, animation: isOffline ? "none" : void 0 }, children: /* @__PURE__ */ jsx9("div", { className: "agent-fab-border-inner", children: portraitSrc ? /* @__PURE__ */ jsx9(
         "img",
         {
           src: portraitSrc,
@@ -1736,6 +1738,7 @@ function CollapsedBar({
   onClose,
   onRetry,
   isRetrying = false,
+  retryCountdown,
   voiceError,
   micPaused = false,
   onMicToggle,
@@ -1807,8 +1810,8 @@ function CollapsedBar({
                 letterSpacing: "0.01em"
               },
               children: isOffline ? /* @__PURE__ */ jsxs8("span", { className: "inline-flex items-center gap-1", children: [
-                "Offline",
-                onRetry && /* @__PURE__ */ jsx9(
+                retryCountdown ? `Retrying in ${retryCountdown}s` : "Offline",
+                onRetry && !retryCountdown && /* @__PURE__ */ jsx9(
                   "button",
                   {
                     onClick: (e) => {
@@ -1931,15 +1934,17 @@ function ComposerBar({
   }, [disabled]);
   useEffect6(() => {
     if (mode === "text") {
-      requestAnimationFrame(() => inputRef.current?.focus());
+      const timer = setTimeout(() => inputRef.current?.focus(), 200);
+      return () => clearTimeout(timer);
     }
   }, [mode]);
   const handleSubmit = () => {
+    if (disabled) return;
     const trimmed = text.trim();
     if (!trimmed) return;
     onTextSubmit(trimmed);
     setText("");
-    if (!disabled) setMode("voice");
+    requestAnimationFrame(() => inputRef.current?.focus());
   };
   const handleCancel = () => {
     setText("");
@@ -2062,6 +2067,7 @@ function ComposerBar({
                     type: "text",
                     value: text,
                     onChange: (e) => setText(e.target.value),
+                    disabled,
                     onKeyDown: (e) => {
                       if (e.key === "Enter") handleSubmit();
                       if (e.key === "Escape") handleCancel();
@@ -2080,7 +2086,7 @@ function ComposerBar({
                         pill.style.boxShadow = "none";
                       }
                     },
-                    placeholder: "Ask about services...",
+                    placeholder: disabled ? "Reconnecting..." : "Ask about services...",
                     "aria-label": "Type your question",
                     "data-testid": "voice-agent-input",
                     className: "w-full",
@@ -2090,7 +2096,9 @@ function ComposerBar({
                       background: "transparent",
                       border: "none",
                       outline: "none",
-                      padding: 0
+                      padding: 0,
+                      opacity: disabled ? 0.5 : 1,
+                      cursor: disabled ? "not-allowed" : void 0
                     }
                   }
                 )
@@ -2161,6 +2169,7 @@ function ExpandedContent({
   onInteraction,
   onRetry,
   isRetrying = false,
+  retryCountdown,
   lastTimings,
   showPipelineMetrics,
   pipelineMetricsAutoHideMs,
@@ -2256,7 +2265,7 @@ function ExpandedContent({
             /* @__PURE__ */ jsx9(PipelineMetricsBar, { timings: lastTimings ?? null, show: showPipelineMetrics, autoHideMs: pipelineMetricsAutoHideMs }),
             isOffline && onRetry && /* @__PURE__ */ jsx9("div", { style: { padding: "0 16px 8px", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxs8(motion5.button, { whileHover: { scale: 1.04 }, whileTap: { scale: 0.96 }, onClick: onRetry, disabled: isRetrying, className: "inline-flex items-center gap-2 rounded-full cursor-pointer transition-colors", style: { padding: "8px 18px", fontSize: "13px", fontWeight: 500, color: isRetrying ? "rgba(0,0,0,0.35)" : "rgba(220,38,38,0.8)", backgroundColor: isRetrying ? "rgba(0,0,0,0.04)" : "rgba(220,38,38,0.08)", border: "1px solid", borderColor: isRetrying ? "rgba(0,0,0,0.06)" : "rgba(220,38,38,0.15)" }, "aria-label": "Retry connection", children: [
               /* @__PURE__ */ jsx9(motion5.span, { animate: isRetrying ? { rotate: 360 } : { rotate: 0 }, transition: isRetrying ? { duration: 0.8, repeat: Infinity, ease: "linear" } : { duration: 0.3 }, style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx9(RotateCw, { style: { width: 14, height: 14 } }) }),
-              isRetrying ? "Checking..." : "Retry connection"
+              isRetrying ? "Checking..." : retryCountdown ? `Retrying in ${retryCountdown}s...` : "Retry connection"
             ] }) }),
             voiceError !== "network_error" && /* @__PURE__ */ jsx9("div", { style: { padding: "0 16px 8px" }, children: /* @__PURE__ */ jsx9(VoiceErrorDisplay, { error: voiceError, onDismiss: dismissError }) }),
             /* @__PURE__ */ jsx9("div", { style: { padding: "0 16px 8px" }, children: /* @__PURE__ */ jsx9(VoiceToolCard, { result: toolResult, onDismiss: onToolDismiss, variant: "capsule" }) })
@@ -2344,28 +2353,70 @@ function WiredPanelInner({
   const autoStartedRef = useRef4(false);
   const pollTimerRef = useRef4(null);
   const cancelledRef = useRef4(false);
+  const [retryCountdown, setRetryCountdown] = useState5(null);
+  const backoffDelayRef = useRef4(RETRY_INITIAL_MS);
+  const countdownTimerRef = useRef4(null);
+  const dismissErrorRef = useRef4(dismissError);
+  useEffect6(() => {
+    dismissErrorRef.current = dismissError;
+  }, [dismissError]);
+  const autoListenRef = useRef4(settings.autoListen);
+  useEffect6(() => {
+    autoListenRef.current = settings.autoListen;
+  }, [settings.autoListen]);
+  const clearCountdown = useCallback3(() => {
+    if (countdownTimerRef.current) {
+      clearInterval(countdownTimerRef.current);
+      countdownTimerRef.current = null;
+    }
+    setRetryCountdown(null);
+  }, []);
+  const runHealthCheckRef = useRef4(() => {
+  });
+  const scheduleRetry = useCallback3((delayMs) => {
+    if (pollTimerRef.current) clearTimeout(pollTimerRef.current);
+    clearCountdown();
+    const seconds = Math.ceil(delayMs / 1e3);
+    setRetryCountdown(seconds);
+    let remaining = seconds;
+    countdownTimerRef.current = setInterval(() => {
+      remaining -= 1;
+      if (remaining <= 0) {
+        clearCountdown();
+        return;
+      }
+      setRetryCountdown(remaining);
+    }, 1e3);
+    pollTimerRef.current = setTimeout(() => runHealthCheckRef.current(), delayMs);
+    backoffDelayRef.current = Math.min(delayMs * 2, RETRY_MAX_MS);
+  }, [clearCountdown]);
   const runHealthCheck = useCallback3(() => {
+    clearCountdown();
     checkBackendHealth().then(({ available }) => {
       if (cancelledRef.current) return;
       setBackendDown(!available);
       if (available) {
-        dismissError();
-        if (!autoStartedRef.current && settings.autoListen) {
+        backoffDelayRef.current = RETRY_INITIAL_MS;
+        dismissErrorRef.current();
+        if (!autoStartedRef.current && autoListenRef.current) {
           autoStartedRef.current = true;
           startRef.current();
         }
       } else {
-        if (pollTimerRef.current) clearTimeout(pollTimerRef.current);
-        pollTimerRef.current = setTimeout(runHealthCheck, RECOVERY_POLL_MS);
+        scheduleRetry(backoffDelayRef.current);
       }
     });
-  }, [dismissError, settings.autoListen]);
+  }, [scheduleRetry, clearCountdown]);
+  useEffect6(() => {
+    runHealthCheckRef.current = runHealthCheck;
+  }, [runHealthCheck]);
   useEffect6(() => {
     cancelledRef.current = false;
     runHealthCheck();
     return () => {
       cancelledRef.current = true;
       if (pollTimerRef.current) clearTimeout(pollTimerRef.current);
+      if (countdownTimerRef.current) clearInterval(countdownTimerRef.current);
     };
   }, [runHealthCheck]);
   const onStateChangeRef = useRef4(onStateChange);
@@ -2443,23 +2494,23 @@ function WiredPanelInner({
   const handleRetryClick = useCallback3(() => {
     if (isRetrying) return;
     setIsRetrying(true);
+    backoffDelayRef.current = RETRY_INITIAL_MS;
+    clearCountdown();
     checkBackendHealth().then(({ available }) => {
       if (cancelledRef.current) return;
       setIsRetrying(false);
       setBackendDown(!available);
       if (available) {
-        dismissError();
-        if (!autoStartedRef.current && settings.autoListen) {
+        dismissErrorRef.current();
+        if (!autoStartedRef.current && autoListenRef.current) {
           autoStartedRef.current = true;
           startRef.current();
         }
-      }
-      if (!available) {
-        if (pollTimerRef.current) clearTimeout(pollTimerRef.current);
-        pollTimerRef.current = setTimeout(runHealthCheck, RECOVERY_POLL_MS);
+      } else {
+        scheduleRetry(backoffDelayRef.current);
       }
     }).catch(() => setIsRetrying(false));
-  }, [isRetrying, runHealthCheck, dismissError, settings.autoListen]);
+  }, [isRetrying, clearCountdown, scheduleRetry]);
   const onExpandRef = useRef4(onExpand);
   useEffect6(() => {
     onExpandRef.current = onExpand;
@@ -2476,10 +2527,10 @@ function WiredPanelInner({
   const [showSettings, setShowSettings] = useState5(false);
   const toggleSettings = useCallback3(() => setShowSettings((p) => !p), []);
   if (panelState === "collapsed") {
-    return /* @__PURE__ */ jsx9(CollapsedBar, { orbState, getAmplitude, analyser, voiceState: state, onExpand, onClose, onRetry: handleRetryClick, isRetrying, voiceError: effectiveError, micPaused, onMicToggle: handleMicToggle, ttsEnabled: settings.ttsEnabled, copilotName: config.copilotName, portraitSrc: resolvedPortrait });
+    return /* @__PURE__ */ jsx9(CollapsedBar, { orbState, getAmplitude, analyser, voiceState: state, onExpand, onClose, onRetry: handleRetryClick, isRetrying, retryCountdown, voiceError: effectiveError, micPaused, onMicToggle: handleMicToggle, ttsEnabled: settings.ttsEnabled, copilotName: config.copilotName, portraitSrc: resolvedPortrait });
   }
   return /* @__PURE__ */ jsxs8("div", { className: "relative h-full", children: [
-    /* @__PURE__ */ jsx9(ExpandedContent, { orbState, getAmplitude, analyser, voiceState: state, messages, isTyping, toolResult, voiceError: effectiveError, dismissError, onCollapse, onClose, onTextSubmit: handleTextSubmit, onMicToggle: handleMicToggle, micPaused, onToolDismiss: () => setToolResult(null), onInteraction: bumpActivity, onRetry: handleRetryClick, isRetrying, lastTimings, showPipelineMetrics: settings.showPipelineMetrics, pipelineMetricsAutoHideMs: settings.pipelineMetricsAutoHideMs, showSettings, onSettingsToggle: toggleSettings, ttsEnabled: settings.ttsEnabled, copilotName: config.copilotName, portraitSrc: resolvedPortrait, onStartMic: handleMicToggle, onSwitchToKeyboard: handleSwitchToKeyboard, switchToTextRef }),
+    /* @__PURE__ */ jsx9(ExpandedContent, { orbState, getAmplitude, analyser, voiceState: state, messages, isTyping, toolResult, voiceError: effectiveError, dismissError, onCollapse, onClose, onTextSubmit: handleTextSubmit, onMicToggle: handleMicToggle, micPaused, onToolDismiss: () => setToolResult(null), onInteraction: bumpActivity, onRetry: handleRetryClick, isRetrying, retryCountdown, lastTimings, showPipelineMetrics: settings.showPipelineMetrics, pipelineMetricsAutoHideMs: settings.pipelineMetricsAutoHideMs, showSettings, onSettingsToggle: toggleSettings, ttsEnabled: settings.ttsEnabled, copilotName: config.copilotName, portraitSrc: resolvedPortrait, onStartMic: handleMicToggle, onSwitchToKeyboard: handleSwitchToKeyboard, switchToTextRef }),
     /* @__PURE__ */ jsx9(AnimatePresence5, { children: showSettings && /* @__PURE__ */ jsx9(Suspense, { fallback: null, children: /* @__PURE__ */ jsx9(VoiceSettingsView2, { onBack: toggleSettings, onVolumeChange: applyVolume }) }) })
   ] });
 }
@@ -2506,6 +2557,22 @@ function GlassCopilotPanel({ isOpen: isOpenProp, onOpen: onOpenProp, onClose: on
   const handleExpand = useCallback3(() => {
     setInternalState("expanded");
   }, []);
+  const [fabOffline, setFabOffline] = useState5(false);
+  useEffect6(() => {
+    if (isOpen) return;
+    let cancelled = false;
+    const check = () => {
+      checkBackendHealth().then(({ available }) => {
+        if (!cancelled) setFabOffline(!available);
+      });
+    };
+    check();
+    const timer = setInterval(check, RECOVERY_POLL_MS);
+    return () => {
+      cancelled = true;
+      clearInterval(timer);
+    };
+  }, [isOpen]);
   const isVisible = panelState !== "hidden";
   const isExpanded = panelState === "expanded";
   const targetHeight = isExpanded ? PANEL_EXPANDED_HEIGHT : PANEL_COLLAPSED_HEIGHT;
@@ -2537,7 +2604,7 @@ function GlassCopilotPanel({ isOpen: isOpenProp, onOpen: onOpenProp, onClose: on
       ] }) }) }),
       /* @__PURE__ */ jsx9("span", { "aria-live": "polite", "aria-atomic": "true", style: { position: "absolute", width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap", borderWidth: 0 }, children: ariaAnnouncement }),
       /* @__PURE__ */ jsxs8(AnimatePresence5, { children: [
-        !isVisible && /* @__PURE__ */ jsx9(motion5.div, { ref: fabRef, initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: "fixed", style: { bottom: PANEL_BOTTOM, right: PANEL_RIGHT, zIndex: PANEL_Z_INDEX }, children: /* @__PURE__ */ jsx9(CopilotFAB, { onClick: handleOpen, portraitSrc: resolvedPortrait }) }, "copilot-fab"),
+        !isVisible && /* @__PURE__ */ jsx9(motion5.div, { ref: fabRef, initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: "fixed", style: { bottom: PANEL_BOTTOM, right: PANEL_RIGHT, zIndex: PANEL_Z_INDEX }, children: /* @__PURE__ */ jsx9(CopilotFAB, { onClick: handleOpen, portraitSrc: resolvedPortrait, isOffline: fabOffline }) }, "copilot-fab"),
         isVisible && /* @__PURE__ */ jsxs8(
           motion5.div,
           {