@unctad-ai/voice-agent-ui 5.3.1 → 5.4.0

package/dist/{VoiceSettingsView-U7O5H5PC.js → VoiceSettingsView-SBAX47HO.js}

@@ -5,7 +5,7 @@ import {
   SliderSetting,
   ToggleSetting,
   VoiceSettingsView
-} from "./chunk-QXFECZAT.js";
+} from "./chunk-B46B46BD.js";
 export {
   Divider,
   SelectSetting,
@@ -14,4 +14,4 @@ export {
   ToggleSetting,
   VoiceSettingsView as default
 };
-//# sourceMappingURL=VoiceSettingsView-U7O5H5PC.js.map
+//# sourceMappingURL=VoiceSettingsView-SBAX47HO.js.map

package/dist/{chunk-QXFECZAT.js → chunk-B46B46BD.js}

@@ -1,5 +1,5 @@
 // src/components/VoiceSettingsView.tsx
-import { useState as useState3, useCallback as useCallback3 } from "react";
+import { useState as useState3, useEffect as useEffect2, useCallback as useCallback3 } from "react";
 import { motion, AnimatePresence } from "motion/react";
 import {
   ArrowLeft,
@@ -14,6 +14,7 @@ import {
   Activity,
   Cpu,
   EyeOff,
+  Info,
   Ear,
   Clock,
   Zap,
@@ -26,7 +27,10 @@ import {
   Headphones,
   SlidersHorizontal,
   Wrench,
-  Globe
+  Globe,
+  Type,
+  TextCursorInput,
+  Sparkle
 } from "lucide-react";
 
 // src/contexts/VoiceSettingsContext.tsx
@@ -163,17 +167,6 @@ var RECORDING_PROMPTS = [
   "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" },
-  { value: "es", label: "Spanish" },
-  { value: "sw", label: "Swahili" },
-  { value: "pt", label: "Portuguese" },
-  { value: "ar", label: "Arabic" },
-  { value: "zh", label: "Chinese" },
-  { value: "hi", label: "Hindi" },
-  { value: "dz", label: "Dzongkha" }
-];
 function PersonaSettings({ adminPassword }) {
   const config = useSiteConfig();
   if (!config.personaEndpoint) return null;
@@ -231,67 +224,14 @@ function PersonaSettingsInner({ adminPassword }) {
         onRecord: () => setShowRecording(true)
       }
     ),
-    /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid #e5e7eb", paddingTop: 12, display: "flex", flexDirection: "column", gap: 10 }, children: [
-      /* @__PURE__ */ jsx2("span", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Copilot settings" }),
-      /* @__PURE__ */ jsx2(
-        ColorSettingRow,
-        {
-          label: "Color",
-          value: data?.copilotColor || config.colors.primary || "#1B5E20",
-          onSave: (v) => handleSharedSave({ copilotColor: v })
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        TextSettingRow,
-        {
-          label: "Site title",
-          value: data?.siteTitle || "",
-          onSave: (v) => handleSharedSave({ siteTitle: v })
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        TextAreaSettingRow,
-        {
-          label: "Greeting",
-          value: data?.greetingMessage || "",
-          onSave: (v) => handleSharedSave({ greetingMessage: v })
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        TextAreaSettingRow,
-        {
-          label: "Farewell",
-          value: data?.farewellMessage || "",
-          onSave: (v) => handleSharedSave({ farewellMessage: v })
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        TextAreaSettingRow,
-        {
-          label: "System prompt intro",
-          value: data?.systemPromptIntro || "",
-          onSave: (v) => handleSharedSave({ systemPromptIntro: v }),
-          rows: 4
-        }
-      ),
-      /* @__PURE__ */ jsx2(SettingRow, { label: "Default language", children: /* @__PURE__ */ jsx2(
-        "select",
-        {
-          value: data?.language || "en",
-          onChange: (e) => handleSharedSave({ language: e.target.value }),
-          style: {
-            fontSize: 12,
-            borderRadius: 6,
-            border: "1px solid #e5e7eb",
-            padding: "4px 8px",
-            outline: "none",
-            fontFamily: "inherit",
-            backgroundColor: "#fff"
-          },
-          children: LANGUAGE_OPTIONS.map((l) => /* @__PURE__ */ jsx2("option", { value: l.value, children: l.label }, l.value))
-        }
-      ) })
-    ] })
+    /* @__PURE__ */ jsx2("div", { style: { borderTop: "1px solid #e5e7eb", paddingTop: 10 }, children: /* @__PURE__ */ jsx2(
+      ColorSettingRow,
+      {
+        label: "Brand color",
+        value: data?.copilotColor || config.colors.primary || "#DB2129",
+        onSave: (v) => handleSharedSave({ copilotColor: v })
+      }
+    ) })
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2(AvatarSection, { avatarUrl: config.avatarUrl, name: config.copilotName, disabled: true }),
     /* @__PURE__ */ jsxs("div", { style: { fontSize: 13, color: "#6b7280", padding: "4px 0" }, children: [
@@ -322,6 +262,7 @@ function SettingRow({ label, children }) {
 }
 function ColorSettingRow({ label, value, onSave }) {
   const [local, setLocal] = useState2(value);
+  const [focused, setFocused] = useState2(false);
   useEffect(() => {
     setLocal(value);
   }, [value]);
@@ -331,71 +272,15 @@ function ColorSettingRow({ label, value, onSave }) {
       type: "color",
       value: local,
       onChange: (e) => setLocal(e.target.value),
+      onFocus: () => setFocused(true),
       onBlur: () => {
+        setFocused(false);
         if (local !== value) onSave(local);
       },
-      style: { width: 32, height: 26, border: "1px solid #e5e7eb", borderRadius: 4, cursor: "pointer", padding: 0 }
+      style: { width: 32, height: 26, border: `1px solid ${focused ? "#9ca3af" : "#e5e7eb"}`, borderRadius: 4, cursor: "pointer", padding: 0, transition: "border-color 0.15s" }
     }
   ) });
 }
-function TextSettingRow({ label, value, onSave }) {
-  const [local, setLocal] = useState2(value);
-  useEffect(() => {
-    setLocal(value);
-  }, [value]);
-  return /* @__PURE__ */ jsx2(SettingRow, { label, children: /* @__PURE__ */ jsx2(
-    "input",
-    {
-      type: "text",
-      value: local,
-      onChange: (e) => setLocal(e.target.value),
-      onBlur: () => {
-        if (local !== value) onSave(local);
-      },
-      style: {
-        width: "100%",
-        fontSize: 12,
-        padding: "4px 8px",
-        borderRadius: 6,
-        border: "1px solid #e5e7eb",
-        outline: "none",
-        fontFamily: "inherit",
-        boxSizing: "border-box"
-      }
-    }
-  ) });
-}
-function TextAreaSettingRow({ label, value, onSave, rows = 2 }) {
-  const [local, setLocal] = useState2(value);
-  useEffect(() => {
-    setLocal(value);
-  }, [value]);
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-    /* @__PURE__ */ jsx2("span", { style: { fontSize: 12, color: "#6b7280" }, children: label }),
-    /* @__PURE__ */ jsx2(
-      "textarea",
-      {
-        value: local,
-        onChange: (e) => setLocal(e.target.value),
-        onBlur: () => {
-          if (local !== value) onSave(local);
-        },
-        rows,
-        style: {
-          width: "100%",
-          fontSize: 12,
-          padding: "6px 8px",
-          borderRadius: 6,
-          border: "1px solid #e5e7eb",
-          outline: "none",
-          fontFamily: "inherit",
-          resize: "vertical",
-          boxSizing: "border-box"
-        }
-      }
-    )
-  ] });
-}
 function AvatarSection({ avatarUrl, name, onUpload, disabled }) {
   const [uploading, setUploading] = useState2(false);
   const [hovered, setHovered] = useState2(false);
@@ -1212,7 +1097,7 @@ function bargeInLabel(v) {
   if (v >= 0.6) return "Normal";
   return "Easy";
 }
-var LANGUAGE_OPTIONS2 = [
+var LANGUAGE_OPTIONS = [
   { value: "en", label: "English" },
   { value: "fr", label: "French" },
   { value: "es", label: "Spanish" },
@@ -1424,6 +1309,92 @@ function SelectSetting({
     )
   ] });
 }
+function TextInputSetting({
+  icon,
+  label,
+  description,
+  value,
+  onSave,
+  multiline,
+  rows = 2
+}) {
+  const [local, setLocal] = useState3(value);
+  const [focused, setFocused] = useState3(false);
+  const [saveStatus, setSaveStatus] = useState3("idle");
+  useEffect2(() => {
+    setLocal(value);
+  }, [value]);
+  useEffect2(() => {
+    if (saveStatus === "saved") {
+      const t = setTimeout(() => setSaveStatus("idle"), 1500);
+      return () => clearTimeout(t);
+    }
+  }, [saveStatus]);
+  const handleBlur = async () => {
+    setFocused(false);
+    if (local !== value) {
+      const ok = await onSave(local);
+      if (typeof ok === "boolean") setSaveStatus(ok ? "saved" : "error");
+    }
+  };
+  const inputStyle = {
+    width: "100%",
+    fontSize: 12,
+    fontWeight: 500,
+    color: "#374151",
+    padding: "6px 10px",
+    borderRadius: 8,
+    border: `1px solid ${focused ? "#9ca3af" : "#e5e7eb"}`,
+    backgroundColor: "#f9fafb",
+    outline: "none",
+    fontFamily: "inherit",
+    boxSizing: "border-box",
+    resize: multiline ? "vertical" : "none",
+    transition: "border-color 0.15s"
+  };
+  return /* @__PURE__ */ jsxs2("div", { style: { paddingTop: 10, paddingBottom: 10, display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "flex-start", gap: 12 }, children: [
+      /* @__PURE__ */ jsx3("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: 16, height: 20, flexShrink: 0 }, children: icon }),
+      /* @__PURE__ */ jsxs2("div", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "baseline", gap: 6, minHeight: 20 }, children: [
+          /* @__PURE__ */ jsx3("span", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: label }),
+          /* @__PURE__ */ jsxs2(AnimatePresence, { children: [
+            saveStatus === "saved" && /* @__PURE__ */ jsx3(motion.span, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, style: { fontSize: 11, color: "#22c55e", fontWeight: 400 }, children: "Saved" }, "saved"),
+            saveStatus === "error" && /* @__PURE__ */ jsx3(motion.span, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, style: { fontSize: 11, color: "#ef4444", fontWeight: 400 }, children: "Save failed" }, "error")
+          ] })
+        ] }),
+        description && /* @__PURE__ */ jsx3("p", { style: { fontSize: 11, color: "#9ca3af", margin: "2px 0 0", lineHeight: 1.4 }, children: description })
+      ] })
+    ] }),
+    multiline ? /* @__PURE__ */ jsx3(
+      "textarea",
+      {
+        value: local,
+        onChange: (e) => {
+          setLocal(e.target.value);
+          if (saveStatus === "error") setSaveStatus("idle");
+        },
+        onFocus: () => setFocused(true),
+        onBlur: handleBlur,
+        rows,
+        style: inputStyle
+      }
+    ) : /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type: "text",
+        value: local,
+        onChange: (e) => {
+          setLocal(e.target.value);
+          if (saveStatus === "error") setSaveStatus("idle");
+        },
+        onFocus: () => setFocused(true),
+        onBlur: handleBlur,
+        style: inputStyle
+      }
+    )
+  ] });
+}
 function VoiceSettingsView({ onBack, onVolumeChange }) {
   const { settings, updateSetting, resetSettings } = useVoiceSettings();
   const config = useSiteConfig2();
@@ -1443,6 +1414,17 @@ function VoiceSettingsView({ onBack, onVolumeChange }) {
   const [passwordInput, setPasswordInput] = useState3("");
   const [authError, setAuthError] = useState3("");
   const isAdmin = adminPassword !== null;
+  const updateConfigFn = persona?.updateConfig;
+  const handleSharedSave = useCallback3(async (fields) => {
+    if (!adminPassword || !updateConfigFn) return false;
+    try {
+      await updateConfigFn(fields, adminPassword);
+      return true;
+    } catch (err) {
+      console.error("Settings save failed:", err);
+      return false;
+    }
+  }, [adminPassword, updateConfigFn]);
   const handleAdminLogin = useCallback3(async (pw) => {
     if (!persona) return;
     try {
@@ -1527,6 +1509,66 @@ function VoiceSettingsView({ onBack, onVolumeChange }) {
         ),
         /* @__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, { adminPassword }) }),
+          config.personaEndpoint && isAdmin && persona?.persona && /* @__PURE__ */ jsxs2(SettingsSection, { title: "Agent", icon: /* @__PURE__ */ jsx3(Sparkle, { style: sectionIconStyle }), ...sectionProps("agent"), children: [
+            /* @__PURE__ */ jsx3(
+              TextInputSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(Type, { style: iconStyle }),
+                label: "Portal context",
+                description: "What this portal offers \u2014 helps the AI understand the domain",
+                value: persona.persona.siteTitle || config.siteTitle || "",
+                onSave: (v) => handleSharedSave({ siteTitle: v })
+              }
+            ),
+            /* @__PURE__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsx3(
+              TextInputSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(MessageSquare, { style: iconStyle }),
+                label: "Greeting",
+                description: "Shown when the panel opens with no conversation",
+                value: persona.persona.greetingMessage || config.greetingMessage || "",
+                onSave: (v) => handleSharedSave({ greetingMessage: v })
+              }
+            ),
+            /* @__PURE__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsx3(
+              TextInputSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(TextCursorInput, { style: iconStyle }),
+                label: "Suggested prompts",
+                description: "Tappable chips in the empty state (one per line)",
+                value: persona.persona.suggestedPrompts || config.suggestedPrompts?.join("\n") || "",
+                onSave: (v) => handleSharedSave({ suggestedPrompts: v }),
+                multiline: true,
+                rows: 3
+              }
+            ),
+            /* @__PURE__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsx3(
+              TextInputSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(Info, { style: iconStyle }),
+                label: "System prompt intro",
+                description: "Prefixed to every LLM conversation. Use {name} for the agent's name.",
+                value: persona.persona.systemPromptIntro || config.systemPromptIntro || "",
+                onSave: (v) => handleSharedSave({ systemPromptIntro: v }),
+                multiline: true,
+                rows: 4
+              }
+            ),
+            /* @__PURE__ */ jsx3(Divider, {}),
+            /* @__PURE__ */ jsx3(
+              SelectSetting,
+              {
+                icon: /* @__PURE__ */ jsx3(Globe, { style: iconStyle }),
+                label: "Default language",
+                value: persona.persona.language || config.language || "en",
+                onChange: (v) => handleSharedSave({ language: v }),
+                options: LANGUAGE_OPTIONS
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxs2(SettingsSection, { title: "Conversation", icon: /* @__PURE__ */ jsx3(MessageCircle, { style: sectionIconStyle }), ...sectionProps("conversation"), children: [
             /* @__PURE__ */ jsx3(
               SelectSetting,
@@ -1567,7 +1609,7 @@ function VoiceSettingsView({ onBack, onVolumeChange }) {
                 label: "Language",
                 value: settings.language,
                 onChange: (v) => updateSetting("language", v),
-                options: LANGUAGE_OPTIONS2
+                options: LANGUAGE_OPTIONS
               }
             ),
             /* @__PURE__ */ jsx3(Divider, {}),
@@ -1816,7 +1858,7 @@ function VoiceSettingsView({ onBack, onVolumeChange }) {
           /* @__PURE__ */ jsx3(
             "input",
             {
-              type: "password",
+              type: "text",
               placeholder: "Admin password",
               value: passwordInput,
               onChange: (e) => {
@@ -1832,6 +1874,9 @@ function VoiceSettingsView({ onBack, onVolumeChange }) {
                 }
               },
               autoFocus: true,
+              autoComplete: "off",
+              "data-1p-ignore": true,
+              "data-lpignore": "true",
               style: {
                 fontSize: 11,
                 padding: "3px 8px",
@@ -1839,7 +1884,8 @@ function VoiceSettingsView({ onBack, onVolumeChange }) {
                 border: `1px solid ${authError ? "#ef4444" : "#e5e7eb"}`,
                 outline: "none",
                 fontFamily: "inherit",
-                width: 110
+                width: 110,
+                WebkitTextSecurity: "disc"
               }
             }
           ),
@@ -1903,7 +1949,7 @@ function VoiceSettingsView({ onBack, onVolumeChange }) {
           ) : /* @__PURE__ */ jsx3("span", {}),
           /* @__PURE__ */ jsxs2("span", { children: [
             "Kit v",
-            /* @__PURE__ */ jsx3("span", { style: { fontWeight: 500, color: "#6b7280" }, children: "5.3.1" })
+            /* @__PURE__ */ jsx3("span", { style: { fontWeight: 500, color: "#6b7280" }, children: "5.4.0" })
           ] })
         ] }) })
       ]
@@ -1995,4 +2041,4 @@ export {
   SettingsSection,
   Divider
 };
-//# sourceMappingURL=chunk-QXFECZAT.js.map
+//# sourceMappingURL=chunk-B46B46BD.js.map