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

package/dist/{VoiceSettingsView-6QTJRFZ6.js → VoiceSettingsView-JUZMLSHG.js}

@@ -5,7 +5,7 @@ import {
   SliderSetting,
   ToggleSetting,
   VoiceSettingsView
-} from "./chunk-RZHUDZVZ.js";
+} from "./chunk-SS2HS7NJ.js";
 export {
   Divider,
   SelectSetting,
@@ -14,4 +14,4 @@ export {
   ToggleSetting,
   VoiceSettingsView as default
 };
-//# sourceMappingURL=VoiceSettingsView-6QTJRFZ6.js.map
+//# sourceMappingURL=VoiceSettingsView-JUZMLSHG.js.map

package/dist/{chunk-RZHUDZVZ.js → chunk-SS2HS7NJ.js}

@@ -1903,7 +1903,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.5" })
+            /* @__PURE__ */ jsx3("span", { style: { fontWeight: 500, color: "#6b7280" }, children: "5.3.0" })
           ] })
         ] }) })
       ]
@@ -1995,4 +1995,4 @@ export {
   SettingsSection,
   Divider
 };
-//# sourceMappingURL=chunk-RZHUDZVZ.js.map
+//# sourceMappingURL=chunk-SS2HS7NJ.js.map

package/dist/index.d.ts

@@ -227,8 +227,12 @@ interface VoiceTranscriptProps {
     onReport?: (turnNumber: number, assistantMessage: string, userMessage?: string) => void;
     /** Map of turn numbers to ticket IDs for sent feedback */
     feedbackSentTurns?: Record<number, string>;
+    /** Callback to submit a text message (for suggested prompt chips) */
+    onTextSubmit?: (text: string) => void;
+    /** Portrait image URL for empty state avatar */
+    portraitSrc?: string;
 }
-declare function VoiceTranscript({ messages, isTyping, variant, voiceError, voiceState, onStartMic, onSwitchToKeyboard, onReport, feedbackSentTurns, }: VoiceTranscriptProps): react_jsx_runtime.JSX.Element;
+declare function VoiceTranscript({ messages, isTyping, variant, voiceError, voiceState, onStartMic, onSwitchToKeyboard, onReport, feedbackSentTurns, onTextSubmit, portraitSrc, }: VoiceTranscriptProps): react_jsx_runtime.JSX.Element;
 
 interface VoiceWaveformCanvasProps {
     analyserNode: AnalyserNode | null;

package/dist/index.js

@@ -8,7 +8,7 @@ import {
   VoiceSettingsProvider,
   VoiceSettingsView,
   useVoiceSettings
-} from "./chunk-RZHUDZVZ.js";
+} from "./chunk-SS2HS7NJ.js";
 
 // src/VoiceAgentProvider.tsx
 import { SiteConfigProvider } from "@unctad-ai/voice-agent-core";
@@ -665,7 +665,7 @@ import {
   DEFAULT_FONT_FAMILY,
   useSiteConfig as useSiteConfig3
 } from "@unctad-ai/voice-agent-core";
