@unctad-ai/voice-agent-ui 5.1.2 → 5.2.0

package/dist/{VoiceSettingsView-DAYBNBVA.js → VoiceSettingsView-OPMI5HCP.js}

@@ -5,7 +5,7 @@ import {
   SliderSetting,
   ToggleSetting,
   VoiceSettingsView
-} from "./chunk-OUTD6CWN.js";
+} from "./chunk-IMDRPZ6B.js";
 export {
   Divider,
   SelectSetting,
@@ -14,4 +14,4 @@ export {
   ToggleSetting,
   VoiceSettingsView as default
 };
-//# sourceMappingURL=VoiceSettingsView-DAYBNBVA.js.map
+//# sourceMappingURL=VoiceSettingsView-OPMI5HCP.js.map

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

package/dist/index.js

@@ -8,7 +8,7 @@ import {
   VoiceSettingsProvider,
   VoiceSettingsView,
   useVoiceSettings
-} from "./chunk-OUTD6CWN.js";
+} from "./chunk-IMDRPZ6B.js";
 
 // src/VoiceAgentProvider.tsx
 import { SiteConfigProvider } from "@unctad-ai/voice-agent-core";
@@ -32,7 +32,7 @@ import {
   Component as Component2
 } from "react";
 import { createPortal } from "react-dom";
