@unctad-ai/voice-agent-ui 1.0.0 → 1.0.1

package/dist/index.js

@@ -1,8 +1,14 @@
 import {
+  Divider,
+  PersonaSettings,
+  SelectSetting,
+  SettingsSection,
+  SliderSetting,
+  ToggleSetting,
   VoiceSettingsProvider,
   VoiceSettingsView,
   useVoiceSettings
-} from "./chunk-IYKRYBBO.js";
+} from "./chunk-BFDEQ5XG.js";
 
 // src/VoiceAgentProvider.tsx
 import { SiteConfigProvider } from "@unctad-ai/voice-agent-core";
@@ -27,7 +33,7 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { motion as motion5, AnimatePresence as AnimatePresence5 } from "motion/react";
-import { ChevronDown as ChevronDown2, X, Mic as Mic2, ArrowUp, Keyboard, RotateCw, Settings, VolumeX as VolumeX2 } from "lucide-react";
+import { ChevronDown as ChevronDown2, X, Mic as Mic3, ArrowUp, Keyboard as Keyboard2, RotateCw, Settings, VolumeX as VolumeX2 } from "lucide-react";
 import {
   useVoiceAgent,
   voiceStateToOrbState,
@@ -657,7 +663,7 @@ import {
   DEFAULT_FONT_FAMILY,
   useSiteConfig as useSiteConfig3
 } from "@unctad-ai/voice-agent-core";
-import { ArrowRight, PenLine, MousePointerClick, Search, Info, ChevronDown } from "lucide-react";
+import { ArrowRight, PenLine, MousePointerClick, Search, Info, ChevronDown, Mic, Keyboard } from "lucide-react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function cleanForDisplay(text) {
   return text.replace(/\[(laugh|chuckle|sigh|gasp|cough|clear throat|sniff|groan|shush)\]/gi, "").replace(/\*\*(.*?)\*\*/g, "$1").replace(/^\s*\*\s+/gm, "- ").replace(/\*(.*?)\*/g, "$1").replace(/`([^`]+)`/g, "$1").replace(/^#{1,6}\s+/gm, "").replace(/<br\s*\/?>/gi, "\n").replace(/<[^>]+>/g, "").replace(/\|[-:\s|]+\|/g, "").replace(/\|/g, "\n").replace(/\p{Emoji_Presentation}|\p{Extended_Pictographic}/gu, "").replace(/[ \t]{3,}/g, "  ").replace(/\n{3,}/g, "\n\n").replace(/^[\s-]{3,}$/gm, "").trim();
@@ -830,10 +836,14 @@ function VoiceTranscript({
   messages,
   isTyping,
   variant = "overlay",
-  voiceError
+  voiceError,
+  voiceState,
+  onStartMic,
+  onSwitchToKeyboard
 }) {
   const config = useSiteConfig3();
   const fontFamily = config.fontFamily ?? DEFAULT_FONT_FAMILY;
+  const assistantLabel = config.copilotName || "Assistant";
   const containerRef = useRef3(null);
   const isPanel = variant === "panel";
   const maxVisible = isPanel ? PANEL_MAX_VISIBLE_MESSAGES : MAX_VISIBLE_MESSAGES;
@@ -891,18 +901,21 @@ function VoiceTranscript({
     }
   };
   if (isPanel) {
-    return /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-h-0 relative", style: { fontFamily }, children: [
+    return /* @__PURE__ */ jsxs3("div", { style: { flex: 1, minHeight: 0, position: "relative", fontFamily }, children: [
       /* @__PURE__ */ jsx4(
         "div",
         {
           ref: containerRef,
-          className: "absolute inset-0 overflow-y-auto overscroll-contain",
           style: {
+            position: "absolute",
+            inset: 0,
+            overflowY: "auto",
+            overscrollBehavior: "contain",
             padding: "16px 16px 12px",
             maskImage: "linear-gradient(to bottom, transparent 0%, black 8px, black calc(100% - 8px), transparent 100%)",
             WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 8px, black calc(100% - 8px), transparent 100%)"
           },
-          children: /* @__PURE__ */ jsxs3("div", { ref: contentRef, className: "flex flex-col", style: { paddingBottom: "24px" }, children: [
+          children: /* @__PURE__ */ jsxs3("div", { ref: contentRef, style: { display: "flex", flexDirection: "column", paddingBottom: 24 }, children: [
             /* @__PURE__ */ jsx4(AnimatePresence, { mode: "popLayout", children: groupDisplayItems(visible).map((item, idx, arr) => {
               if (item.type === "action") {
                 const prevIsAction = idx > 0 && arr[idx - 1].type === "action";
@@ -932,7 +945,7 @@ function VoiceTranscript({
                             color: "rgba(0,0,0,0.35)",
                             marginBottom: "4px"
                           },
-                          children: "Copilot"
+                          children: assistantLabel
                         }
                       ),
                       /* @__PURE__ */ jsx4(ActionBadge, { msg: item.msg, count: item.count })
@@ -971,7 +984,7 @@ function VoiceTranscript({
                           color: isAI ? "rgba(0,0,0,0.35)" : "rgba(219,33,41,0.5)",
                           marginBottom: "4px"
                         },
-                        children: isAI ? "Copilot" : "You"
+                        children: isAI ? assistantLabel : "You"
                       }
                     ),
                     /* @__PURE__ */ jsx4(
@@ -1086,17 +1099,7 @@ function VoiceTranscript({
                   )
                 ]
               }
-            ) : /* @__PURE__ */ jsx4(
-              motion.p,
-              {
-                initial: { opacity: 0, y: 4 },
-                animate: { opacity: 1, y: 0 },
-                transition: { duration: 0.4, delay: 0.2 },
-                className: "text-center italic",
-                style: { fontSize: "14px", color: "rgba(0,0,0,0.4)", paddingTop: "60px" },
-                children: "Ask me anything"
-              }
-            )),
+            ) : /* @__PURE__ */ jsx4("div", { style: { paddingTop: 40 }, children: /* @__PURE__ */ jsx4(EmptyStateGraphic, { primaryColor: config.colors.primary }) })),
             isTyping && visible.length === 0 && /* @__PURE__ */ jsx4(
               motion.p,
               {
@@ -1213,14 +1216,12 @@ function VoiceTranscript({
             );
           }) }),
           visible.length === 0 && !isTyping && /* @__PURE__ */ jsx4(
-            motion.p,
+            EmptyStateGraphic,
             {
-              initial: { opacity: 0, y: 8 },
-              animate: { opacity: 1, y: 0 },
-              transition: { duration: 0.5, delay: 0.3 },
-              className: "text-lg italic",
-              style: { color: "rgba(0,0,0,0.5)" },
-              children: "Ask me anything"
+              primaryColor: config.colors.primary,
+              voiceState,
+              onStartMic,
+              onSwitchToKeyboard
             }
           ),
           isTyping && visible.length === 0 && /* @__PURE__ */ jsx4(
@@ -1237,6 +1238,114 @@ function VoiceTranscript({
     }
   );
 }
+function EmptyStateGraphic({ primaryColor, voiceState, onStartMic, onSwitchToKeyboard }) {
+  const isListening = voiceState === "LISTENING" || voiceState === "USER_SPEAKING";
+  if (isListening) {
+    return /* @__PURE__ */ jsxs3(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        transition: { duration: 0.3 },
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 6,
+          paddingTop: 60
+        },
+        children: [
+          /* @__PURE__ */ jsx4("p", { style: { fontSize: 16, fontWeight: 500, color: primaryColor, margin: 0, opacity: 0.7 }, children: "Listening..." }),
+          /* @__PURE__ */ jsx4("p", { style: { fontSize: 12, color: "rgba(0,0,0,0.3)", margin: 0 }, children: "Go ahead, I can hear you" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 6 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.5, delay: 0.15 },
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 16,
+        paddingTop: 60
+      },
+      children: [
+        /* @__PURE__ */ jsx4("p", { style: { fontSize: 18, fontWeight: 500, color: primaryColor, margin: 0, opacity: 0.6 }, children: "How can I help?" }),
+        /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+          onStartMic && /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              onClick: onStartMic,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "8px 16px",
+                borderRadius: 20,
+                border: `1px solid ${primaryColor}22`,
+                backgroundColor: `${primaryColor}08`,
+                cursor: "pointer",
+                fontFamily: "inherit",
+                fontSize: 13,
+                color: "rgba(0,0,0,0.5)",
+                transition: "background-color 0.15s, border-color 0.15s"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = `${primaryColor}14`;
+                e.currentTarget.style.borderColor = `${primaryColor}33`;
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = `${primaryColor}08`;
+                e.currentTarget.style.borderColor = `${primaryColor}22`;
+              },
+              children: [
+                /* @__PURE__ */ jsx4(Mic, { style: { width: 14, height: 14, color: primaryColor, opacity: 0.7 } }),
+                "Start talking"
+              ]
+            }
+          ),
+          onSwitchToKeyboard && /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              onClick: onSwitchToKeyboard,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "8px 16px",
+                borderRadius: 20,
+                border: "1px solid rgba(0,0,0,0.06)",
+                backgroundColor: "transparent",
+                cursor: "pointer",
+                fontFamily: "inherit",
+                fontSize: 13,
+                color: "rgba(0,0,0,0.35)",
+                transition: "background-color 0.15s"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = "rgba(0,0,0,0.03)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+              },
+              children: [
+                /* @__PURE__ */ jsx4(Keyboard, { style: { width: 14, height: 14, opacity: 0.5 } }),
+                "Type a message"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 
 // src/components/VoiceToolCard.tsx
 import { useEffect as useEffect4 } from "react";
@@ -1355,7 +1464,7 @@ var VoiceErrorBoundary = class extends Component {
 
 // src/components/VoiceErrorDisplay.tsx
 import { motion as motion3, AnimatePresence as AnimatePresence3 } from "motion/react";
-import { AlertTriangle as AlertTriangle2, Hourglass, Mic, MicOff, VolumeX, Wifi, WifiOff } from "lucide-react";
+import { AlertTriangle as AlertTriangle2, Hourglass, Mic as Mic2, MicOff, VolumeX, Wifi, WifiOff } from "lucide-react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var SEVERITY_STYLES = {
   error: {
@@ -1397,7 +1506,7 @@ var ERROR_CONFIG = {
     severity: "warning"
   },
   stt_failed: {
-    icon: Mic,
+    icon: Mic2,
     title: "Didn't catch that",
     severity: "info"
   },
@@ -1417,7 +1526,7 @@ var ERROR_CONFIG = {
     severity: "error"
   },
   speech_too_short: {
-    icon: Mic,
+    icon: Mic2,
     title: "Didn't catch that",
     severity: "info"
   },
@@ -1556,7 +1665,7 @@ function PipelineMetricsBar({
 
 // src/components/GlassCopilotPanel.tsx
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var VoiceSettingsView2 = lazy(() => import("./VoiceSettingsView-J4OIRJ23.js"));
+var VoiceSettingsView2 = lazy(() => import("./VoiceSettingsView-LVFUTFOG.js"));
 var STATE_LABELS = {
   IDLE: "Tap mic to speak",
   LISTENING: "Listening...",
@@ -1759,7 +1868,7 @@ function CollapsedBar({
                   style: { backgroundColor: `${colors.primary}40` }
                 }
               ),
-              /* @__PURE__ */ jsx9(Mic2, { style: { width: 16, height: 16, position: "relative", zIndex: 1 } })
+              /* @__PURE__ */ jsx9(Mic3, { style: { width: 16, height: 16, position: "relative", zIndex: 1 } })
             ]
           }
         ),
@@ -1807,12 +1916,16 @@ function ComposerBar({
   micPaused = false,
   onTextSubmit,
   onMicToggle,
-  disabled = false
+  disabled = false,
+  switchToTextRef
 }) {
   const { colors } = useSiteConfig4();
   const [mode, setMode] = useState5("voice");
   const [text, setText] = useState5("");
   const inputRef = useRef4(null);
+  useEffect6(() => {
+    if (switchToTextRef) switchToTextRef.current = () => setMode("text");
+  }, [switchToTextRef]);
   useEffect6(() => {
     if (mode === "text") {
       requestAnimationFrame(() => inputRef.current?.focus());
@@ -1852,7 +1965,7 @@ function ComposerBar({
                 color: "rgba(0,0,0,0.2)",
                 opacity: 0.5
               },
-              children: /* @__PURE__ */ jsx9(Mic2, { style: { width: 18, height: 18 } })
+              children: /* @__PURE__ */ jsx9(Mic3, { style: { width: 18, height: 18 } })
             }
           ),
           /* @__PURE__ */ jsx9(
@@ -1908,7 +2021,7 @@ function ComposerBar({
                       style: { backgroundColor: `${colors.primary}33`, filter: "blur(4px)" }
                     }
                   ),
-                  /* @__PURE__ */ jsx9(Mic2, { style: { width: 18, height: 18, position: "relative", zIndex: 1 } })
+                  /* @__PURE__ */ jsx9(Mic3, { style: { width: 18, height: 18, position: "relative", zIndex: 1 } })
                 ]
               }
             ),
@@ -1947,7 +2060,7 @@ function ComposerBar({
                 },
                 "aria-label": "Type a message",
                 "data-testid": "voice-agent-keyboard",
-                children: /* @__PURE__ */ jsx9(Keyboard, { style: { width: 18, height: 18 } })
+                children: /* @__PURE__ */ jsx9(Keyboard2, { style: { width: 18, height: 18 } })
               }
             )
           ]
@@ -2052,7 +2165,7 @@ function ComposerBar({
                 },
                 "aria-label": "Back to voice mode",
                 "data-testid": "voice-agent-voice-mode",
-                children: /* @__PURE__ */ jsx9(Mic2, { style: { width: 18, height: 18 } })
+                children: /* @__PURE__ */ jsx9(Mic3, { style: { width: 18, height: 18 } })
               }
             )
           ]
@@ -2088,7 +2201,10 @@ function ExpandedContent({
   onSettingsToggle,
   ttsEnabled = true,
   copilotName,
-  portraitSrc
+  portraitSrc,
+  onStartMic,
+  onSwitchToKeyboard,
+  switchToTextRef
 }) {
   const { colors } = useSiteConfig4();
   const isListening = voiceState === "LISTENING" || voiceState === "USER_SPEAKING";
@@ -2096,7 +2212,7 @@ function ExpandedContent({
   return /* @__PURE__ */ jsxs8(
     "div",
     {
-      className: "flex flex-col h-full overflow-hidden",
+      style: { display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" },
       onClick: onInteraction,
       onKeyDown: onInteraction,
       children: [
@@ -2172,9 +2288,9 @@ function ExpandedContent({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs8("div", { className: "flex-1 min-h-0 flex flex-col overflow-hidden", children: [
-          /* @__PURE__ */ jsx9("div", { "data-testid": "voice-agent-transcript", children: /* @__PURE__ */ jsx9(VoiceTranscript, { messages, isTyping, variant: "panel", voiceError }) }),
-          /* @__PURE__ */ jsxs8("div", { className: "shrink-0", children: [
+        /* @__PURE__ */ jsxs8("div", { style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
+          /* @__PURE__ */ jsx9("div", { "data-testid": "voice-agent-transcript", style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx9(VoiceTranscript, { messages, isTyping, variant: "panel", voiceError, voiceState, onStartMic, onSwitchToKeyboard }) }),
+          /* @__PURE__ */ jsxs8("div", { style: { flexShrink: 0 }, children: [
             /* @__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 } }) }),
@@ -2184,7 +2300,7 @@ function ExpandedContent({
             /* @__PURE__ */ jsx9("div", { style: { padding: "0 16px 8px" }, children: /* @__PURE__ */ jsx9(VoiceToolCard, { result: toolResult, onDismiss: onToolDismiss, variant: "capsule" }) })
           ] })
         ] }),
-        /* @__PURE__ */ jsx9(motion5.div, { initial: { opacity: 0, y: 12 }, animate: { opacity: 1, y: 0 }, transition: { ...SPRING_MICRO, delay: 0.2 }, className: "shrink-0", children: /* @__PURE__ */ jsx9(ComposerBar, { voiceState, isListening, micPaused, onTextSubmit, onMicToggle, disabled: voiceError === "network_error" }) })
+        /* @__PURE__ */ jsx9(motion5.div, { initial: { opacity: 0, y: 12 }, animate: { opacity: 1, y: 0 }, transition: { ...SPRING_MICRO, delay: 0.2 }, className: "shrink-0", children: /* @__PURE__ */ jsx9(ComposerBar, { voiceState, isListening, micPaused, onTextSubmit, onMicToggle, disabled: voiceError === "network_error", switchToTextRef }) })
       ]
     }
   );
@@ -2261,8 +2377,8 @@ function WiredPanelInner({
   const { settings: voiceSettings, volumeRef, speedRef } = useVoiceSettings();
   const { state, start, stop, messages, isLLMLoading, getAmplitude, analyser, sendTextMessage, voiceError, dismissError, sessionEnded, lastTimings, applyVolume, settings } = useVoiceAgent({ settings: voiceSettings, volumeRef, speedRef });
   useEffect6(() => {
-    if (sessionEnded) onClose();
-  }, [sessionEnded, onClose]);
+    if (sessionEnded) onCollapse();
+  }, [sessionEnded, onCollapse]);
   const [toolResult, setToolResult] = useState5(null);
   const orbState = voiceStateToOrbState(state);
   const [backendDown, setBackendDown] = useState5(false);
@@ -2385,13 +2501,26 @@ function WiredPanelInner({
       }
     }).catch(() => setIsRetrying(false));
   }, [isRetrying, runHealthCheck, dismissError, settings.autoListen]);
+  const onExpandRef = useRef4(onExpand);
+  useEffect6(() => {
+    onExpandRef.current = onExpand;
+  });
+  useEffect6(() => {
+    if (panelState === "collapsed" && messages.length > 0) {
+      onExpandRef.current();
+    }
+  }, [panelState, messages.length]);
+  const switchToTextRef = useRef4(null);
+  const handleSwitchToKeyboard = useCallback3(() => {
+    switchToTextRef.current?.();
+  }, []);
   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__ */ 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 }),
+    /* @__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(AnimatePresence5, { children: showSettings && /* @__PURE__ */ jsx9(Suspense, { fallback: null, children: /* @__PURE__ */ jsx9(VoiceSettingsView2, { onBack: toggleSettings, onVolumeChange: applyVolume }) }) })
   ] });
 }
@@ -2511,7 +2640,7 @@ function VoiceA11yAnnouncer({ isOpen, orbState }) {
 
 // src/components/VoiceCopilotFAB.tsx
 import { motion as motion6, AnimatePresence as AnimatePresence6, useReducedMotion as useReducedMotion2 } from "motion/react";
-import { Mic as Mic3 } from "lucide-react";
+import { Mic as Mic4 } from "lucide-react";
 import { useSiteConfig as useSiteConfig5 } from "@unctad-ai/voice-agent-core";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function VoiceCopilotFAB({
@@ -2542,7 +2671,7 @@ function VoiceCopilotFAB({
           className: "relative rounded-full p-3 shadow-lg text-white transition-all cursor-pointer",
           style: { backgroundColor: colors.primary },
           "aria-label": "Open voice assistant",
-          children: isActive ? /* @__PURE__ */ jsx11("span", { className: "h-3 w-3 rounded-full bg-white animate-pulse" }) : /* @__PURE__ */ jsx11(Mic3, { className: "w-6 h-6" })
+          children: isActive ? /* @__PURE__ */ jsx11("span", { className: "h-3 w-3 rounded-full bg-white animate-pulse" }) : /* @__PURE__ */ jsx11(Mic4, { className: "w-6 h-6" })
         }
       )
     },
@@ -2553,7 +2682,7 @@ function VoiceCopilotFAB({
 // src/components/VoiceControls.tsx
 import { useState as useState6, useRef as useRef6, useEffect as useEffect8 } from "react";
 import { motion as motion7, AnimatePresence as AnimatePresence7 } from "motion/react";
-import { Keyboard as Keyboard2, Send, X as X2 } from "lucide-react";
+import { Keyboard as Keyboard3, Send, X as X2 } from "lucide-react";
 import { useSiteConfig as useSiteConfig6 } from "@unctad-ai/voice-agent-core";
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var STATE_LABELS2 = {
@@ -2722,7 +2851,7 @@ function VoiceControls({ state, onTextSubmit, isListening }) {
                   "transition-all duration-200 cursor-pointer"
                 ),
                 "aria-label": "Type a message",
-                children: /* @__PURE__ */ jsx12(Keyboard2, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx12(Keyboard3, { className: "h-4 w-4" })
               }
             )
           ]
@@ -3364,8 +3493,14 @@ function VoiceOverlay({ isOpen, onClose, onStateChange }) {
 }
 export {
   AgentAvatar,
+  Divider,
   GlassCopilotPanel,
+  PersonaSettings,
   PipelineMetricsBar,
+  SelectSetting,
+  SettingsSection,
+  SliderSetting,
+  ToggleSetting,
   VoiceA11yAnnouncer,
   VoiceAgentProvider,
   VoiceControls,