-import { ArrowRight, PenLine, MousePointerClick, Search, Info, ChevronDown, Mic, Keyboard, Flag, Copy, Check } from "lucide-react";
+import { ArrowRight, PenLine, MousePointerClick, Search, Info, ChevronDown, Mic, Flag, Copy, Check } from "lucide-react";
 import { Fragment, 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();
@@ -917,11 +917,14 @@ function VoiceTranscript({
   onStartMic,
   onSwitchToKeyboard,
   onReport,
-  feedbackSentTurns
+  feedbackSentTurns,
+  onTextSubmit,
+  portraitSrc
 }) {
   const config = useSiteConfig3();
   const fontFamily = config.fontFamily ?? DEFAULT_FONT_FAMILY;
   const assistantLabel = config.copilotName || "Assistant";
+  const { colors } = config;
   const containerRef = useRef3(null);
   const isPanel = variant === "panel";
   const maxVisible = isPanel ? PANEL_MAX_VISIBLE_MESSAGES : MAX_VISIBLE_MESSAGES;
@@ -1074,12 +1077,16 @@ function VoiceTranscript({
                       "div",
                       {
                         style: {
-                          ...isAI ? {} : {
-                            backgroundColor: "rgba(219,33,41,0.07)",
-                            border: "1px solid rgba(219,33,41,0.12)",
+                          ...isAI ? {
+                            backgroundColor: `${colors.primary}0D`,
+                            borderRadius: "14px 14px 14px 4px",
+                            padding: "10px 14px",
+                            maxWidth: "85%"
+                          } : {
+                            backgroundColor: "rgba(0,0,0,0.04)",
                             borderRadius: "14px 14px 4px 14px",
                             padding: "10px 14px",
-                            maxWidth: "88%"
+                            maxWidth: "85%"
                           }
                         },
                         children: isAI && isLast && isTyping ? /* @__PURE__ */ jsx4(
@@ -1198,7 +1205,7 @@ function VoiceTranscript({
                   )
                 ]
               }
-            ) : /* @__PURE__ */ jsx4("div", { style: { paddingTop: 40 }, children: /* @__PURE__ */ jsx4(EmptyStateGraphic, { primaryColor: config.colors.primary }) })),
+            ) : /* @__PURE__ */ jsx4("div", { style: { paddingTop: 40 }, children: /* @__PURE__ */ jsx4(EmptyStateGraphic, { primaryColor: config.colors.primary, onTextSubmit, portraitSrc }) })),
             isTyping && visible.length === 0 && /* @__PURE__ */ jsx4(
               motion.p,
               {
@@ -1320,7 +1327,9 @@ function VoiceTranscript({
               primaryColor: config.colors.primary,
               voiceState,
               onStartMic,
-              onSwitchToKeyboard
+              onSwitchToKeyboard,
+              onTextSubmit,
+              portraitSrc
             }
           ),
           isTyping && visible.length === 0 && /* @__PURE__ */ jsx4(
@@ -1337,8 +1346,12 @@ function VoiceTranscript({
     }
   );
 }
-function EmptyStateGraphic({ primaryColor, voiceState, onStartMic, onSwitchToKeyboard }) {
+function EmptyStateGraphic({ primaryColor, voiceState, onStartMic, onSwitchToKeyboard, onTextSubmit, portraitSrc }) {
+  const config = useSiteConfig3();
   const isListening = voiceState === "LISTENING" || voiceState === "USER_SPEAKING";
+  const greeting = config.greetingMessage || "How can I help you today?";
+  const prompts = config.suggestedPrompts ?? ["What services are available?", "Help me with an application"];
+  const sentRef = useRef3(false);
   if (isListening) {
     return /* @__PURE__ */ jsxs3(
       motion.div,
@@ -1355,7 +1368,7 @@ function EmptyStateGraphic({ primaryColor, voiceState, onStartMic, onSwitchToKey
           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: 16, fontWeight: 500, color: primaryColor, margin: 0, opacity: 0.7 }, children: "I'm listening..." }),
           /* @__PURE__ */ jsx4("p", { style: { fontSize: 12, color: "rgba(0,0,0,0.3)", margin: 0 }, children: "Go ahead, I can hear you" })
         ]
       }
@@ -1372,75 +1385,66 @@ function EmptyStateGraphic({ primaryColor, voiceState, onStartMic, onSwitchToKey
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
-        gap: 16,
-        paddingTop: 60
+        gap: 20,
+        paddingTop: 48
       },
       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"
-              ]
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsx4("p", { style: { fontSize: 17, fontWeight: 500, color: primaryColor, margin: 0, opacity: 0.6, textAlign: "center", lineHeight: 1.4 }, children: greeting }),
+        /* @__PURE__ */ jsx4("div", { style: { display: "flex", flexWrap: "wrap", gap: 8, justifyContent: "center", maxWidth: 320 }, children: prompts.map((prompt) => /* @__PURE__ */ jsx4(
+          "button",
+          {
+            onClick: () => {
+              if (sentRef.current) return;
+              sentRef.current = true;
+              onTextSubmit?.(prompt);
+            },
+            style: {
+              padding: "8px 16px",
+              borderRadius: 18,
+              border: "1px solid rgba(0,0,0,0.1)",
+              backgroundColor: "transparent",
+              cursor: "pointer",
+              fontFamily: "inherit",
+              fontSize: 13,
+              color: "rgba(0,0,0,0.55)",
+              transition: "background-color 0.15s, border-color 0.15s",
+              lineHeight: 1.3
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = `${primaryColor}0A`;
+              e.currentTarget.style.borderColor = `${primaryColor}33`;
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "transparent";
+              e.currentTarget.style.borderColor = "rgba(0,0,0,0.1)";
+            },
+            children: prompt
+          },
+          prompt
+        )) }),
+        /* @__PURE__ */ jsx4("div", { style: { display: "flex", gap: 12, marginTop: 4 }, children: onStartMic && /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            onClick: onStartMic,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              padding: "6px 14px",
+              borderRadius: 16,
+              border: "none",
+              backgroundColor: `${primaryColor}0A`,
+              cursor: "pointer",
+              fontFamily: "inherit",
+              fontSize: 12,
+              color: "rgba(0,0,0,0.4)"
+            },
+            children: [
+              /* @__PURE__ */ jsx4(Mic, { style: { width: 12, height: 12, opacity: 0.5 } }),
+              "or speak"
+            ]
+          }
+        ) })
       ]
     }
   );
