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

package/dist/chunk-BFDEQ5XG.js

@@ -0,0 +1,1238 @@
+// src/components/VoiceSettingsView.tsx
+import { useState as useState3 } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import {
+  ArrowLeft,
+  RotateCcw,
+  Volume2,
+  Gauge,
+  AudioLines,
+  Sparkles,
+  Mic,
+  Timer,
+  MessageSquare,
+  Activity,
+  Cpu,
+  EyeOff,
+  Ear,
+  Clock,
+  Zap,
+  Minimize2,
+  Signal,
+  History,
+  ChevronDown,
+  User,
+  MessageCircle,
+  Headphones,
+  SlidersHorizontal,
+  Wrench
+} 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,
+  DEFAULT_MAX_HISTORY_MESSAGES
+} 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,
+  maxHistoryMessages: DEFAULT_MAX_HISTORY_MESSAGES
+};
+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 as useSiteConfig2 } from "@unctad-ai/voice-agent-core";
+
+// src/components/PersonaSettings.tsx
+import { useState as useState2, useRef as useRef2, useEffect } from "react";
+import { usePersonaContext, useSiteConfig } from "@unctad-ai/voice-agent-core";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function PersonaSettings() {
+  const config = useSiteConfig();
+  if (!config.personaEndpoint) return null;
+  return /* @__PURE__ */ jsx2(PersonaSettingsInner, {});
+}
+function PersonaSettingsInner() {
+  const config = useSiteConfig();
+  const persona = usePersonaContext();
+  if (!persona) return null;
+  const { persona: data, isLoaded, updateName, uploadAvatar, uploadVoice, deleteVoice, setActiveVoice, previewVoice } = persona;
+  if (!isLoaded) {
+    return /* @__PURE__ */ jsx2("div", { style: { padding: 16, fontSize: 13, color: "#9ca3af", fontFamily: "inherit" }, children: "Loading persona settings..." });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, fontFamily: "inherit" }, children: [
+    /* @__PURE__ */ jsx2(AvatarSection, { avatarUrl: config.avatarUrl, name: config.copilotName, onUpload: uploadAvatar }),
+    /* @__PURE__ */ jsx2(NameSection, { name: config.copilotName, onSave: updateName, primaryColor: config.colors.primary }),
+    /* @__PURE__ */ jsx2(
+      VoiceSection,
+      {
+        voices: data?.voices ?? [],
+        activeVoiceId: data?.activeVoiceId ?? "",
+        onUpload: uploadVoice,
+        onDelete: deleteVoice,
+        onSelect: setActiveVoice,
+        onPreview: previewVoice,
+        primaryColor: config.colors.primary
+      }
+    )
+  ] });
+}
+function AvatarSection({ avatarUrl, name, onUpload }) {
+  const [uploading, setUploading] = useState2(false);
+  const [hovered, setHovered] = useState2(false);
+  const [imgError, setImgError] = useState2(false);
+  const inputRef = useRef2(null);
+  const initial = (name || "?")[0].toUpperCase();
+  const handleFile = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploading(true);
+    try {
+      await onUpload(file);
+      setImgError(false);
+    } catch (err) {
+      console.error("Avatar upload failed:", err);
+    } finally {
+      setUploading(false);
+    }
+  };
+  const showImage = avatarUrl && !imgError;
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, paddingTop: 4, paddingBottom: 4 }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: () => !uploading && inputRef.current?.click(),
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        style: {
+          position: "relative",
+          width: 44,
+          height: 44,
+          borderRadius: 9999,
+          overflow: "hidden",
+          backgroundColor: "#e5e7eb",
+          flexShrink: 0,
+          cursor: uploading ? "wait" : "pointer"
+        },
+        children: [
+          showImage ? /* @__PURE__ */ jsx2(
+            "img",
+            {
+              src: avatarUrl,
+              alt: "",
+              onError: () => setImgError(true),
+              style: { width: "100%", height: "100%", objectFit: "cover" }
+            }
+          ) : /* @__PURE__ */ jsx2("div", { style: {
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "#6b7280",
+            fontSize: 16,
+            fontWeight: 600
+          }, children: initial }),
+          hovered && !uploading && /* @__PURE__ */ jsx2("div", { style: {
+            position: "absolute",
+            inset: 0,
+            backgroundColor: "rgba(0,0,0,0.35)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "#fff",
+            fontSize: 9,
+            fontWeight: 600,
+            letterSpacing: "0.02em"
+          }, children: "Edit" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx2("div", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Avatar" }),
+      /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, color: "#6b7280" }, children: uploading ? "Uploading..." : "Click to change" })
+    ] }),
+    /* @__PURE__ */ jsx2("input", { ref: inputRef, type: "file", accept: "image/png,image/jpeg,image/webp", onChange: handleFile, style: { display: "none" } })
+  ] });
+}
+function NameSection({ name, onSave, primaryColor }) {
+  const [value, setValue] = useState2(name);
+  const [saving, setSaving] = useState2(false);
+  const [inputFocused, setInputFocused] = useState2(false);
+  const [saveHovered, setSaveHovered] = useState2(false);
+  const dirty = value !== name;
+  useEffect(() => {
+    setValue(name);
+  }, [name]);
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await onSave(value);
+    } catch (err) {
+      console.error("Name update failed:", err);
+    } finally {
+      setSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6, paddingTop: 4, paddingBottom: 4 }, children: [
+    /* @__PURE__ */ jsx2("span", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Name" }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "text",
+          value,
+          onChange: (e) => setValue(e.target.value),
+          onFocus: () => setInputFocused(true),
+          onBlur: () => setInputFocused(false),
+          maxLength: 30,
+          style: {
+            flex: 1,
+            fontSize: 13,
+            paddingLeft: 10,
+            paddingRight: 10,
+            paddingTop: 6,
+            paddingBottom: 6,
+            borderRadius: 8,
+            border: `1px solid ${inputFocused ? "#9ca3af" : "#e5e7eb"}`,
+            backgroundColor: "#fff",
+            outline: "none",
+            fontFamily: "inherit",
+            transition: "border-color 0.15s"
+          }
+        }
+      ),
+      dirty && /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: handleSave,
+          disabled: saving,
+          onMouseEnter: () => setSaveHovered(true),
+          onMouseLeave: () => setSaveHovered(false),
+          style: {
+            fontSize: 12,
+            fontWeight: 500,
+            paddingLeft: 12,
+            paddingRight: 12,
+            paddingTop: 6,
+            paddingBottom: 6,
+            borderRadius: 8,
+            border: "none",
+            backgroundColor: saveHovered ? primaryColor : "#1f2937",
+            color: "#fff",
+            cursor: saving ? "default" : "pointer",
+            opacity: saving ? 0.5 : 1,
+            transition: "background-color 0.15s",
+            fontFamily: "inherit"
+          },
+          children: saving ? "Saving..." : "Save"
+        }
+      )
+    ] })
+  ] });
+}
+function VoiceSection({ voices, activeVoiceId, onUpload, onDelete, onSelect, onPreview, primaryColor }) {
+  const [uploading, setUploading] = useState2(false);
+  const [uploadName, setUploadName] = useState2("");
+  const [showUpload, setShowUpload] = useState2(false);
+  const [previewing, setPreviewing] = useState2(null);
+  const inputRef = useRef2(null);
+  const fileRef = useRef2(null);
+  const handleFileSelect = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    fileRef.current = file;
+    setUploadName(file.name.replace(/\.wav$/i, ""));
+    setShowUpload(true);
+  };
+  const handleUpload = async () => {
+    if (!fileRef.current || !uploadName) return;
+    setUploading(true);
+    try {
+      await onUpload(fileRef.current, uploadName);
+      setShowUpload(false);
+      setUploadName("");
+      fileRef.current = null;
+    } catch (err) {
+      console.error("Voice upload failed:", err);
+    } finally {
+      setUploading(false);
+    }
+  };
+  const handlePreview = async (voiceId) => {
+    setPreviewing(voiceId);
+    try {
+      const buffer = await onPreview(voiceId, "Hello, I am your AI assistant. How can I help you today?");
+      const blob = new Blob([buffer], { type: "audio/wav" });
+      const url = URL.createObjectURL(blob);
+      const audio = new Audio(url);
+      audio.onended = () => {
+        URL.revokeObjectURL(url);
+        setPreviewing(null);
+      };
+      audio.play();
+    } catch (err) {
+      console.error("Preview failed:", err);
+      setPreviewing(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, paddingTop: 4, paddingBottom: 4 }, children: [
+    /* @__PURE__ */ jsx2("span", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Voice" }),
+    voices.length === 0 && /* @__PURE__ */ jsx2("p", { style: { fontSize: 11, color: "#9ca3af", margin: 0 }, children: "No voices configured. Upload a WAV sample to enable voice cloning." }),
+    voices.map((v) => /* @__PURE__ */ jsx2(
+      VoiceRow,
+      {
+        voice: v,
+        isActive: v.id === activeVoiceId,
+        isPreviewing: previewing === v.id,
+        onSelect: () => onSelect(v.id),
+        onPreview: () => handlePreview(v.id),
+        onDelete: () => onDelete(v.id),
+        primaryColor
+      },
+      v.id
+    )),
+    showUpload ? /* @__PURE__ */ jsx2(
+      UploadForm,
+      {
+        uploadName,
+        uploading,
+        onNameChange: setUploadName,
+        onUpload: handleUpload,
+        onCancel: () => {
+          setShowUpload(false);
+          fileRef.current = null;
+        },
+        primaryColor
+      }
+    ) : /* @__PURE__ */ jsx2(
+      UploadButton,
+      {
+        disabled: voices.length >= 10,
+        onClick: () => inputRef.current?.click()
+      }
+    ),
+    /* @__PURE__ */ jsx2("input", { ref: inputRef, type: "file", accept: "audio/wav", onChange: handleFileSelect, style: { display: "none" } })
+  ] });
+}
+function VoiceRow({ voice, isActive, isPreviewing, onSelect, onPreview, onDelete, primaryColor }) {
+  const [previewHovered, setPreviewHovered] = useState2(false);
+  const [deleteHovered, setDeleteHovered] = useState2(false);
+  return /* @__PURE__ */ jsxs("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    paddingLeft: 10,
+    paddingRight: 10,
+    paddingTop: 8,
+    paddingBottom: 8,
+    borderRadius: 8,
+    border: `1px solid ${isActive ? "#9ca3af" : "#e5e7eb"}`,
+    backgroundColor: isActive ? "#f9fafb" : "#fff",
+    fontSize: 13
+  }, children: [
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "radio",
+        name: "active-voice",
+        checked: isActive,
+        onChange: onSelect,
+        style: { accentColor: primaryColor }
+      }
+    ),
+    /* @__PURE__ */ jsx2("span", { style: { flex: 1 }, children: voice.name }),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        onClick: onPreview,
+        disabled: isPreviewing,
+        onMouseEnter: () => setPreviewHovered(true),
+        onMouseLeave: () => setPreviewHovered(false),
+        style: {
+          fontSize: 11,
+          color: previewHovered ? "#374151" : "#6b7280",
+          background: "none",
+          border: "none",
+          cursor: isPreviewing ? "default" : "pointer",
+          opacity: isPreviewing ? 0.5 : 1,
+          fontFamily: "inherit",
+          transition: "color 0.15s"
+        },
+        children: isPreviewing ? "Playing..." : "Preview"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        onClick: onDelete,
+        onMouseEnter: () => setDeleteHovered(true),
+        onMouseLeave: () => setDeleteHovered(false),
+        style: {
+          fontSize: 11,
+          color: deleteHovered ? "#b91c1c" : "#ef4444",
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          fontFamily: "inherit",
+          transition: "color 0.15s"
+        },
+        children: "Delete"
+      }
+    )
+  ] });
+}
+function UploadForm({ uploadName, uploading, onNameChange, onUpload, onCancel, primaryColor }) {
+  const [uploadHovered, setUploadHovered] = useState2(false);
+  const [cancelHovered, setCancelHovered] = useState2(false);
+  return /* @__PURE__ */ jsxs("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    padding: 10,
+    borderRadius: 6,
+    border: "1px solid #e5e7eb",
+    backgroundColor: "#f9fafb"
+  }, children: [
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "text",
+        value: uploadName,
+        onChange: (e) => onNameChange(e.target.value),
+        placeholder: "Voice name",
+        style: {
+          fontSize: 13,
+          paddingLeft: 10,
+          paddingRight: 10,
+          paddingTop: 6,
+          paddingBottom: 6,
+          borderRadius: 6,
+          border: "1px solid #e5e7eb",
+          outline: "none",
+          fontFamily: "inherit"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: onUpload,
+          disabled: uploading || !uploadName,
+          onMouseEnter: () => setUploadHovered(true),
+          onMouseLeave: () => setUploadHovered(false),
+          style: {
+            fontSize: 11,
+            paddingLeft: 10,
+            paddingRight: 10,
+            paddingTop: 4,
+            paddingBottom: 4,
+            borderRadius: 6,
+            border: "none",
+            backgroundColor: uploadHovered ? primaryColor : "#1f2937",
+            color: "#fff",
+            cursor: uploading || !uploadName ? "default" : "pointer",
+            opacity: uploading || !uploadName ? 0.5 : 1,
+            fontFamily: "inherit",
+            transition: "background-color 0.15s"
+          },
+          children: uploading ? "Processing (~8s)..." : "Upload"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: onCancel,
+          onMouseEnter: () => setCancelHovered(true),
+          onMouseLeave: () => setCancelHovered(false),
+          style: {
+            fontSize: 11,
+            paddingLeft: 10,
+            paddingRight: 10,
+            paddingTop: 4,
+            paddingBottom: 4,
+            borderRadius: 6,
+            border: "1px solid #e5e7eb",
+            backgroundColor: cancelHovered ? "#f9fafb" : "transparent",
+            cursor: "pointer",
+            fontFamily: "inherit",
+            transition: "background-color 0.15s"
+          },
+          children: "Cancel"
+        }
+      )
+    ] })
+  ] });
+}
+function UploadButton({ disabled, onClick }) {
+  const [hovered, setHovered] = useState2(false);
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      onClick,
+      disabled,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        fontSize: 11,
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingTop: 6,
+        paddingBottom: 6,
+        borderRadius: 8,
+        border: "1px dashed #d1d5db",
+        backgroundColor: hovered && !disabled ? "#f9fafb" : "#fff",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        transition: "background-color 0.15s",
+        fontFamily: "inherit"
+      },
+      children: "+ Upload voice sample (WAV, max 30s)"
+    }
+  );
+}
+
+// src/components/VoiceSettingsView.tsx
+import { jsx as jsx3, jsxs as jsxs2 } 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";
+}
+var sliderStylesInjected = false;
+function ensureSliderStyles() {
+  if (sliderStylesInjected || typeof document === "undefined") return;
+  sliderStylesInjected = true;
+  const style = document.createElement("style");
+  style.textContent = `
+    input[type="range"].voice-slider {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 100%;
+      height: 4px;
+      border-radius: 2px;
+      background: #e5e7eb;
+      outline: none;
+      cursor: pointer;
+      margin: 6px 0;
+    }
+    input[type="range"].voice-slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: var(--voice-settings-accent, #DB2129);
+      border: 2px solid #fff;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+      cursor: pointer;
+      transition: transform 0.1s ease;
+      margin-top: -6px;
+    }
+    input[type="range"].voice-slider::-webkit-slider-thumb:hover {
+      transform: scale(1.15);
+    }
+    input[type="range"].voice-slider::-moz-range-thumb {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: var(--voice-settings-accent, #DB2129);
+      border: 2px solid #fff;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+      cursor: pointer;
+    }
+    input[type="range"].voice-slider::-webkit-slider-runnable-track {
+      height: 4px;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+    }
+    input[type="range"].voice-slider::-moz-range-track {
+      height: 4px;
+      border-radius: 2px;
+      background: #e5e7eb;
+    }
+  `;
+  document.head.appendChild(style);
+}
+function SliderSetting({
+  icon,
+  label,
+  value,
+  displayValue,
+  min,
+  max,
+  step,
+  onChange
+}) {
+  ensureSliderStyles();
+  const pct = (value - min) / (max - min) * 100;
+  return /* @__PURE__ */ jsxs2("div", { style: { paddingTop: 12, paddingBottom: 12, display: "flex", flexDirection: "column", gap: 10 }, children: [
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+      icon,
+      /* @__PURE__ */ jsx3("span", { style: { flex: 1, fontSize: 13, fontWeight: 500, color: "#111827" }, children: label }),
+      /* @__PURE__ */ jsx3("span", { style: { fontSize: 11, fontWeight: 500, fontVariantNumeric: "tabular-nums", color: "var(--voice-settings-accent, #DB2129)" }, children: displayValue })
+    ] }),
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type: "range",
+        className: "voice-slider",
+        value,
+        min,
+        max,
+        step,
+        onChange: (e) => onChange(Number(e.target.value)),
+        style: {
+          background: `linear-gradient(to right, var(--voice-settings-accent, #DB2129) 0%, var(--voice-settings-accent, #DB2129) ${pct}%, #e5e7eb ${pct}%, #e5e7eb 100%)`
+        }
+      }
+    )
+  ] });
+}
+function ToggleSetting({
+  icon,
+  label,
+  description,
+  checked,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs2("label", { style: { paddingTop: 12, paddingBottom: 12, display: "flex", alignItems: "center", gap: 12, cursor: "pointer" }, children: [
+    icon,
+    /* @__PURE__ */ jsxs2("div", { style: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx3("div", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: label }),
+      /* @__PURE__ */ jsx3("div", { style: { fontSize: 11, color: "#6b7280" }, children: description })
+    ] }),
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        role: "switch",
+        "aria-checked": checked,
+        onClick: () => onChange(!checked),
+        style: {
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "center",
+          width: 44,
+          height: 24,
+          borderRadius: 9999,
+          backgroundColor: checked ? "var(--voice-settings-accent, #DB2129)" : "#d1d5db",
+          border: "none",
+          padding: 0,
+          cursor: "pointer",
+          transition: "background-color 0.2s",
+          flexShrink: 0
+        },
+        children: /* @__PURE__ */ jsx3(
+          "span",
+          {
+            style: {
+              display: "inline-block",
+              width: 20,
+              height: 20,
+              borderRadius: 9999,
+              backgroundColor: "#fff",
+              boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
+              transition: "transform 0.2s",
+              transform: checked ? "translateX(22px)" : "translateX(2px)"
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+function SelectSetting({
+  icon,
+  label,
+  value,
+  onChange,
+  options
+}) {
+  return /* @__PURE__ */ jsxs2("div", { style: { paddingTop: 12, paddingBottom: 12, display: "flex", alignItems: "center", gap: 12 }, children: [
+    icon,
+    /* @__PURE__ */ jsx3("span", { style: { flex: 1, fontSize: 13, fontWeight: 500, color: "#111827" }, children: label }),
+    /* @__PURE__ */ jsx3(
+      "select",
+      {
+        value,
+        onChange: (e) => onChange(e.target.value),
+        onMouseEnter: (e) => {
+          e.currentTarget.style.borderColor = "#d1d5db";
+          e.currentTarget.style.backgroundColor = "#f3f4f6";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.borderColor = "#e5e7eb";
+          e.currentTarget.style.backgroundColor = "#f9fafb";
+        },
+        onFocus: (e) => {
+          e.currentTarget.style.borderColor = "#9ca3af";
+        },
+        onBlur: (e) => {
+          e.currentTarget.style.borderColor = "#e5e7eb";
+        },
+        style: {
+          height: 32,
+          fontSize: 12,
+          fontWeight: 500,
+          color: "#374151",
+          borderRadius: 9999,
+          border: "1px solid #e5e7eb",
+          backgroundColor: "#f9fafb",
+          paddingLeft: 12,
+          paddingRight: 28,
+          outline: "none",
+          WebkitAppearance: "none",
+          appearance: "none",
+          cursor: "pointer",
+          transition: "border-color 0.15s, background-color 0.15s",
+          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__ */ jsx3("option", { value: opt.value, children: opt.label }, opt.value))
+      }
+    )
+  ] });
+}
+function VoiceSettingsView({ onBack, onVolumeChange }) {
+  const { settings, updateSetting, resetSettings } = useVoiceSettings();
+  const config = useSiteConfig2();
+  const { colors } = config;
+  const [openSection, setOpenSection] = useState3(null);
+  const iconStyle = { width: 16, height: 16, flexShrink: 0, color: colors.primary };
+  const sectionIconStyle = { width: 16, height: 16, flexShrink: 0, color: colors.primary };
+  const sectionProps = (id) => ({
+    open: openSection === id,
+    onToggle: () => setOpenSection(openSection === id ? null : id)
+  });
+  return /* @__PURE__ */ jsxs2(
+    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] },
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        flexDirection: "column",
+        zIndex: 10,
+        borderRadius: "inherit",
+        backgroundColor: "#f9fafb",
+        fontFamily: "inherit",
+        "--voice-settings-accent": colors.primary
+      },
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: { display: "flex", alignItems: "center", gap: 10, flexShrink: 0, paddingLeft: 16, paddingRight: 16, height: 56, borderBottom: "1px solid #e5e7eb" },
+            children: [
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  onClick: onBack,
+                  style: { width: 32, height: 32, borderRadius: 9999, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", transition: "color 0.15s", color: "#6b7280", background: "none", border: "none" },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.color = "#111827";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.color = "#6b7280";
+                  },
+                  "aria-label": "Back to conversation",
+                  children: /* @__PURE__ */ jsx3(ArrowLeft, { style: { width: 16, height: 16 } })
+                }
+              ),
+              /* @__PURE__ */ jsx3("span", { style: { flex: 1, fontSize: 13, fontWeight: 600, color: "#111827" }, children: "Settings" }),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  onClick: resetSettings,
+                  style: { width: 32, height: 32, borderRadius: 9999, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", transition: "color 0.15s", color: "#9ca3af", background: "none", border: "none" },
+                  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__ */ jsx3(RotateCcw, { style: { width: 14, height: 14 } })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { style: { flex: 1, minHeight: 0, overflowY: "auto" }, children: [
+          config.personaEndpoint && /* @__PURE__ */ jsx3(SettingsSection, { title: "Persona", icon: /* @__PURE__ */ jsx3(User, { style: sectionIconStyle }), ...sectionProps("persona"), children: /* @__PURE__ */ jsx3(PersonaSettings, {}) }),
+          /* @__PURE__ */ jsxs2(SettingsSection, { title: "Conversation", icon: /* @__PURE__ */ jsx3(MessageCircle, { style: sectionIconStyle }), ...sectionProps("conversation"), children: [
+            /* @__PURE__ */ jsx3(
+              SelectSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(MessageSquare, { 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__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsx3(
+              SelectSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(History, { style: iconStyle }),
+                label: "Chat memory",
+                value: String(settings.maxHistoryMessages),
+                onChange: (v) => updateSetting("maxHistoryMessages", Number(v)),
+                options: [
+                  { value: "10", label: "10 msgs" },
+                  { value: "20", label: "20 msgs" },
+                  { value: "30", label: "30 msgs" },
+                  { value: "40", label: "40 msgs" }
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs2(SettingsSection, { title: "Listening", icon: /* @__PURE__ */ jsx3(Headphones, { style: sectionIconStyle }), ...sectionProps("listening"), children: [
+            /* @__PURE__ */ jsx3(
+              ToggleSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(Mic, { style: iconStyle }),
+                label: "Auto-listen",
+                description: "Start mic when panel opens",
+                checked: settings.autoListen,
+                onChange: (v) => updateSetting("autoListen", v)
+              }
+            ),
+            /* @__PURE__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsx3(
+              SliderSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(Ear, { 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__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsx3(
+              SelectSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(Clock, { 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__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsx3(
+              SliderSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(Zap, { 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__ */ jsxs2(SettingsSection, { title: "Speaking", icon: /* @__PURE__ */ jsx3(Volume2, { style: sectionIconStyle }), ...sectionProps("speaking"), children: [
+            /* @__PURE__ */ jsx3(
+              ToggleSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(AudioLines, { style: iconStyle }),
+                label: "Text-to-speech",
+                description: "Speak responses aloud",
+                checked: settings.ttsEnabled,
+                onChange: (v) => updateSetting("ttsEnabled", v)
+              }
+            ),
+            /* @__PURE__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsx3(
+              SliderSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(Volume2, { 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__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsx3(
+              SliderSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(Gauge, { 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__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsx3(
+              SliderSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(Sparkles, { 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__ */ jsxs2(SettingsSection, { title: "Behavior", icon: /* @__PURE__ */ jsx3(SlidersHorizontal, { style: sectionIconStyle }), ...sectionProps("behavior"), children: [
+            /* @__PURE__ */ jsx3(
+              SelectSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(Timer, { 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__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsx3(
+              SelectSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(Minimize2, { 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__ */ jsxs2(SettingsSection, { title: "Developer", icon: /* @__PURE__ */ jsx3(Wrench, { style: sectionIconStyle }), ...sectionProps("developer"), last: true, children: [
+            /* @__PURE__ */ jsx3(
+              ToggleSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(Activity, { style: iconStyle }),
+                label: "Pipeline metrics",
+                description: "Show STT / LLM / TTS timings",
+                checked: settings.showPipelineMetrics,
+                onChange: (v) => updateSetting("showPipelineMetrics", v)
+              }
+            ),
+            /* @__PURE__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsx3(
+              SelectSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(EyeOff, { 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__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsx3(
+              SelectSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(Mic, { 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__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsx3(
+              SelectSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(AudioLines, { 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__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsx3(
+              SelectSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(Cpu, { 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__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsx3(
+              SelectSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(Signal, { 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__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsxs2("div", { style: { paddingTop: 8, paddingBottom: 4, fontSize: 11, color: "#9ca3af" }, children: [
+              "VAD Threshold: ",
+              /* @__PURE__ */ jsx3("span", { style: { fontWeight: 500, color: "#6b7280" }, children: VAD.positiveSpeechThreshold })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function SettingsSection({
+  title,
+  icon,
+  children,
+  last,
+  open = false,
+  onToggle
+}) {
+  const [hovered, setHovered] = useState3(false);
+  return /* @__PURE__ */ jsxs2("div", { style: { borderBottom: last ? "none" : "1px solid #e5e7eb" }, children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        onClick: onToggle,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        style: {
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          gap: 10,
+          paddingLeft: 16,
+          paddingRight: 16,
+          paddingTop: 14,
+          paddingBottom: 14,
+          backgroundColor: hovered ? "#edf0f3" : open ? "#f0f2f5" : "transparent",
+          border: "none",
+          cursor: "pointer",
+          fontFamily: "inherit",
+          transition: "background-color 0.15s"
+        },
+        children: [
+          icon,
+          /* @__PURE__ */ jsx3("span", { style: {
+            flex: 1,
+            textAlign: "left",
+            fontSize: 13,
+            fontWeight: 600,
+            color: "#374151"
+          }, children: title }),
+          /* @__PURE__ */ jsx3(ChevronDown, { style: {
+            width: 14,
+            height: 14,
+            color: "#9ca3af",
+            transition: "transform 0.2s ease",
+            transform: open ? "rotate(0deg)" : "rotate(-90deg)"
+          } })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx3(AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsx3(
+      motion.div,
+      {
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { duration: 0.2, ease: [0.22, 1, 0.36, 1] },
+        style: { overflow: "hidden" },
+        children: /* @__PURE__ */ jsx3("div", { style: {
+          paddingLeft: 16,
+          paddingRight: 16,
+          paddingTop: 4,
+          paddingBottom: 12,
+          backgroundColor: "#fff",
+          borderTop: "1px solid #e5e7eb"
+        }, children })
+      }
+    ) })
+  ] });
+}
+function Divider() {
+  return /* @__PURE__ */ jsx3("div", { style: { height: 1, backgroundColor: "#f3f4f6" } });
+}
+
+export {
+  VoiceSettingsProvider,
+  useVoiceSettings,
+  PersonaSettings,
+  SliderSetting,
+  ToggleSetting,
+  SelectSetting,
+  VoiceSettingsView,
+  SettingsSection,
+  Divider
+};
+//# sourceMappingURL=chunk-BFDEQ5XG.js.map