@unctad-ai/voice-agent-ui 5.1.1 → 5.1.3

package/dist/{VoiceSettingsView-2CCGBBY4.js → VoiceSettingsView-UL3TSETS.js}

@@ -5,7 +5,7 @@ import {
   SliderSetting,
   ToggleSetting,
   VoiceSettingsView
-} from "./chunk-2Y43PT5D.js";
+} from "./chunk-LOZIYINE.js";
 export {
   Divider,
   SelectSetting,
@@ -14,4 +14,4 @@ export {
   ToggleSetting,
   VoiceSettingsView as default
 };
-//# sourceMappingURL=VoiceSettingsView-2CCGBBY4.js.map
+//# sourceMappingURL=VoiceSettingsView-UL3TSETS.js.map

package/dist/{chunk-2Y43PT5D.js → chunk-LOZIYINE.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.1.1" })
+            /* @__PURE__ */ jsx3("span", { style: { fontWeight: 500, color: "#6b7280" }, children: "5.1.3" })
           ] })
         ] }) })
       ]
@@ -1994,4 +1994,4 @@ export {
   SettingsSection,
   Divider
 };
-//# sourceMappingURL=chunk-2Y43PT5D.js.map
+//# sourceMappingURL=chunk-LOZIYINE.js.map

package/dist/index.d.ts

@@ -225,10 +225,10 @@ interface VoiceTranscriptProps {
     onSwitchToKeyboard?: () => void;
     /** Callback when user reports a bad assistant response */
     onReport?: (turnNumber: number, assistantMessage: string, userMessage?: string) => void;
-    /** Turn number of the most recently sent feedback (shows "Sent" confirmation) */
-    feedbackSentTurn?: number | null;
+    /** Map of turn numbers to ticket IDs for sent feedback */
+    feedbackSentTurns?: Record<number, string>;
 }
-declare function VoiceTranscript({ messages, isTyping, variant, voiceError, voiceState, onStartMic, onSwitchToKeyboard, onReport, feedbackSentTurn, }: VoiceTranscriptProps): react_jsx_runtime.JSX.Element;
+declare function VoiceTranscript({ messages, isTyping, variant, voiceError, voiceState, onStartMic, onSwitchToKeyboard, onReport, feedbackSentTurns, }: 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-2Y43PT5D.js";
+} from "./chunk-LOZIYINE.js";
 
 // src/VoiceAgentProvider.tsx
 import { SiteConfigProvider } from "@unctad-ai/voice-agent-core";
@@ -665,8 +665,8 @@ import {
   DEFAULT_FONT_FAMILY,
   useSiteConfig as useSiteConfig3
 } from "@unctad-ai/voice-agent-core";
-import { ArrowRight, PenLine, MousePointerClick, Search, Info, ChevronDown, Mic, Keyboard, Flag } from "lucide-react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { ArrowRight, PenLine, MousePointerClick, Search, Info, ChevronDown, Mic, Keyboard, 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();
 }
@@ -834,6 +834,80 @@ function isDisplayWorthy(msg) {
   if (alphaOnly.length === 0) return false;
   return true;
 }
