@unctad-ai/voice-agent-ui 5.2.3 → 5.2.5

package/dist/index.js

@@ -8,7 +8,7 @@ import {
   VoiceSettingsProvider,
   VoiceSettingsView,
   useVoiceSettings
-} from "./chunk-LDKQCDOW.js";
+} from "./chunk-RZHUDZVZ.js";
 
 // src/VoiceAgentProvider.tsx
 import { SiteConfigProvider } from "@unctad-ai/voice-agent-core";
@@ -33,7 +33,7 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { motion as motion5, AnimatePresence as AnimatePresence5, useReducedMotion as useReducedMotion2 } from "motion/react";
-import { ChevronDown as ChevronDown2, X, Mic as Mic3, ArrowUp, Keyboard as Keyboard2, RotateCw, Settings, VolumeX as VolumeX2, Flag as Flag2 } from "lucide-react";
+import { ChevronDown as ChevronDown2, X, Mic as Mic3, MicOff as MicOff2, ArrowUp, Keyboard as Keyboard2, RotateCw, Settings, VolumeX as VolumeX2, Flag as Flag2 } from "lucide-react";
 import {
   useVoiceAgent,
   voiceStateToOrbState,
@@ -1764,15 +1764,15 @@ function PipelineMetricsBar({
 
 // src/components/GlassCopilotPanel.tsx
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var VoiceSettingsView2 = lazy(() => import("./VoiceSettingsView-6SD47AUN.js"));
+var VoiceSettingsView2 = lazy(() => import("./VoiceSettingsView-6QTJRFZ6.js"));
 var RETRY_INITIAL_MS = 3e3;
 var RETRY_MAX_MS = 3e4;
 var STATE_LABELS = {
   IDLE: "Tap mic to speak",
-  LISTENING: "Listening...",
-  USER_SPEAKING: "Listening...",
-  PROCESSING: "Processing...",
-  AI_SPEAKING: "Speaking..."
+  LISTENING: "I'm listening...",
+  USER_SPEAKING: "I'm listening...",
+  PROCESSING: "Thinking...",
+  AI_SPEAKING: "Responding..."
 };
 var ARIA_LIVE_LABELS = {
   idle: "",
@@ -2123,35 +2123,33 @@ function CollapsedBar({
             }
           )
         ] }),
-        !isOffline && onMicToggle && /* @__PURE__ */ jsxs8(
-          "button",
-          {
-            onClick: (e) => {
-              e.stopPropagation();
-              onMicToggle();
-            },
-            className: "shrink-0 rounded-full flex items-center justify-center transition-all cursor-pointer relative",
-            style: {
-              width: 44,
-              height: 44,
-              backgroundColor: voiceState === "LISTENING" || voiceState === "USER_SPEAKING" ? colors.primary : "rgba(0,0,0,0.06)",
-              color: voiceState === "LISTENING" || voiceState === "USER_SPEAKING" ? "white" : "rgba(0,0,0,0.45)"
-            },
-            "aria-label": voiceState === "LISTENING" || voiceState === "USER_SPEAKING" ? "Stop listening" : "Start listening",
-            children: [
-              (voiceState === "LISTENING" || voiceState === "USER_SPEAKING") && /* @__PURE__ */ jsx9(
-                motion5.span,
-                {
-                  className: "absolute inset-0 rounded-full",
-                  animate: { scale: [1, 1.3, 1], opacity: [0.3, 0, 0.3] },
-                  transition: { duration: 1.8, repeat: Infinity, ease: "easeInOut" },
-                  style: { backgroundColor: `${colors.primary}40` }
-                }
-              ),
-              /* @__PURE__ */ jsx9(Mic3, { style: { width: 16, height: 16, position: "relative", zIndex: 1 } })
-            ]
-          }
-        ),
+        !isOffline && onMicToggle && (() => {
+          const barListening = voiceState === "LISTENING" || voiceState === "USER_SPEAKING";
+          return /* @__PURE__ */ jsx9(
+            motion5.button,
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onMicToggle();
+              },
+              whileHover: { scale: 1.08 },
+              whileTap: { scale: 0.93 },
+              animate: barListening ? { backgroundColor: [colors.primary, `${colors.primary}BB`, colors.primary] } : { backgroundColor: "rgba(0,0,0,0.06)" },
+              transition: barListening ? { backgroundColor: { duration: 1.8, repeat: Infinity, ease: "easeInOut" } } : { duration: 0.3 },
+              className: "shrink-0 rounded-full flex items-center justify-center cursor-pointer relative",
+              style: {
+                width: 44,
+                height: 44,
+                color: barListening ? "white" : "rgba(0,0,0,0.45)",
+                border: "none",
+                padding: 0,
+                boxShadow: barListening ? `0 2px 8px ${colors.primary}40, 0 1px 3px rgba(0,0,0,0.12)` : "0 1px 4px rgba(0,0,0,0.10)"
+              },
+              "aria-label": barListening ? "Stop listening" : "Start listening",
+              children: barListening ? /* @__PURE__ */ jsx9(Mic3, { style: { width: 16, height: 16, position: "relative", zIndex: 1 } }) : /* @__PURE__ */ jsx9(MicOff2, { style: { width: 16, height: 16, position: "relative", zIndex: 1 } })
+            }
+          );
+        })(),
         isOffline && /* @__PURE__ */ jsx9(
           "span",
           {
@@ -2172,8 +2170,8 @@ function CollapsedBar({
             },
             className: "shrink-0 rounded-full flex items-center justify-center transition-colors cursor-pointer",
             style: {
-              width: 44,
-              height: 44,
+              width: 32,
+              height: 32,
               color: "rgba(0,0,0,0.4)"
             },
             onMouseEnter: (e) => {
@@ -2183,7 +2181,7 @@ function CollapsedBar({
               e.currentTarget.style.color = "rgba(0,0,0,0.4)";
             },
             "aria-label": "Close voice assistant",
-            children: /* @__PURE__ */ jsx9(X, { style: { width: 18, height: 18 } })
+            children: /* @__PURE__ */ jsx9(X, { style: { width: 14, height: 14 } })
           }
         )
       ]
@@ -2288,7 +2286,7 @@ function ComposerBar({
                 },
                 "aria-label": isListening ? "Stop listening" : "Start listening",
                 "data-testid": "voice-agent-mic",
-                children: /* @__PURE__ */ jsx9(Mic3, { style: { width: 18, height: 18, position: "relative", zIndex: 1 } })
+                children: isListening ? /* @__PURE__ */ jsx9(Mic3, { style: { width: 18, height: 18, position: "relative", zIndex: 1 } }) : /* @__PURE__ */ jsx9(MicOff2, { style: { width: 18, height: 18, position: "relative", zIndex: 1 } })
               }
             ),
             /* @__PURE__ */ jsx9("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx9(AnimatePresence5, { mode: "wait", children: /* @__PURE__ */ jsx9(
@@ -2304,29 +2302,36 @@ function ComposerBar({
                   fontWeight: 400,
                   color: micPaused ? "rgba(0,0,0,0.35)" : voiceState === "LISTENING" || voiceState === "USER_SPEAKING" ? colors.primary : "rgba(0,0,0,0.45)"
                 },
-                children: micPaused ? "Paused" : STATE_LABELS[voiceState]
+                children: micPaused ? "Tap mic to resume" : STATE_LABELS[voiceState]
               },
               micPaused ? "paused" : voiceState
             ) }) }),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsxs8(
               motion5.button,
               {
-                whileHover: { scale: 1.08 },
-                whileTap: { scale: 0.92 },
+                whileHover: { scale: 1.04 },
+                whileTap: { scale: 0.96 },
                 onClick: () => {
                   if (isListening) onMicToggle();
                   setMode("text");
                 },
-                className: "shrink-0 rounded-full flex items-center justify-center cursor-pointer",
+                className: "shrink-0 flex items-center gap-1.5 cursor-pointer",
                 style: {
-                  width: 44,
-                  height: 44,
+                  height: 36,
+                  padding: "0 12px",
+                  borderRadius: 18,
                   backgroundColor: "rgba(0,0,0,0.05)",
-                  color: "rgba(0,0,0,0.4)"
+                  color: "rgba(0,0,0,0.4)",
+                  border: "none",
+                  fontSize: 12,
+                  fontWeight: 500
                 },
                 "aria-label": "Type a message",
                 "data-testid": "voice-agent-keyboard",
-                children: /* @__PURE__ */ jsx9(Keyboard2, { style: { width: 18, height: 18 } })
+                children: [
+                  /* @__PURE__ */ jsx9(Keyboard2, { style: { width: 14, height: 14 } }),
+                  /* @__PURE__ */ jsx9("span", { children: "Type" })
+                ]
               }
             )
           ]
