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

package/dist/{VoiceSettingsView-6SD47AUN.js → VoiceSettingsView-6LREXUTF.js}

@@ -5,7 +5,7 @@ import {
   SliderSetting,
   ToggleSetting,
   VoiceSettingsView
-} from "./chunk-LDKQCDOW.js";
+} from "./chunk-XOTIV6ND.js";
 export {
   Divider,
   SelectSetting,
@@ -14,4 +14,4 @@ export {
   ToggleSetting,
   VoiceSettingsView as default
 };
-//# sourceMappingURL=VoiceSettingsView-6SD47AUN.js.map
+//# sourceMappingURL=VoiceSettingsView-6LREXUTF.js.map

package/dist/{chunk-LDKQCDOW.js → chunk-XOTIV6ND.js}

@@ -1902,7 +1902,7 @@ function VoiceSettingsView({ onBack, onVolumeChange }) {
           ) : /* @__PURE__ */ jsx3("span", {}),
           /* @__PURE__ */ jsxs2("span", { children: [
             "Kit v",
-            /* @__PURE__ */ jsx3("span", { style: { fontWeight: 500, color: "#6b7280" }, children: "5.2.3" })
+            /* @__PURE__ */ jsx3("span", { style: { fontWeight: 500, color: "#6b7280" }, children: "5.2.4" })
           ] })
         ] }) })
       ]
@@ -1994,4 +1994,4 @@ export {
   SettingsSection,
   Divider
 };
-//# sourceMappingURL=chunk-LDKQCDOW.js.map
+//# sourceMappingURL=chunk-XOTIV6ND.js.map

package/dist/index.js

@@ -8,7 +8,7 @@ import {
   VoiceSettingsProvider,
   VoiceSettingsView,
   useVoiceSettings
-} from "./chunk-LDKQCDOW.js";
+} from "./chunk-XOTIV6ND.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-6LREXUTF.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(
@@ -2623,20 +2621,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 +2903,7 @@ function WiredPanelInner({
           timings: lastTimings ?? void 0,
           route: window.location.pathname,
           copilotName: config.copilotName,
-          kitVersion: "5.2.3"
+          kitVersion: "5.2.4"
         })
       });
       const body = await res.json().catch(() => ({ ticketId: void 0 }));