@@ -1764,7 +1768,7 @@ function PipelineMetricsBar({
 
 // src/components/GlassCopilotPanel.tsx
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var VoiceSettingsView2 = lazy(() => import("./VoiceSettingsView-6QTJRFZ6.js"));
+var VoiceSettingsView2 = lazy(() => import("./VoiceSettingsView-JUZMLSHG.js"));
 var RETRY_INITIAL_MS = 3e3;
 var RETRY_MAX_MS = 3e4;
 var STATE_LABELS = {
@@ -2021,7 +2025,8 @@ function CollapsedBar({
   onMicToggle,
   ttsEnabled = true,
   copilotName,
-  portraitSrc
+  portraitSrc,
+  lastMessage
 }) {
   const { colors } = useSiteConfig4();
   const isOffline = voiceError === "network_error";
@@ -2119,7 +2124,7 @@ function CollapsedBar({
                     )
                   }
                 )
-              ] }) : micPaused ? "Paused" : STATE_LABELS[voiceState]
+              ] }) : (micPaused || voiceState === "IDLE") && lastMessage ? lastMessage.length > 40 ? lastMessage.slice(0, 40).trimEnd() + "..." : lastMessage : micPaused ? "Tap mic to resume" : STATE_LABELS[voiceState]
             }
           )
         ] }),
@@ -2194,6 +2199,7 @@ function ComposerBar({
   micPaused = false,
   onTextSubmit,
   onMicToggle,
+  onCancel,
   disabled = false,
   switchToTextRef,
   feedbackTarget,
@@ -2203,7 +2209,16 @@ function ComposerBar({
   const { colors } = useSiteConfig4();
   const [mode, setMode] = useState5(disabled ? "text" : "voice");
   const [text, setText] = useState5("");
+  const [showCancelHint, setShowCancelHint] = useState5(false);
   const inputRef = useRef4(null);
+  useEffect6(() => {
+    if (voiceState !== "PROCESSING") {
+      setShowCancelHint(false);
+      return;
+    }
+    const timer = setTimeout(() => setShowCancelHint(true), 2e3);
+    return () => clearTimeout(timer);
+  }, [voiceState]);
   useEffect6(() => {
     if (switchToTextRef) switchToTextRef.current = () => setMode("text");
   }, [switchToTextRef]);
@@ -2300,11 +2315,11 @@ function ComposerBar({
                 style: {
                   fontSize: "14px",
                   fontWeight: 400,
-                  color: micPaused ? "rgba(0,0,0,0.35)" : voiceState === "LISTENING" || voiceState === "USER_SPEAKING" ? colors.primary : "rgba(0,0,0,0.45)"
+                  color: micPaused ? "rgba(0,0,0,0.35)" : showCancelHint ? "rgba(0,0,0,0.35)" : voiceState === "LISTENING" || voiceState === "USER_SPEAKING" ? colors.primary : "rgba(0,0,0,0.45)"
                 },
-                children: micPaused ? "Tap mic to resume" : STATE_LABELS[voiceState]
+                children: micPaused ? "Tap mic to resume" : showCancelHint ? "Tap mic to cancel" : STATE_LABELS[voiceState]
               },
-              micPaused ? "paused" : voiceState
+              micPaused ? "paused" : showCancelHint ? "cancel-hint" : voiceState
             ) }) }),
             /* @__PURE__ */ jsxs8(
               motion5.button,
@@ -2312,7 +2327,8 @@ function ComposerBar({
                 whileHover: { scale: 1.04 },
                 whileTap: { scale: 0.96 },
                 onClick: () => {
-                  if (isListening) onMicToggle();
+                  if (voiceState === "PROCESSING" || voiceState === "AI_SPEAKING") onCancel?.();
+                  else if (isListening) onMicToggle();
                   setMode("text");
                 },
                 className: "shrink-0 flex items-center gap-1.5 cursor-pointer",
@@ -2545,6 +2561,7 @@ function ExpandedContent({
   onClose,
   onTextSubmit,
   onMicToggle,
+  onCancel,
   micPaused = false,
   onToolDismiss,
   onInteraction,
@@ -2646,7 +2663,7 @@ function ExpandedContent({
           }
         ),
         /* @__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, onReport, feedbackSentTurns }) }),
+          /* @__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, onReport, feedbackSentTurns, onTextSubmit, portraitSrc }) }),
           /* @__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: [
@@ -2657,7 +2674,7 @@ function ExpandedContent({
             /* @__PURE__ */ jsx9("div", { style: { padding: "0 16px 8px" }, children: /* @__PURE__ */ jsx9(VoiceToolCard, { result: toolResult, onDismiss: onToolDismiss, variant: "capsule" }) })
           ] })
         ] }),