@@ -2369,8 +2374,8 @@ function ComposerBar({
                     onFocus: (e) => {
                       const pill = e.currentTarget.parentElement;
                       if (pill) {
-                        pill.style.borderColor = `${colors.primary}4D`;
-                        pill.style.boxShadow = `0 0 0 2px ${colors.primary}14`;
+                        pill.style.borderColor = "rgba(0,0,0,0.15)";
+                        pill.style.boxShadow = "0 0 0 2px rgba(0,0,0,0.04)";
                       }
                     },
                     onBlur: (e) => {
@@ -2380,7 +2385,7 @@ function ComposerBar({
                         pill.style.boxShadow = "none";
                       }
                     },
-                    placeholder: disabled ? "Reconnecting..." : "Ask about services...",
+                    placeholder: disabled ? "Reconnecting..." : "Message...",
                     "aria-label": "Type your question",
                     "data-testid": "voice-agent-input",
                     className: "w-full",
@@ -2577,7 +2582,7 @@ function ExpandedContent({
           "div",
           {
             className: "flex items-center gap-3 shrink-0",
-            style: { height: 64, padding: "12px 16px", borderBottom: "1px solid rgba(0,0,0,0.06)" },
+            style: { height: 64, padding: "12px 16px", borderBottom: "1px solid rgba(0,0,0,0.06)", backgroundColor: `${colors.primary}08` },
             children: [
               /* @__PURE__ */ jsxs8(
                 motion5.div,
@@ -2614,7 +2619,7 @@ function ExpandedContent({
                     e.stopPropagation();
                     onRetry();
                   }, className: "inline-flex items-center justify-center rounded-full transition-colors cursor-pointer", style: { width: 18, height: 18, color: "rgba(220,38,38,0.5)" }, "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: 12, height: 12 } }) }) })
-                ] }) : micPaused ? "Paused" : STATE_LABELS[voiceState] })
+                ] }) : micPaused ? "Tap mic to resume" : STATE_LABELS[voiceState] })
               ] }),
               /* @__PURE__ */ jsx9(
                 "button",
@@ -2623,20 +2628,20 @@ function ExpandedContent({
                   className: "shrink-0 rounded-full transition-colors cursor-pointer",
                   style: {
                     color: showSettings ? colors.primary : "rgba(0,0,0,0.4)",
-                    width: 44,
-                    height: 44,
+                    width: 32,
+                    height: 32,
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
-                    backgroundColor: showSettings ? `${colors.primary}14` : "rgba(0,0,0,0.05)"
+                    backgroundColor: showSettings ? `${colors.primary}14` : "transparent"
                   },
                   "aria-label": showSettings ? "Close settings" : "Open settings",
                   "data-testid": "voice-agent-settings",
-                  children: /* @__PURE__ */ jsx9(Settings, { style: { width: 16, height: 16 } })
+                  children: /* @__PURE__ */ jsx9(Settings, { style: { width: 14, height: 14 } })
                 }
               ),
-              /* @__PURE__ */ jsx9("button", { onClick: onCollapse, className: "shrink-0 rounded-full transition-colors cursor-pointer", style: { color: "rgba(0,0,0,0.4)", width: 44, height: 44, display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: "rgba(0,0,0,0.05)" }, "aria-label": "Minimize panel", "data-testid": "voice-agent-minimize", children: /* @__PURE__ */ jsx9(ChevronDown2, { style: { width: 16, height: 16 } }) }),
-              /* @__PURE__ */ jsx9("button", { onClick: onClose, className: "shrink-0 rounded-full transition-colors cursor-pointer", style: { color: "rgba(0,0,0,0.4)", width: 44, height: 44, display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: "rgba(0,0,0,0.05)" }, "aria-label": "Close voice assistant", "data-testid": "voice-agent-close", children: /* @__PURE__ */ jsx9(X, { style: { width: 16, height: 16 } }) })
+              /* @__PURE__ */ jsx9("button", { onClick: onCollapse, className: "shrink-0 rounded-full transition-colors cursor-pointer", style: { color: "rgba(0,0,0,0.4)", width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: "transparent" }, "aria-label": "Minimize panel", "data-testid": "voice-agent-minimize", children: /* @__PURE__ */ jsx9(ChevronDown2, { style: { width: 14, height: 14 } }) }),
+              /* @__PURE__ */ jsx9("button", { onClick: onClose, className: "shrink-0 rounded-full transition-colors cursor-pointer", style: { color: "rgba(0,0,0,0.4)", width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: "transparent" }, "aria-label": "Close voice assistant", "data-testid": "voice-agent-close", children: /* @__PURE__ */ jsx9(X, { style: { width: 14, height: 14 } }) })
             ]
           }
         ),
