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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unctad-ai/voice-agent-ui",
-  "version": "0.1.8",
+  "version": "1.0.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,8 +19,8 @@
   "dependencies": {
     "clsx": "^2.1.0",
     "tailwind-merge": "^2.0.0",
-    "@unctad-ai/voice-agent-core": "0.1.8",
-    "@unctad-ai/voice-agent-registries": "0.1.8"
+    "@unctad-ai/voice-agent-core": "1.0.1",
+    "@unctad-ai/voice-agent-registries": "1.0.1"
   },
   "peerDependencies": {
     "lucide-react": "*",

package/dist/VoiceSettingsView-RP5CUCKI.js

@@ -1,7 +0,0 @@
-import {
-  VoiceSettingsView
-} from "./chunk-MUFUZ3TH.js";
-export {
-  VoiceSettingsView as default
-};
-//# sourceMappingURL=VoiceSettingsView-RP5CUCKI.js.map

package/dist/chunk-MUFUZ3TH.js

@@ -1,582 +0,0 @@
-// src/components/VoiceSettingsView.tsx
-import { motion } from "motion/react";
-import {
-  ArrowLeft,
-  RotateCcw,
-  Volume2,
-  Gauge,
-  AudioLines,
-  Sparkles,
-  Mic,
-  Timer,
-  MessageSquare,
-  Activity,
-  EyeOff,
-  Info,
-  Ear,
-  Clock,
-  Zap,
-  Minimize2,
-  Signal
-} from "lucide-react";
-
-// src/contexts/VoiceSettingsContext.tsx
-import { createContext, useContext, useState, useRef, useCallback } from "react";
-import {
-  DEFAULT_VOLUME,
-  DEFAULT_PLAYBACK_SPEED,
-  DEFAULT_TTS_ENABLED,
-  DEFAULT_AUTO_LISTEN,
-  DEFAULT_IDLE_TIMEOUT_MS,
-  DEFAULT_EXPRESSIVENESS,
-  DEFAULT_RESPONSE_LENGTH,
-  DEFAULT_SHOW_PIPELINE_METRICS,
-  DEFAULT_PIPELINE_METRICS_AUTO_HIDE_MS,
-  DEFAULT_SPEECH_THRESHOLD,
-  DEFAULT_PAUSE_TOLERANCE_MS,
-  DEFAULT_BARGE_IN_THRESHOLD,
-  DEFAULT_PANEL_COLLAPSE_TIMEOUT_MS,
-  DEFAULT_STT_TIMEOUT_MS,
-  DEFAULT_TTS_TIMEOUT_MS,
-  DEFAULT_LLM_TIMEOUT_MS,
-  DEFAULT_MIN_AUDIO_RMS
-} from "@unctad-ai/voice-agent-core";
-import { jsx } from "react/jsx-runtime";
-var DEFAULTS = {
-  volume: DEFAULT_VOLUME,
-  playbackSpeed: DEFAULT_PLAYBACK_SPEED,
-  ttsEnabled: DEFAULT_TTS_ENABLED,
-  autoListen: DEFAULT_AUTO_LISTEN,
-  idleTimeoutMs: DEFAULT_IDLE_TIMEOUT_MS,
-  expressiveness: DEFAULT_EXPRESSIVENESS,
-  responseLength: DEFAULT_RESPONSE_LENGTH,
-  showPipelineMetrics: DEFAULT_SHOW_PIPELINE_METRICS,
-  pipelineMetricsAutoHideMs: DEFAULT_PIPELINE_METRICS_AUTO_HIDE_MS,
-  speechThreshold: DEFAULT_SPEECH_THRESHOLD,
-  pauseToleranceMs: DEFAULT_PAUSE_TOLERANCE_MS,
-  bargeInThreshold: DEFAULT_BARGE_IN_THRESHOLD,
-  panelCollapseTimeoutMs: DEFAULT_PANEL_COLLAPSE_TIMEOUT_MS,
-  sttTimeoutMs: DEFAULT_STT_TIMEOUT_MS,
-  ttsTimeoutMs: DEFAULT_TTS_TIMEOUT_MS,
-  llmTimeoutMs: DEFAULT_LLM_TIMEOUT_MS,
-  minAudioRms: DEFAULT_MIN_AUDIO_RMS
-};
-var STORAGE_KEY = "voice-settings";
-function loadSettings() {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    if (!raw) return { ...DEFAULTS };
-    const parsed = JSON.parse(raw);
-    return { ...DEFAULTS, ...parsed };
-  } catch {
-    return { ...DEFAULTS };
-  }
-}
-function persistSettings(settings) {
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
-  } catch {
-  }
-}
-var VoiceSettingsContext = createContext(void 0);
-function VoiceSettingsProvider({ children }) {
-  const [settings, setSettings] = useState(loadSettings);
-  const volumeRef = useRef(settings.volume);
-  const speedRef = useRef(settings.playbackSpeed);
-  const updateSetting = useCallback(
-    (key, value) => {
-      setSettings((prev) => {
-        const next = { ...prev, [key]: value };
-        persistSettings(next);
-        if (key === "volume") volumeRef.current = value;
-        if (key === "playbackSpeed") speedRef.current = value;
-        return next;
-      });
-    },
-    []
-  );
-  const resetSettings = useCallback(() => {
-    const defaults = { ...DEFAULTS };
-    setSettings(defaults);
-    persistSettings(defaults);
-    volumeRef.current = defaults.volume;
-    speedRef.current = defaults.playbackSpeed;
-  }, []);
-  return /* @__PURE__ */ jsx(
-    VoiceSettingsContext.Provider,
-    {
-      value: { settings, volumeRef, speedRef, updateSetting, resetSettings },
-      children
-    }
-  );
-}
-function useVoiceSettings() {
-  const context = useContext(VoiceSettingsContext);
-  if (context) return context;
-  return {
-    settings: DEFAULTS,
-    volumeRef: { current: DEFAULTS.volume },
-    speedRef: { current: DEFAULTS.playbackSpeed },
-    updateSetting: () => {
-    },
-    resetSettings: () => {
-    }
-  };
-}
-
-// src/components/VoiceSettingsView.tsx
-import { VAD, useSiteConfig } from "@unctad-ai/voice-agent-core";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function expressivenessLabel(v) {
-  if (v <= 0.15) return "Low";
-  if (v <= 0.4) return "Medium";
-  return "High";
-}
-function speechThresholdLabel(v) {
-  if (v >= 0.75) return "Strict";
-  if (v >= 0.5) return "Balanced";
-  return "Sensitive";
-}
-function bargeInLabel(v) {
-  if (v >= 0.8) return "Hard";
-  if (v >= 0.6) return "Normal";
-  return "Easy";
-}
-function SliderSetting({
-  icon,
-  label,
-  value,
-  displayValue,
-  min,
-  max,
-  step,
-  onChange
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "py-3 space-y-2.5", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      icon,
-      /* @__PURE__ */ jsx2("span", { className: "flex-1 text-sm font-medium text-neutral-900", children: label }),
-      /* @__PURE__ */ jsx2("span", { className: "text-xs font-medium tabular-nums", style: { color: "var(--voice-settings-accent, #DB2129)" }, children: displayValue })
-    ] }),
-    /* @__PURE__ */ jsx2(
-      "input",
-      {
-        type: "range",
-        value,
-        min,
-        max,
-        step,
-        onChange: (e) => onChange(Number(e.target.value)),
-        className: "w-full",
-        style: { accentColor: "var(--voice-settings-accent, #DB2129)" }
-      }
-    )
-  ] });
-}
-function ToggleSetting({
-  icon,
-  label,
-  description,
-  checked,
-  onChange
-}) {
-  return /* @__PURE__ */ jsxs("label", { className: "py-3 flex items-center gap-3 cursor-pointer", children: [
-    icon,
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ jsx2("div", { className: "text-sm font-medium text-neutral-900", children: label }),
-      /* @__PURE__ */ jsx2("div", { className: "text-xs text-neutral-500", children: description })
-    ] }),
-    /* @__PURE__ */ jsx2(
-      "button",
-      {
-        role: "switch",
-        "aria-checked": checked,
-        onClick: () => onChange(!checked),
-        className: "relative inline-flex h-6 w-11 items-center rounded-full transition-colors cursor-pointer",
-        style: { backgroundColor: checked ? "var(--voice-settings-accent, #DB2129)" : "#d1d5db" },
-        children: /* @__PURE__ */ jsx2(
-          "span",
-          {
-            className: "inline-block h-5 w-5 rounded-full bg-white shadow transition-transform",
-            style: { transform: checked ? "translateX(22px)" : "translateX(2px)" }
-          }
-        )
-      }
-    )
-  ] });
-}
-function SelectSetting({
-  icon,
-  label,
-  value,
-  onChange,
-  options
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "py-3 flex items-center gap-3", children: [
-    icon,
-    /* @__PURE__ */ jsx2("span", { className: "flex-1 text-sm font-medium text-neutral-900", children: label }),
-    /* @__PURE__ */ jsx2(
-      "select",
-      {
-        value,
-        onChange: (e) => onChange(e.target.value),
-        className: "h-8 text-xs font-medium text-neutral-700 rounded-full border border-neutral-200 bg-neutral-50 pl-3 pr-7 outline-none appearance-none cursor-pointer hover:border-neutral-300 hover:bg-neutral-100 focus:border-neutral-400 transition-colors",
-        style: {
-          backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`,
-          backgroundRepeat: "no-repeat",
-          backgroundPosition: "right 8px center"
-        },
-        children: options.map((opt) => /* @__PURE__ */ jsx2("option", { value: opt.value, children: opt.label }, opt.value))
-      }
-    )
-  ] });
-}
-function VoiceSettingsView({ onBack, onVolumeChange }) {
-  const { settings, updateSetting, resetSettings } = useVoiceSettings();
-  const { colors } = useSiteConfig();
-  const iconClass = "w-4 h-4 shrink-0";
-  const iconStyle = { color: colors.primary };
-  return /* @__PURE__ */ jsxs(
-    motion.div,
-    {
-      initial: { opacity: 0, x: 20 },
-      animate: { opacity: 1, x: 0 },
-      exit: { opacity: 0, x: 20 },
-      transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] },
-      className: "voice-settings absolute inset-0 flex flex-col z-10",
-      style: { borderRadius: "inherit", backgroundColor: "#f9fafb", "--voice-settings-accent": colors.primary },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "flex items-center gap-2.5 shrink-0 px-4",
-            style: { height: 56, borderBottom: "1px solid #e5e7eb" },
-            children: [
-              /* @__PURE__ */ jsx2(
-                "button",
-                {
-                  onClick: onBack,
-                  className: "w-8 h-8 rounded-full flex items-center justify-center cursor-pointer transition-colors",
-                  style: { color: "#6b7280" },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.color = "#111827";
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.color = "#6b7280";
-                  },
-                  "aria-label": "Back to conversation",
-                  children: /* @__PURE__ */ jsx2(ArrowLeft, { className: "w-4 h-4" })
-                }
-              ),
-              /* @__PURE__ */ jsx2("span", { className: "flex-1 text-sm font-semibold", style: { color: "#111827" }, children: "Settings" }),
-              /* @__PURE__ */ jsx2(
-                "button",
-                {
-                  onClick: resetSettings,
-                  className: "w-8 h-8 rounded-full flex items-center justify-center cursor-pointer transition-colors",
-                  style: { color: "#9ca3af" },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.color = colors.primary;
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.color = "#9ca3af";
-                  },
-                  "aria-label": "Reset all settings",
-                  title: "Reset to defaults",
-                  children: /* @__PURE__ */ jsx2(RotateCcw, { className: "w-3.5 h-3.5" })
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 overflow-y-auto", children: [
-          /* @__PURE__ */ jsxs(SettingsSection, { title: "Voice Input", children: [
-            /* @__PURE__ */ jsx2(
-              ToggleSetting,
-              {
-                icon: /* @__PURE__ */ jsx2(Mic, { className: iconClass, style: iconStyle }),
-                label: "Auto-listen",
-                description: "Start mic when panel opens",
-                checked: settings.autoListen,
-                onChange: (v) => updateSetting("autoListen", v)
-              }
-            ),
-            /* @__PURE__ */ jsx2(Divider, {}),
-            /* @__PURE__ */ jsx2(
-              SelectSetting,
-              {
-                icon: /* @__PURE__ */ jsx2(Timer, { className: iconClass, style: iconStyle }),
-                label: "Idle timeout",
-                value: String(settings.idleTimeoutMs),
-                onChange: (v) => updateSetting("idleTimeoutMs", Number(v)),
-                options: [
-                  { value: "30000", label: "30s" },
-                  { value: "60000", label: "1 min" },
-                  { value: "120000", label: "2 min" },
-                  { value: "300000", label: "5 min" }
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx2(Divider, {}),
-            /* @__PURE__ */ jsx2(
-              SliderSetting,
-              {
-                icon: /* @__PURE__ */ jsx2(Ear, { className: iconClass, style: iconStyle }),
-                label: "Speech threshold",
-                value: settings.speechThreshold * 100,
-                displayValue: speechThresholdLabel(settings.speechThreshold),
-                min: 30,
-                max: 90,
-                step: 5,
-                onChange: (v) => updateSetting("speechThreshold", v / 100)
-              }
-            ),
-            /* @__PURE__ */ jsx2(Divider, {}),
-            /* @__PURE__ */ jsx2(
-              SelectSetting,
-              {
-                icon: /* @__PURE__ */ jsx2(Clock, { className: iconClass, style: iconStyle }),
-                label: "Pause tolerance",
-                value: String(settings.pauseToleranceMs),
-                onChange: (v) => updateSetting("pauseToleranceMs", Number(v)),
-                options: [
-                  { value: "400", label: "Fast" },
-                  { value: "600", label: "Default" },
-                  { value: "800", label: "Relaxed" },
-                  { value: "1000", label: "Patient" }
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx2(Divider, {}),
-            /* @__PURE__ */ jsx2(
-              SliderSetting,
-              {
-                icon: /* @__PURE__ */ jsx2(Zap, { className: iconClass, style: iconStyle }),
-                label: "Barge-in threshold",
-                value: settings.bargeInThreshold * 100,
-                displayValue: bargeInLabel(settings.bargeInThreshold),
-                min: 40,
-                max: 90,
-                step: 5,
-                onChange: (v) => updateSetting("bargeInThreshold", v / 100)
-              }
-            ),
-            /* @__PURE__ */ jsx2(Divider, {}),
-            /* @__PURE__ */ jsx2(
-              SelectSetting,
-              {
-                icon: /* @__PURE__ */ jsx2(Minimize2, { className: iconClass, style: iconStyle }),
-                label: "Auto-collapse",
-                value: String(settings.panelCollapseTimeoutMs),
-                onChange: (v) => updateSetting("panelCollapseTimeoutMs", Number(v)),
-                options: [
-                  { value: "120000", label: "2 min" },
-                  { value: "300000", label: "5 min" },
-                  { value: "600000", label: "10 min" },
-                  { value: "0", label: "Never" }
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs(SettingsSection, { title: "Voice Output", children: [
-            /* @__PURE__ */ jsx2(
-              ToggleSetting,
-              {
-                icon: /* @__PURE__ */ jsx2(AudioLines, { className: iconClass, style: iconStyle }),
-                label: "Text-to-speech",
-                description: "Speak responses aloud",
-                checked: settings.ttsEnabled,
-                onChange: (v) => updateSetting("ttsEnabled", v)
-              }
-            ),
-            /* @__PURE__ */ jsx2(Divider, {}),
-            /* @__PURE__ */ jsx2(
-              SliderSetting,
-              {
-                icon: /* @__PURE__ */ jsx2(Volume2, { className: iconClass, style: iconStyle }),
-                label: "Volume",
-                value: settings.volume * 100,
-                displayValue: `${Math.round(settings.volume * 100)}%`,
-                min: 0,
-                max: 100,
-                step: 1,
-                onChange: (v) => {
-                  updateSetting("volume", v / 100);
-                  onVolumeChange?.(v / 100);
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx2(Divider, {}),
-            /* @__PURE__ */ jsx2(
-              SliderSetting,
-              {
-                icon: /* @__PURE__ */ jsx2(Gauge, { className: iconClass, style: iconStyle }),
-                label: "Speed",
-                value: settings.playbackSpeed * 100,
-                displayValue: `${settings.playbackSpeed.toFixed(2)}x`,
-                min: 75,
-                max: 150,
-                step: 5,
-                onChange: (v) => updateSetting("playbackSpeed", v / 100)
-              }
-            ),
-            /* @__PURE__ */ jsx2(Divider, {}),
-            /* @__PURE__ */ jsx2(
-              SliderSetting,
-              {
-                icon: /* @__PURE__ */ jsx2(Sparkles, { className: iconClass, style: iconStyle }),
-                label: "Expressiveness",
-                value: settings.expressiveness * 100,
-                displayValue: expressivenessLabel(settings.expressiveness),
-                min: 10,
-                max: 60,
-                step: 5,
-                onChange: (v) => updateSetting("expressiveness", v / 100)
-              }
-            ),
-            /* @__PURE__ */ jsx2(Divider, {}),
-            /* @__PURE__ */ jsx2(
-              SelectSetting,
-              {
-                icon: /* @__PURE__ */ jsx2(MessageSquare, { className: iconClass, style: iconStyle }),
-                label: "Response length",
-                value: String(settings.responseLength),
-                onChange: (v) => updateSetting("responseLength", Number(v)),
-                options: [
-                  { value: "30", label: "Brief" },
-                  { value: "60", label: "Normal" },
-                  { value: "100", label: "Detailed" }
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs(SettingsSection, { title: "Developer", children: [
-            /* @__PURE__ */ jsx2(
-              ToggleSetting,
-              {
-                icon: /* @__PURE__ */ jsx2(Activity, { className: iconClass, style: iconStyle }),
-                label: "Pipeline metrics",
-                description: "Show STT / LLM / TTS timings",
-                checked: settings.showPipelineMetrics,
-                onChange: (v) => updateSetting("showPipelineMetrics", v)
-              }
-            ),
-            /* @__PURE__ */ jsx2(Divider, {}),
-            /* @__PURE__ */ jsx2(
-              SelectSetting,
-              {
-                icon: /* @__PURE__ */ jsx2(EyeOff, { className: iconClass, style: iconStyle }),
-                label: "Auto-hide metrics",
-                value: String(settings.pipelineMetricsAutoHideMs),
-                onChange: (v) => updateSetting("pipelineMetricsAutoHideMs", Number(v)),
-                options: [
-                  { value: "5000", label: "5s" },
-                  { value: "8000", label: "8s" },
-                  { value: "15000", label: "15s" },
-                  { value: "0", label: "Never" }
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx2(Divider, {}),
-            /* @__PURE__ */ jsx2(
-              SelectSetting,
-              {
-                icon: /* @__PURE__ */ jsx2(Mic, { className: iconClass, style: iconStyle }),
-                label: "STT timeout",
-                value: String(settings.sttTimeoutMs),
-                onChange: (v) => updateSetting("sttTimeoutMs", Number(v)),
-                options: [
-                  { value: "10000", label: "10s" },
-                  { value: "15000", label: "15s" },
-                  { value: "30000", label: "30s" }
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx2(Divider, {}),
-            /* @__PURE__ */ jsx2(
-              SelectSetting,
-              {
-                icon: /* @__PURE__ */ jsx2(AudioLines, { className: iconClass, style: iconStyle }),
-                label: "TTS timeout",
-                value: String(settings.ttsTimeoutMs),
-                onChange: (v) => updateSetting("ttsTimeoutMs", Number(v)),
-                options: [
-                  { value: "30000", label: "30s" },
-                  { value: "55000", label: "55s" },
-                  { value: "90000", label: "90s" }
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx2(Divider, {}),
-            /* @__PURE__ */ jsx2(
-              SelectSetting,
-              {
-                icon: /* @__PURE__ */ jsx2(Sparkles, { className: iconClass, style: iconStyle }),
-                label: "LLM timeout",
-                value: String(settings.llmTimeoutMs),
-                onChange: (v) => updateSetting("llmTimeoutMs", Number(v)),
-                options: [
-                  { value: "10000", label: "10s" },
-                  { value: "20000", label: "20s" },
-                  { value: "30000", label: "30s" },
-                  { value: "60000", label: "60s" }
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx2(Divider, {}),
-            /* @__PURE__ */ jsx2(
-              SelectSetting,
-              {
-                icon: /* @__PURE__ */ jsx2(Signal, { className: iconClass, style: iconStyle }),
-                label: "Min audio level",
-                value: String(settings.minAudioRms),
-                onChange: (v) => updateSetting("minAudioRms", Number(v)),
-                options: [
-                  { value: "0.01", label: "Sensitive" },
-                  { value: "0.02", label: "Default" },
-                  { value: "0.035", label: "Moderate" },
-                  { value: "0.05", label: "Strict" }
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx2(SettingsSection, { title: "Info", last: true, children: /* @__PURE__ */ jsxs("div", { className: "py-3 flex items-start gap-3", children: [
-            /* @__PURE__ */ jsx2(Info, { className: iconClass, style: { ...iconStyle, marginTop: 2 } }),
-            /* @__PURE__ */ jsx2("div", { className: "space-y-1 text-xs text-neutral-500", children: /* @__PURE__ */ jsxs("div", { children: [
-              "VAD Threshold:",
-              " ",
-              /* @__PURE__ */ jsx2("span", { className: "font-medium text-neutral-700", children: VAD.positiveSpeechThreshold })
-            ] }) })
-          ] }) })
-        ] })
-      ]
-    }
-  );
-}
-function SettingsSection({
-  title,
-  children,
-  last
-}) {
-  return /* @__PURE__ */ jsxs("div", { style: { borderBottom: last ? "none" : "1px solid #e5e7eb" }, children: [
-    /* @__PURE__ */ jsx2(
-      "div",
-      {
-        className: "px-4 pt-4 pb-1 text-[11px] font-semibold uppercase tracking-wider",
-        style: { color: "#9ca3af" },
-        children: title
-      }
-    ),
-    /* @__PURE__ */ jsx2("div", { className: "px-4", children })
-  ] });
-}
-function Divider() {
-  return /* @__PURE__ */ jsx2("div", { style: { height: 1, backgroundColor: "#f3f4f6" } });
-}
-
-export {
-  VoiceSettingsProvider,
-  useVoiceSettings,
-  VoiceSettingsView
-};
-//# sourceMappingURL=chunk-MUFUZ3TH.js.map