-        /* @__PURE__ */ jsx9("div", { className: "shrink-0", children: /* @__PURE__ */ jsx9(ComposerBar, { voiceState, isListening, micPaused, onTextSubmit, onMicToggle, disabled: voiceError === "network_error" || voiceError === "stt_failed", switchToTextRef, feedbackTarget, onFeedbackSubmit, onFeedbackCancel }) })
+        /* @__PURE__ */ jsx9("div", { className: "shrink-0", children: /* @__PURE__ */ jsx9(ComposerBar, { voiceState, isListening, micPaused, onTextSubmit, onMicToggle, onCancel, disabled: voiceError === "network_error" || voiceError === "stt_failed", switchToTextRef, feedbackTarget, onFeedbackSubmit, onFeedbackCancel }) })
       ]
     }
   );
@@ -2839,6 +2856,13 @@ function WiredPanelInner({
   const bumpActivity = useCallback3(() => {
     setActivity((c) => c + 1);
   }, []);
+  const handleCancel = useCallback3(() => {
+    if (state === "PROCESSING" || state === "AI_SPEAKING") {
+      stop();
+      return true;
+    }
+    return false;
+  }, [state, stop]);
   const handleMicToggle = useCallback3(() => {
     setMicPaused(false);
     bumpActivity();
@@ -2846,8 +2870,10 @@ function WiredPanelInner({
       stop();
     } else if (state === "IDLE") {
       start();
+    } else if (handleCancel()) {
+      start();
     }
-  }, [state, start, stop, bumpActivity]);
+  }, [state, start, stop, bumpActivity, handleCancel]);
   useEffect6(() => {
     if (panelState === "hidden") stopRef.current(true);
   }, [panelState]);
@@ -2910,7 +2936,7 @@ function WiredPanelInner({
           timings: lastTimings ?? void 0,
           route: window.location.pathname,
           copilotName: config.copilotName,
-          kitVersion: "5.2.5"
+          kitVersion: "5.3.0"
         })
       });
       const body = await res.json().catch(() => ({ ticketId: void 0 }));
@@ -2971,10 +2997,11 @@ function WiredPanelInner({
     }
   }, [showSettings]);
   if (panelState === "collapsed") {
-    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 });
+    const lastAssistantMsg = messages.slice().reverse().find((m) => m.role === "assistant")?.text;
+    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, lastMessage: lastAssistantMsg });
   }
   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, retryCountdown, lastTimings, showPipelineMetrics: settings.showPipelineMetrics, pipelineMetricsAutoHideMs: settings.pipelineMetricsAutoHideMs, showSettings, onSettingsToggle: toggleSettings, ttsEnabled: settings.ttsEnabled, copilotName: config.copilotName, portraitSrc: resolvedPortrait, onStartMic: handleMicToggle, onSwitchToKeyboard: handleSwitchToKeyboard, switchToTextRef, onReport: handleReport, feedbackSentTurns, feedbackTarget, onFeedbackSubmit: handleFeedbackSubmit, onFeedbackCancel: handleFeedbackCancel }),
+    /* @__PURE__ */ jsx9(ExpandedContent, { orbState, getAmplitude, analyser, voiceState: state, messages, isTyping, toolResult, voiceError: effectiveError, dismissError, onCollapse, onClose, onTextSubmit: handleTextSubmit, onMicToggle: handleMicToggle, onCancel: handleCancel, 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, onReport: handleReport, feedbackSentTurns, feedbackTarget, onFeedbackSubmit: handleFeedbackSubmit, onFeedbackCancel: handleFeedbackCancel }),
     /* @__PURE__ */ jsx9(AnimatePresence5, { children: showSettings && /* @__PURE__ */ jsx9(Suspense, { fallback: null, children: /* @__PURE__ */ jsx9(VoiceSettingsView2, { onBack: toggleSettings, onVolumeChange: applyVolume }) }) })
   ] });
 }