@unctad-ai/voice-agent-ui 5.0.5 → 5.1.0

package/dist/{VoiceSettingsView-OHBSNGY7.js → VoiceSettingsView-ZONLN45Z.js}

@@ -5,7 +5,7 @@ import {
   SliderSetting,
   ToggleSetting,
   VoiceSettingsView
-} from "./chunk-UCP5K6TJ.js";
+} from "./chunk-JUEDGAZN.js";
 export {
   Divider,
   SelectSetting,
@@ -14,4 +14,4 @@ export {
   ToggleSetting,
   VoiceSettingsView as default
 };
-//# sourceMappingURL=VoiceSettingsView-OHBSNGY7.js.map
+//# sourceMappingURL=VoiceSettingsView-ZONLN45Z.js.map

package/dist/{chunk-UCP5K6TJ.js → chunk-JUEDGAZN.js}

@@ -156,8 +156,13 @@ import { VAD, useSiteConfig as useSiteConfig2, usePersonaContext as usePersonaCo
 
 // src/components/PersonaSettings.tsx
 import { useState as useState2, useRef as useRef2, useEffect, useCallback as useCallback2 } from "react";
-import { usePersonaContext, useSiteConfig } from "@unctad-ai/voice-agent-core";
+import { usePersonaContext, useSiteConfig, useVoiceRecorder } from "@unctad-ai/voice-agent-core";
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var RECORDING_PROMPTS = [
+  "Good morning. I am here to help you with your registration process today.",
+  "Could you please provide your business name and the type of license you need?",
+  "Thank you for your patience. Your application has been submitted successfully."
+];
 var LANGUAGE_OPTIONS = [
   { value: "en", label: "English" },
   { value: "fr", label: "French" },
@@ -177,6 +182,7 @@ function PersonaSettings({ adminPassword }) {
 function PersonaSettingsInner({ adminPassword }) {
   const config = useSiteConfig();
   const persona = usePersonaContext();
+  const [showRecording, setShowRecording] = useState2(false);
   if (!persona) return null;
   const { persona: data, isLoaded, uploadAvatar, uploadVoice, deleteVoice, setActiveVoice, previewVoice, updateConfig } = persona;
   const isAdmin = adminPassword !== null;
@@ -191,6 +197,23 @@ function PersonaSettingsInner({ adminPassword }) {
   if (!isLoaded) {
     return /* @__PURE__ */ jsx2("div", { style: { padding: 16, fontSize: 13, color: "#9ca3af", fontFamily: "inherit" }, children: "Loading persona settings..." });
   }
+  if (showRecording) {
+    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, fontFamily: "inherit" }, children: [
+      /* @__PURE__ */ jsx2("span", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Record voice sample" }),
+      /* @__PURE__ */ jsx2(
+        RecordingFlow,
+        {
+          onComplete: async (blob, name) => {
+            const file = new File([blob], `${name}.wav`, { type: "audio/wav" });
+            await uploadVoice(file, name, adminPassword ?? void 0);
+            setShowRecording(false);
+          },
+          onCancel: () => setShowRecording(false),
+          primaryColor: config.colors.primary
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column", gap: 12, fontFamily: "inherit" }, children: isAdmin ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2(AvatarSection, { avatarUrl: config.avatarUrl, name: config.copilotName, onUpload: (f) => uploadAvatar(f, adminPassword) }),
     /* @__PURE__ */ jsx2(NameSection, { name: config.copilotName, onSave: (n) => updateConfig({ copilotName: n }, adminPassword), primaryColor: config.colors.primary }),
@@ -203,7 +226,8 @@ function PersonaSettingsInner({ adminPassword }) {
         onDelete: (id) => deleteVoice(id, adminPassword),
         onSelect: (id) => setActiveVoice(id, adminPassword),
         onPreview: previewVoice,
-        primaryColor: config.colors.primary
+        primaryColor: config.colors.primary,
+        onRecord: () => setShowRecording(true)
       }
     ),
     /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid #e5e7eb", paddingTop: 12, display: "flex", flexDirection: "column", gap: 10 }, children: [
@@ -532,7 +556,7 @@ function NameSection({ name, onSave, primaryColor }) {
     ] })
   ] });
 }
-function VoiceSection({ voices, activeVoiceId, onUpload, onDelete, onSelect, onPreview, primaryColor, disabled }) {
+function VoiceSection({ voices, activeVoiceId, onUpload, onDelete, onSelect, onPreview, primaryColor, disabled, onRecord }) {
   const [uploading, setUploading] = useState2(false);
   const [uploadName, setUploadName] = useState2("");
   const [showUpload, setShowUpload] = useState2(false);
@@ -579,7 +603,7 @@ function VoiceSection({ voices, activeVoiceId, onUpload, onDelete, onSelect, onP
   };
   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.length === 0 && /* @__PURE__ */ jsx2("p", { style: { fontSize: 11, color: "#9ca3af", margin: 0 }, children: "No voices configured. Record or upload a WAV sample to enable voice cloning." }),
     voices.map((v) => /* @__PURE__ */ jsx2(
       VoiceRow,
       {
@@ -607,13 +631,24 @@ function VoiceSection({ voices, activeVoiceId, onUpload, onDelete, onSelect, onP
         },
         primaryColor
       }
-    ) : /* @__PURE__ */ jsx2(
-      UploadButton,
-      {
-        disabled: voices.length >= 10,
-        onClick: () => inputRef.current?.click()
-      }
-    )),
+    ) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+      onRecord && /* @__PURE__ */ jsx2(
+        DashedButton,
+        {
+          disabled: voices.length >= 10,
+          onClick: onRecord,
+          label: "Record voice sample"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        DashedButton,
+        {
+          disabled: voices.length >= 10,
+          onClick: () => inputRef.current?.click(),
+          label: "Upload WAV (max 45s)"
+        }
+      )
+    ] })),
     !disabled && /* @__PURE__ */ jsx2("input", { ref: inputRef, type: "file", accept: "audio/wav", onChange: handleFileSelect, style: { display: "none" } })
   ] });
 }