@@ -2905,7 +2910,7 @@ function WiredPanelInner({
           timings: lastTimings ?? void 0,
           route: window.location.pathname,
           copilotName: config.copilotName,
-          kitVersion: "5.2.3"
+          kitVersion: "5.2.5"
         })
       });
       const body = await res.json().catch(() => ({ ticketId: void 0 }));
@@ -2988,7 +2993,6 @@ function GlassCopilotPanel({ isOpen: isOpenProp, onOpen: onOpenProp, onClose: on
       clearInterval(timer);
     };
   }, [config.excludeRoutes]);
-  if (routeHidden) return null;
   const [internalOpen, setInternalOpen] = useState5(false);
   const isControlled = isOpenProp !== void 0;
   const isOpen = isControlled ? isOpenProp : internalOpen;
@@ -3010,7 +3014,7 @@ function GlassCopilotPanel({ isOpen: isOpenProp, onOpen: onOpenProp, onClose: on
   }, []);
   const [fabOffline, setFabOffline] = useState5(false);
   useEffect6(() => {
-    if (isOpen) return;
+    if (isOpen || routeHidden) return;
     let cancelled = false;
     const check = () => {
       checkBackendHealth().then(({ available }) => {
@@ -3023,7 +3027,7 @@ function GlassCopilotPanel({ isOpen: isOpenProp, onOpen: onOpenProp, onClose: on
       cancelled = true;
       clearInterval(timer);
     };
-  }, [isOpen]);
+  }, [isOpen, routeHidden]);
   const isVisible = panelState !== "hidden";
   const isExpanded = panelState === "expanded";
   const targetHeight = isExpanded ? PANEL_EXPANDED_HEIGHT : PANEL_COLLAPSED_HEIGHT;
@@ -3046,6 +3050,7 @@ function GlassCopilotPanel({ isOpen: isOpenProp, onOpen: onOpenProp, onClose: on
     setAriaAnnouncement(ARIA_LIVE_LABELS[orbState]);
     onStateChange?.(orbState);
   }, [onStateChange]);
+  if (routeHidden) return null;
   return createPortal(
     /* @__PURE__ */ jsxs8(VoiceErrorBoundary, { onReset: handleClose, children: [
       /* @__PURE__ */ jsx9("svg", { xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0", style: { position: "absolute", overflow: "hidden" }, "aria-hidden": "true", children: /* @__PURE__ */ jsx9("defs", { children: /* @__PURE__ */ jsxs8("filter", { id: "liquid-glass-panel", x: "0%", y: "0%", width: "100%", height: "100%", children: [