-import { motion as motion5, AnimatePresence as AnimatePresence5 } from "motion/react";
+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 {
   useVoiceAgent,
@@ -1764,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-DAYBNBVA.js"));
+var VoiceSettingsView2 = lazy(() => import("./VoiceSettingsView-OPMI5HCP.js"));
 var RETRY_INITIAL_MS = 3e3;
 var RETRY_MAX_MS = 3e4;
 var STATE_LABELS = {
@@ -1795,12 +1795,12 @@ function CopilotFAB({ onClick, portraitSrc, isOffline = false }) {
         border: "none",
         padding: 0,
         borderRadius: "50%",
-        width: 54,
-        height: 54
+        width: 68,
+        height: 68
       },
       "aria-label": "Open voice assistant",
       "data-testid": "voice-agent-fab",
-      children: /* @__PURE__ */ jsx9("div", { className: "agent-fab-border", style: { width: 54, height: 54, "--agent-primary": isOffline ? "#9ca3af" : colors.primary, animation: isOffline ? "none" : void 0 }, children: /* @__PURE__ */ jsx9("div", { className: "agent-fab-border-inner", children: portraitSrc ? /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx9("div", { className: "agent-fab-border", style: { width: 68, height: 68, "--agent-primary": isOffline ? "#9ca3af" : colors.primary, animation: isOffline ? "none" : void 0 }, children: /* @__PURE__ */ jsx9("div", { className: "agent-fab-border-inner", children: portraitSrc ? /* @__PURE__ */ jsx9(
         "img",
         {
           src: portraitSrc,
@@ -1819,7 +1819,7 @@ function CopilotFAB({ onClick, portraitSrc, isOffline = false }) {
             justifyContent: "center",
             backgroundColor: "#6b7280",
             color: "white",
-            fontSize: 20,
+            fontSize: 24,
             fontWeight: 700
           },
           children: "AI"
@@ -1828,6 +1828,176 @@ function CopilotFAB({ onClick, portraitSrc, isOffline = false }) {
     }
   );
 }
+var FAB_GREETED_KEY = (name) => `voice-fab-greeted:${name}`;
+var FAB_LAST_SHOWN_KEY = (name) => `voice-fab-last-shown:${name}`;
+var FAB_COOLDOWN_MS = 30 * 60 * 1e3;
+var FAB_TOOLTIP_NARROW_QUERY = "(max-width: 479px)";
+function safeStorage(op) {
+  try {
+    return op();
+  } catch {
+    return null;
+  }
+}
+function CopilotFABTooltip({ onClick }) {
+  const { copilotName, colors, fabTooltip } = useSiteConfig4();
+  const prefersReduced = useReducedMotion2();
+  const [visible, setVisible] = useState5(false);
+  const [dismissed, setDismissed] = useState5(false);
+  const [isFirstVisit] = useState5(() => !safeStorage(() => localStorage.getItem(FAB_GREETED_KEY(copilotName))));
+  useEffect6(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(FAB_TOOLTIP_NARROW_QUERY);
+    if (mql.matches) {
+      setDismissed(true);
+      return;
+    }
+    const handler = (e) => {
+      if (e.matches) setDismissed(true);
+    };
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+  useEffect6(() => {
+    if (isFirstVisit) {
+      const timer2 = setTimeout(() => {
+        setVisible(true);
+        safeStorage(() => localStorage.setItem(FAB_GREETED_KEY(copilotName), "true"));
+        safeStorage(() => localStorage.setItem(FAB_LAST_SHOWN_KEY(copilotName), (/* @__PURE__ */ new Date()).toISOString()));
+      }, 2e3);
+      return () => clearTimeout(timer2);
+    }
+    const lastShown = safeStorage(() => localStorage.getItem(FAB_LAST_SHOWN_KEY(copilotName)));
+    if (lastShown && Date.now() - new Date(lastShown).getTime() < FAB_COOLDOWN_MS) return;
+    const timer = setTimeout(() => {
+      setVisible(true);
+      safeStorage(() => localStorage.setItem(FAB_LAST_SHOWN_KEY(copilotName), (/* @__PURE__ */ new Date()).toISOString()));
+    }, 5e3);
+    return () => clearTimeout(timer);
+  }, [copilotName, isFirstVisit]);
+  useEffect6(() => {
+    if (!visible || isFirstVisit) return;
+    const timer = setTimeout(() => setDismissed(true), 5e3);
+    return () => clearTimeout(timer);
+  }, [visible, isFirstVisit]);
+  useEffect6(() => {
+    if (!visible || dismissed || isFirstVisit) return;
+    const handleScroll = () => setDismissed(true);
+    window.addEventListener("scroll", handleScroll, { passive: true, once: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [visible, dismissed, isFirstVisit]);
+  const handleTryNow = () => {
+    setDismissed(true);
+    onClick();
+  };
+  const handleDismiss = (e) => {
+    e.stopPropagation();
+    setDismissed(true);
+  };
+  const firstVisitText = fabTooltip?.firstVisit ? fabTooltip.firstVisit.replaceAll("{name}", copilotName) : `I'm ${copilotName}, your virtual civil servant.
+How may I help you?`;
+  const returnVisitText = fabTooltip?.returnVisit ?? "How may I help you?";
+  const show = visible && !dismissed;
+  return /* @__PURE__ */ jsx9(AnimatePresence5, { children: show && /* @__PURE__ */ jsxs8(
+    motion5.div,
+    {
+      role: "status",
+      "aria-live": "polite",
+      "data-testid": "voice-agent-fab-tooltip",
+      initial: prefersReduced ? { opacity: 0 } : { opacity: 0, x: 20 },
+      animate: prefersReduced ? { opacity: 1 } : { opacity: 1, x: 0 },
+      exit: prefersReduced ? { opacity: 0 } : { opacity: 0, x: 10 },
+      transition: prefersReduced ? { duration: 0.2 } : { type: "spring", stiffness: 300, damping: 25 },
+      onClick: isFirstVisit ? void 0 : handleTryNow,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 0,
+        cursor: isFirstVisit ? "default" : "pointer"
+      },
+      children: [
+        /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            style: {
+              background: "white",
+              borderRadius: 20,
+              padding: isFirstVisit ? "12px 20px" : "10px 18px",
+              boxShadow: "0 2px 12px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04)",
+              maxWidth: 340
+            },
+            children: [
+              /* @__PURE__ */ jsx9(
+                "div",
+                {
+                  style: {
+                    fontSize: isFirstVisit ? 14 : 13,
+                    color: "#1a1a1a",
+                    fontWeight: 500,
+                    lineHeight: 1.4,
+                    whiteSpace: "pre-line"
+                  },
+                  children: isFirstVisit ? firstVisitText : returnVisitText
+                }
+              ),
+              isFirstVisit && /* @__PURE__ */ jsxs8("div", { style: { display: "flex", gap: 8, marginTop: 8 }, children: [
+                /* @__PURE__ */ jsx9(
+                  "button",
+                  {
+                    "data-testid": "voice-agent-fab-tooltip-cta",
+                    "aria-label": `Open ${copilotName} voice assistant`,
+                    onClick: handleTryNow,
+                    style: {
+                      padding: "6px 16px",
+                      background: colors.primary,
+                      color: "white",
+                      border: "none",
+                      borderRadius: 12,
+                      fontSize: 12,
+                      fontWeight: 600,
+                      cursor: "pointer"
+                    },
+                    children: "Try it now"
+                  }
+                ),
+                /* @__PURE__ */ jsx9(
+                  "button",
+                  {
+                    onClick: handleDismiss,
+                    style: {
+                      padding: "6px 12px",
+                      background: "transparent",
+                      color: "#6b7280",
+                      border: "none",
+                      borderRadius: 12,
+                      fontSize: 12,
+                      cursor: "pointer"
+                    },
+                    children: "Maybe later"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "div",
+          {
+            style: {
+              width: 0,
+              height: 0,
+              borderTop: "8px solid transparent",
+              borderBottom: "8px solid transparent",
+              borderLeft: "8px solid white",
+              flexShrink: 0,
+              filter: "drop-shadow(2px 0 1px rgba(0,0,0,0.06))"
+            }
+          }
+        )
+      ]
+    }
+  ) });
+}
 function CollapsedBar({
   orbState,
   getAmplitude,
@@ -2673,19 +2843,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;
@@ -2721,7 +2902,7 @@ function WiredPanelInner({
           timings: lastTimings ?? void 0,
           route: window.location.pathname,
           copilotName: config.copilotName,
-          kitVersion: "5.1.2"
+          kitVersion: "5.2.0"
         })
       });
       const body = await res.json().catch(() => ({ ticketId: void 0 }));
@@ -2859,7 +3040,10 @@ function GlassCopilotPanel({ isOpen: isOpenProp, onOpen: onOpenProp, onClose: on
       ] }) }) }),
       /* @__PURE__ */ jsx9("span", { "aria-live": "polite", "aria-atomic": "true", style: { position: "absolute", width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap", borderWidth: 0 }, children: ariaAnnouncement }),
       /* @__PURE__ */ jsxs8(AnimatePresence5, { children: [
-        !isVisible && /* @__PURE__ */ jsx9(motion5.div, { ref: fabRef, initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: "fixed", style: { bottom: PANEL_BOTTOM, right: PANEL_RIGHT, zIndex: PANEL_Z_INDEX }, children: /* @__PURE__ */ jsx9(CopilotFAB, { onClick: handleOpen, portraitSrc: resolvedPortrait, isOffline: fabOffline }) }, "copilot-fab"),
+        !isVisible && /* @__PURE__ */ jsxs8(motion5.div, { ref: fabRef, initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.25, ease: "easeOut" }, className: "fixed", style: { bottom: PANEL_BOTTOM, right: PANEL_RIGHT, zIndex: PANEL_Z_INDEX, display: "flex", alignItems: "flex-end", gap: 12 }, children: [
+          /* @__PURE__ */ jsx9(CopilotFABTooltip, { onClick: handleOpen }),
+          /* @__PURE__ */ jsx9(CopilotFAB, { onClick: handleOpen, portraitSrc: resolvedPortrait, isOffline: fabOffline })
+        ] }, "copilot-fab"),
         isVisible && /* @__PURE__ */ jsxs8(
           motion5.div,
           {
@@ -2869,9 +3053,9 @@ function GlassCopilotPanel({ isOpen: isOpenProp, onOpen: onOpenProp, onClose: on
             "aria-label": "Voice Assistant",
             "aria-modal": "false",
             "data-testid": "voice-agent-panel",
-            initial: { width: 48, height: 48, borderRadius: 24, opacity: 0, scale: 0.9 },
+            initial: { width: 68, height: 68, borderRadius: 34, opacity: 0, scale: 0.9 },
             animate: { width: PANEL_WIDTH, height: Math.min(targetHeight, window.innerHeight - 48), borderRadius: PANEL_BORDER_RADIUS, opacity: 1, scale: 1, transition: SPRING_PANEL },
-            exit: { width: 48, height: 48, borderRadius: 24, opacity: 0, scale: 0.95, transition: SPRING_PANEL_EXIT },
+            exit: { width: 68, height: 68, borderRadius: 34, opacity: 0, scale: 0.95, transition: SPRING_PANEL_EXIT },
             className: "fixed",
             style: { bottom: PANEL_BOTTOM, right: PANEL_RIGHT, zIndex: PANEL_Z_INDEX, transformOrigin: "bottom right", maxWidth: "calc(100vw - 32px)", outline: "none", fontFamily: config.fontFamily ?? DEFAULT_FONT_FAMILY2 },
             children: [
@@ -2928,7 +3112,7 @@ function VoiceA11yAnnouncer({ isOpen, orbState }) {
 }
 
 // src/components/VoiceCopilotFAB.tsx
-import { motion as motion6, AnimatePresence as AnimatePresence6, useReducedMotion as useReducedMotion2 } from "motion/react";
+import { motion as motion6, AnimatePresence as AnimatePresence6, useReducedMotion as useReducedMotion3 } from "motion/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";
@@ -2938,7 +3122,7 @@ function VoiceCopilotFAB({
   isOverlayOpen,
   onMouseEnter
 }) {
-  const prefersReduced = useReducedMotion2();
+  const prefersReduced = useReducedMotion3();
   const { colors } = useSiteConfig5();
   return /* @__PURE__ */ jsx11(AnimatePresence6, { children: !isOverlayOpen && /* @__PURE__ */ jsx11(
     motion6.div,