@@ -768,7 +803,7 @@ function UploadForm({ uploadName, uploading, onNameChange, onUpload, onCancel, p
     ] })
   ] });
 }
-function UploadButton({ disabled, onClick }) {
+function DashedButton({ disabled, onClick, label }) {
   const [hovered, setHovered] = useState2(false);
   return /* @__PURE__ */ jsx2(
     "button",
@@ -778,11 +813,9 @@ function UploadButton({ disabled, onClick }) {
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       style: {
+        flex: 1,
         fontSize: 11,
-        paddingLeft: 10,
-        paddingRight: 10,
-        paddingTop: 6,
-        paddingBottom: 6,
+        padding: "6px 10px",
         borderRadius: 8,
         border: "1px dashed #d1d5db",
         backgroundColor: hovered && !disabled ? "#f9fafb" : "#fff",
@@ -791,10 +824,374 @@ function UploadButton({ disabled, onClick }) {
         transition: "background-color 0.15s",
         fontFamily: "inherit"
       },
-      children: "+ Upload voice sample (WAV, max 30s)"
+      children: label
     }
   );
 }
+function RecordingFlow({ onComplete, onCancel, primaryColor }) {
+  const recorder = useVoiceRecorder();
+  const [name, setName] = useState2("Recording");
+  const [uploading, setUploading] = useState2(false);
+  useEffect(() => {
+    recorder.prepare();
+  }, []);
+  const handleUpload = async () => {
+    if (!recorder.wavBlob) return;
+    setUploading(true);
+    try {
+      await onComplete(recorder.wavBlob, name);
+    } catch (err) {
+      console.error("Voice upload failed:", err);
+    } finally {
+      setUploading(false);
+    }
+  };
+  if (recorder.loading) {
+    return /* @__PURE__ */ jsx2("div", { style: { padding: 12, fontSize: 12, color: "#6b7280", textAlign: "center", fontFamily: "inherit" }, children: "Preparing microphone..." });
+  }
+  if (recorder.error) {
+    return /* @__PURE__ */ jsxs("div", { style: {
+      padding: 12,
+      borderRadius: 8,
+      border: "1px solid #fca5a5",
+      backgroundColor: "#fef2f2",
+      fontSize: 12,
+      fontFamily: "inherit"
+    }, children: [
+      /* @__PURE__ */ jsx2("div", { style: { color: "#dc2626", marginBottom: 8 }, children: "Could not access microphone. Please check your browser permissions." }),
+      /* @__PURE__ */ jsx2("button", { onClick: onCancel, style: {
+        fontSize: 11,
+        padding: "4px 10px",
+        borderRadius: 6,
+        border: "1px solid #e5e7eb",
+        backgroundColor: "#fff",
+        cursor: "pointer",
+        fontFamily: "inherit"
+      }, children: "Cancel" })
+    ] });
+  }
+  if (recorder.state === "ready") {
+    return /* @__PURE__ */ jsxs("div", { style: {
+      padding: 12,
+      borderRadius: 10,
+      border: "1px solid #e5e7eb",
+      backgroundColor: "#f9fafb",
+      display: "flex",
+      flexDirection: "column",
+      gap: 10,
+      fontFamily: "inherit"
+    }, children: [
+      /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, color: "#6b7280" }, children: "Use a quiet room and speak naturally." }),
+      /* @__PURE__ */ jsx2(PromptSentences, {}),
+      /* @__PURE__ */ jsx2(LevelMeter, { rms: recorder.rmsLevel, active: false }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ jsxs("button", { onClick: recorder.startRecording, style: {
+          flex: 1,
+          padding: 8,
+          borderRadius: 8,
+          border: "none",
+          backgroundColor: "#dc2626",
+          color: "#fff",
+          fontSize: 12,
+          fontWeight: 500,
+          cursor: "pointer",
+          fontFamily: "inherit",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 6
+        }, children: [
+          /* @__PURE__ */ jsx2("span", { style: {
+            width: 8,
+            height: 8,
+            borderRadius: "50%",
+            background: "#fff",
+            display: "inline-block"
+          } }),
+          "Start recording"
+        ] }),
+        /* @__PURE__ */ jsx2("button", { onClick: onCancel, style: {
+          padding: "8px 12px",
+          borderRadius: 8,
+          border: "1px solid #e5e7eb",
+          backgroundColor: "#fff",
+          fontSize: 12,
+          color: "#6b7280",
+          cursor: "pointer",
+          fontFamily: "inherit"
+        }, children: "Cancel" })
+      ] })
+    ] });
+  }
+  if (recorder.state === "recording") {
+    return /* @__PURE__ */ jsxs("div", { style: {
+      padding: 12,
+      borderRadius: 10,
+      border: "1px solid #fca5a5",
+      backgroundColor: "#fef2f2",
+      display: "flex",
+      flexDirection: "column",
+      gap: 10,
+      fontFamily: "inherit"
+    }, children: [
+      /* @__PURE__ */ jsx2(PromptSentences, {}),
+      /* @__PURE__ */ jsx2(LevelMeter, { rms: recorder.rmsLevel, active: true, elapsed: recorder.elapsed, maxDuration: 45 }),
+      /* @__PURE__ */ jsxs("button", { onClick: recorder.stop, style: {
+        width: "100%",
+        padding: 8,
+        borderRadius: 8,
+        border: "none",
+        backgroundColor: "#1f2937",
+        color: "#fff",
+        fontSize: 12,
+        fontWeight: 500,
+        cursor: "pointer",
+        fontFamily: "inherit",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 6
+      }, children: [
+        /* @__PURE__ */ jsx2("span", { style: {
+          width: 8,
+          height: 8,
+          borderRadius: 2,
+          background: "#fff",
+          display: "inline-block"
+        } }),
+        "Stop recording"
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: {
+    padding: 12,
+    borderRadius: 10,
+    border: "1px solid #e5e7eb",
+    backgroundColor: "#f9fafb",
+    display: "flex",
+    flexDirection: "column",
+    gap: 10,
+    fontFamily: "inherit"
+  }, children: [
+    /* @__PURE__ */ jsx2(WaveformPreview, { blob: recorder.wavBlob, duration: recorder.elapsed }),
+    /* @__PURE__ */ jsx2(QualityBadge, { warning: recorder.qualityWarning }),
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "text",
+        value: name,
+        onChange: (e) => setName(e.target.value),
+        placeholder: "Voice name",
+        style: {
+          width: "100%",
+          fontSize: 13,
+          padding: "6px 10px",
+          borderRadius: 8,
+          border: "1px solid #e5e7eb",
+          outline: "none",
+          fontFamily: "inherit",
+          boxSizing: "border-box"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+      !recorder.qualityWarning?.blocking && /* @__PURE__ */ jsx2("button", { onClick: handleUpload, disabled: uploading || !name, style: {
+        flex: 1,
+        padding: 8,
+        borderRadius: 8,
+        border: "none",
+        backgroundColor: "#1f2937",
+        color: "#fff",
+        fontSize: 12,
+        fontWeight: 500,
+        cursor: uploading || !name ? "default" : "pointer",
+        opacity: uploading || !name ? 0.5 : 1,
+        fontFamily: "inherit"
+      }, children: uploading ? "Processing (~8s)..." : "Use this recording" }),
+      /* @__PURE__ */ jsx2("button", { onClick: recorder.reset, style: {
+        padding: "8px 12px",
+        borderRadius: 8,
+        border: "1px solid #e5e7eb",
+        backgroundColor: "#fff",
+        fontSize: 12,
+        color: "#6b7280",
+        cursor: "pointer",
+        fontFamily: "inherit"
+      }, children: "Re-record" })
+    ] })
+  ] });
+}
+function PromptSentences() {
+  return /* @__PURE__ */ jsxs("div", { style: {
+    background: "#fff",
+    border: "1px solid #e5e7eb",
+    borderRadius: 8,
+    padding: 12
+  }, children: [
+    /* @__PURE__ */ jsx2("div", { style: {
+      fontSize: 10,
+      color: "#9ca3af",
+      textTransform: "uppercase",
+      letterSpacing: "0.05em",
+      marginBottom: 8
+    }, children: "Read aloud" }),
+    RECORDING_PROMPTS.map((sentence, i) => /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: 13,
+      color: "#374151",
+      lineHeight: 1.6,
+      marginBottom: i < RECORDING_PROMPTS.length - 1 ? 6 : 0
+    }, children: [
+      i + 1,
+      ". \u201C",
+      sentence,
+      "\u201D"
+    ] }, i)),
+    /* @__PURE__ */ jsx2("div", { style: { fontSize: 10, color: "#9ca3af", marginTop: 8, fontStyle: "italic" }, children: "Pause briefly between each sentence." })
+  ] });
+}
+function LevelMeter({ rms, active, elapsed, maxDuration }) {
+  const color = active ? "#dc2626" : "#d1d5db";
+  const barCount = 8;
+  const heights = Array.from({ length: barCount }, (_, i) => {
+    const base = Math.min(1, rms * 5);
+    const variation = Math.sin(i * 1.7 + (elapsed ?? 0) * 3) * 0.3 + 0.7;
+    return 4 + base * variation * 16;
+  });
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+    /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 2, alignItems: "end", height: 20 }, children: heights.map((h, i) => /* @__PURE__ */ jsx2("div", { style: {
+      width: 3,
+      height: h,
+      backgroundColor: color,
+      borderRadius: 1,
+      transition: "height 0.1s"
+    } }, i)) }),
+    active && elapsed != null && maxDuration != null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("span", { style: { fontSize: 11, color: "#dc2626", fontWeight: 500 }, children: [
+        formatTime(elapsed),
+        " / ",
+        formatTime(maxDuration)
+      ] }),
+      /* @__PURE__ */ jsx2("span", { style: {
+        width: 6,
+        height: 6,
+        borderRadius: "50%",
+        backgroundColor: "#dc2626",
+        display: "inline-block"
+      } })
+    ] }) : /* @__PURE__ */ jsx2("span", { style: { fontSize: 11, color: "#9ca3af" }, children: "Mic ready" })
+  ] });
+}
+function formatTime(sec) {
+  const m = Math.floor(sec / 60);
+  const s = Math.floor(sec % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function WaveformPreview({ blob, duration }) {
+  const [playing, setPlaying] = useState2(false);
+  const [bars, setBars] = useState2([]);
+  const audioRef = useRef2(null);
+  const barCount = 60;
+  useEffect(() => {
+    if (!blob) return;
+    blob.arrayBuffer().then((buf) => {
+      const samples = new Int16Array(buf, 44);
+      const chunkSize = Math.max(1, Math.floor(samples.length / barCount));
+      const result = [];
+      for (let i = 0; i < barCount; i++) {
+        let maxAbs = 0;
+        const start = i * chunkSize;
+        const end = Math.min(start + chunkSize, samples.length);
+        for (let j = start; j < end; j++) {
+          const abs = Math.abs(samples[j]) / 32768;
+          if (abs > maxAbs) maxAbs = abs;
+        }
+        result.push(maxAbs);
+      }
+      setBars(result);
+    });
+  }, [blob]);
+  const handlePlay = () => {
+    if (!blob) return;
+    if (playing && audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current = null;
+      setPlaying(false);
+      return;
+    }
+    const url = URL.createObjectURL(blob);
+    const audio = new Audio(url);
+    audio.onended = () => {
+      URL.revokeObjectURL(url);
+      setPlaying(false);
+      audioRef.current = null;
+    };
+    audioRef.current = audio;
+    setPlaying(true);
+    audio.play();
+  };
+  return /* @__PURE__ */ jsxs("div", { style: {
+    background: "#fff",
+    border: "1px solid #e5e7eb",
+    borderRadius: 8,
+    padding: 12,
+    display: "flex",
+    alignItems: "center",
+    gap: 10
+  }, children: [
+    /* @__PURE__ */ jsx2("button", { onClick: handlePlay, style: {
+      width: 28,
+      height: 28,
+      borderRadius: "50%",
+      border: "none",
+      backgroundColor: "#1f2937",
+      color: "#fff",
+      fontSize: 10,
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0
+    }, children: playing ? "\u23F8" : "\u25B6" }),
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 1, alignItems: "center", height: 24 }, children: bars.map((level, i) => /* @__PURE__ */ jsx2("div", { style: {
+        width: 2,
+        height: Math.max(2, level * 22),
+        backgroundColor: "#6b7280",
+        borderRadius: 1
+      } }, i)) }),
+      /* @__PURE__ */ jsx2("div", { style: { fontSize: 10, color: "#9ca3af", marginTop: 2 }, children: formatTime(duration) })
+    ] })
+  ] });
+}
+function QualityBadge({ warning }) {
+  if (!warning) {
+    return /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 6,
+      padding: "6px 10px",
+      background: "#f0fdf4",
+      border: "1px solid #bbf7d0",
+      borderRadius: 6
+    }, children: [
+      /* @__PURE__ */ jsx2("span", { style: { color: "#16a34a", fontSize: 12 }, children: "\u2713" }),
+      /* @__PURE__ */ jsx2("span", { style: { fontSize: 11, color: "#166534" }, children: "Good quality \u2014 clear audio, low noise" })
+    ] });
+  }
+  const isBlocking = warning.blocking;
+  return /* @__PURE__ */ jsxs("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "6px 10px",
+    background: isBlocking ? "#fef2f2" : "#fffbeb",
+    border: `1px solid ${isBlocking ? "#fca5a5" : "#fde68a"}`,
+    borderRadius: 6
+  }, children: [
+    /* @__PURE__ */ jsx2("span", { style: { color: isBlocking ? "#dc2626" : "#d97706", fontSize: 12 }, children: isBlocking ? "\u2717" : "\u26A0" }),
+    /* @__PURE__ */ jsx2("span", { style: { fontSize: 11, color: isBlocking ? "#991b1b" : "#92400e" }, children: warning.message })
+  ] });
+}
 
 // src/components/VoiceSettingsView.tsx
 import { Lock, Unlock } from "lucide-react";
@@ -1505,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.0.5" })
+            /* @__PURE__ */ jsx3("span", { style: { fontWeight: 500, color: "#6b7280" }, children: "5.1.0" })
           ] })
         ] }) })
       ]
@@ -1597,4 +1994,4 @@ export {
   SettingsSection,
   Divider
 };
-//# sourceMappingURL=chunk-UCP5K6TJ.js.map
+//# sourceMappingURL=chunk-JUEDGAZN.js.map