+function FeedbackPill({ isSent, ticketId, onReport }) {
+  const [copied, setCopied] = useState3(false);
+  const [showTicket, setShowTicket] = useState3(false);
+  useEffect3(() => {
+    if (!isSent) {
+      setShowTicket(false);
+      return;
+    }
+    const timer = setTimeout(() => setShowTicket(true), 2e3);
+    return () => clearTimeout(timer);
+  }, [isSent]);
+  const phase = !isSent ? "idle" : showTicket ? "ticket" : "sent";
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      role: phase === "idle" ? "button" : void 0,
+      onClick: phase === "idle" ? onReport : void 0,
+      className: "voice-feedback-pill",
+      style: {
+        marginTop: 2,
+        fontSize: 11,
+        padding: "2px 8px",
+        borderRadius: 8,
+        border: phase === "sent" ? "1px solid rgba(22,163,74,0.3)" : phase === "ticket" ? "1px solid rgba(217,119,6,0.3)" : "1px solid rgba(0,0,0,0.12)",
+        background: "transparent",
+        color: phase === "sent" ? "#16a34a" : phase === "ticket" ? "#92400e" : "rgba(0,0,0,0.30)",
+        cursor: phase === "idle" ? "pointer" : "default",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 3,
+        opacity: isSent ? 1 : 0,
+        transition: "opacity 0.15s, color 0.4s, border-color 0.4s",
+        fontFamily: phase === "ticket" ? "monospace" : "inherit"
+      },
+      children: phase === "sent" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsx4(Check, { size: 10, strokeWidth: 2 }),
+        "Sent"
+      ] }) : phase === "ticket" && ticketId ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+        "Ticket ",
+        ticketId,
+        /* @__PURE__ */ jsx4(
+          "span",
+          {
+            role: "button",
+            "aria-label": "Copy ticket ID",
+            onClick: () => {
+              navigator.clipboard.writeText(ticketId).then(() => {
+                setCopied(true);
+                setTimeout(() => setCopied(false), 1500);
+              }).catch(() => {
+              });
+            },
+            style: {
+              cursor: "pointer",
+              display: "inline-flex",
+              alignItems: "center",
+              marginLeft: 3,
+              gap: 2,
+              color: copied ? "#16a34a" : "#92400e",
+              transition: "color 0.15s"
+            },
+            children: copied ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+              /* @__PURE__ */ jsx4(Check, { size: 10, strokeWidth: 2 }),
+              " Copied"
+            ] }) : /* @__PURE__ */ jsx4(Copy, { size: 10, strokeWidth: 2 })
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsx4(Flag, { size: 10, strokeWidth: 2 }),
+        "Feedback"
+      ] })
+    }
+  );
+}
 function VoiceTranscript({
   messages,
   isTyping,
@@ -843,7 +917,7 @@ function VoiceTranscript({
   onStartMic,
   onSwitchToKeyboard,
   onReport,
-  feedbackSentTurn
+  feedbackSentTurns
 }) {
   const config = useSiteConfig3();
   const fontFamily = config.fontFamily ?? DEFAULT_FONT_FAMILY;
@@ -1035,35 +1109,17 @@ function VoiceTranscript({
                     ),
                     isAI && (!isLast || !isTyping) && onReport && (() => {
                       const turnNumber = visible.slice(0, idx + 1).filter((m) => m.role === "assistant").length;
-                      const isSent = feedbackSentTurn === turnNumber;
-                      return /* @__PURE__ */ jsxs3(
-                        "button",
+                      const ticketId = feedbackSentTurns?.[turnNumber] ?? null;
+                      const isSent = ticketId !== null;
+                      return /* @__PURE__ */ jsx4(
+                        FeedbackPill,
                         {
-                          disabled: isSent,
-                          onClick: () => {
+                          isSent,
+                          ticketId,
+                          onReport: () => {
                             const userMsg = visible.slice(0, idx).reverse().find((m) => m.role === "user");
                             onReport(turnNumber, msg.text, userMsg?.text);
-                          },
-                          className: "voice-feedback-pill",
-                          style: {
-                            marginTop: 2,
-                            fontSize: 11,
-                            padding: "2px 8px",
-                            borderRadius: 8,
-                            border: isSent ? "1px solid rgba(22,163,74,0.3)" : "1px solid rgba(0,0,0,0.12)",
-                            background: "transparent",
-                            color: isSent ? "#16a34a" : "rgba(0,0,0,0.30)",
-                            cursor: isSent ? "default" : "pointer",
-                            display: "inline-flex",
-                            alignItems: "center",
-                            gap: 3,
-                            opacity: isSent ? 1 : 0,
-                            transition: "opacity 0.15s, color 0.15s"
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx4(Flag, { size: 10, strokeWidth: 2 }),
-                            isSent ? "Sent" : "Feedback"
-                          ]
+                          }
                         }
                       );
                     })()
@@ -1394,7 +1450,7 @@ function EmptyStateGraphic({ primaryColor, voiceState, onStartMic, onSwitchToKey
 import { useEffect as useEffect4 } from "react";
 import { motion as motion2, AnimatePresence as AnimatePresence2 } from "motion/react";
 import { ArrowUpRight } from "lucide-react";
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var AUTO_DISMISS_MS = 8e3;
 function VoiceToolCard({
   result,
@@ -1438,7 +1494,7 @@ function VoiceToolCard({
           onAction?.(result);
         }
       },
-      children: isCapsule ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+      children: isCapsule ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
         /* @__PURE__ */ jsx5(
           ArrowUpRight,
           {
@@ -1454,7 +1510,7 @@ function VoiceToolCard({
             children: result.displayText
           }
         )
-      ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+      ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
         /* @__PURE__ */ jsx5("p", { className: "text-white/50 text-xs uppercase tracking-wider mb-1", children: result.name }),
         /* @__PURE__ */ jsx5("p", { className: "text-white text-sm leading-relaxed", children: result.displayText })
       ] })
@@ -1708,7 +1764,7 @@ function PipelineMetricsBar({
 
 // src/components/GlassCopilotPanel.tsx
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var VoiceSettingsView2 = lazy(() => import("./VoiceSettingsView-2CCGBBY4.js"));
+var VoiceSettingsView2 = lazy(() => import("./VoiceSettingsView-UL3TSETS.js"));
 var RETRY_INITIAL_MS = 3e3;
 var RETRY_MAX_MS = 3e4;
 var STATE_LABELS = {
@@ -2329,7 +2385,7 @@ function ExpandedContent({
   onSwitchToKeyboard,
   switchToTextRef,
   onReport,
-  feedbackSentTurn,
+  feedbackSentTurns,
   feedbackTarget,
   onFeedbackSubmit,
   onFeedbackCancel
@@ -2412,7 +2468,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, feedbackSentTurn }) }),
+          /* @__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__ */ 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: [
@@ -2501,7 +2557,7 @@ function WiredPanelInner({
   const { state, start, stop, messages, getAmplitude, analyser, sendTextMessage, voiceError, dismissError, lastTimings, sessionId, applyVolume, settings } = useVoiceAgent({ settings: voiceSettings, volumeRef, speedRef });
   const [toolResult, setToolResult] = useState5(null);
   const [feedbackTarget, setFeedbackTarget] = useState5(null);
-  const [feedbackSentTurn, setFeedbackSentTurn] = useState5(null);
+  const [feedbackSentTurns, setFeedbackSentTurns] = useState5({});
   const orbState = voiceStateToOrbState(state);
   const [backendDown, setBackendDown] = useState5(false);
   const autoStartedRef = useRef4(false);
@@ -2617,19 +2673,30 @@ function WiredPanelInner({
   useEffect6(() => {
     if (panelState === "hidden") stopRef.current(true);
   }, [panelState]);
+  const micOpen = state === "LISTENING" || state === "USER_SPEAKING";
+  const stateRef = useRef4(state);
+  stateRef.current = state;
   useEffect6(() => {
     if (panelState === "hidden" || micPaused || showSettings) return;
-    if (state === "PROCESSING" || state === "AI_SPEAKING") return;
-    const timer = setTimeout(() => {
-      stopRef.current();
-      if (hasConversationRef.current) {
-        setMicPaused(true);
-      } else {
-        onCollapseRef.current();
-      }
-    }, settings.idleTimeoutMs);
+    if (!micOpen) return;
+    let timer;
+    const schedule = () => {
+      timer = setTimeout(() => {
+        if (stateRef.current === "USER_SPEAKING") {
+          schedule();
+          return;
+        }
+        stopRef.current();
+        if (hasConversationRef.current) {
+          setMicPaused(true);
+        } else {
+          onCollapseRef.current();
+        }
+      }, settings.idleTimeoutMs);
+    };
+    schedule();
     return () => clearTimeout(timer);
-  }, [state, panelState, micPaused, showSettings, activity, settings.idleTimeoutMs]);
+  }, [micOpen, panelState, micPaused, showSettings, activity, settings.idleTimeoutMs]);
   useEffect6(() => {
     if (!micPaused || panelState !== "expanded" || showSettings) return;
     if (settings.panelCollapseTimeoutMs === 0) return;
@@ -2653,7 +2720,7 @@ function WiredPanelInner({
     const backendUrl = typeof import.meta !== "undefined" && import.meta.env?.VITE_BACKEND_URL || "";
     const url = backendUrl ? `${backendUrl}/api/feedback` : "/api/feedback";
     try {
-      await fetch(url, {
+      const res = await fetch(url, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -2665,11 +2732,11 @@ function WiredPanelInner({
           timings: lastTimings ?? void 0,
           route: window.location.pathname,
           copilotName: config.copilotName,
-          kitVersion: "5.1.1"
+          kitVersion: "5.1.3"
         })
       });
-      setFeedbackSentTurn(target.turnNumber);
-      setTimeout(() => setFeedbackSentTurn(null), 2e3);
+      const body = await res.json().catch(() => ({ ticketId: void 0 }));
+      setFeedbackSentTurns((prev) => ({ ...prev, [target.turnNumber]: body.ticketId || "\u2713" }));
     } catch {
     }
     setFeedbackTarget(null);
@@ -2729,7 +2796,7 @@ function WiredPanelInner({
     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, 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, feedbackSentTurn, 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, 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 }) }) })
   ] });
 }
@@ -3375,7 +3442,7 @@ function VoiceWaveformCanvas({
 }
 
 // src/components/VoiceOverlay.tsx
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var OVERLAY_Z = 2147483647;
 var SPRING_BOUNCY = { type: "spring", damping: 20, stiffness: 180 };
 var SPRING_SMOOTH = { type: "spring", damping: 28, stiffness: 160 };
@@ -3553,7 +3620,7 @@ function OverlayPortal({
 }) {
   if (!isOpen) return null;
   return createPortal2(
-    /* @__PURE__ */ jsxs11(Fragment2, { children: [
+    /* @__PURE__ */ jsxs11(Fragment3, { children: [
       /* @__PURE__ */ jsx16(
         "svg",
         {