@ssml-builder-js/ssml-editor-react 2.10.0 → 2.11.0

package/dist/index.mjs

@@ -19,6 +19,7 @@ var ssmlPresets_exports = {};
 __export(ssmlPresets_exports, {
   AUDIO_DURATION_DESCRIPTIONS: () => AUDIO_DURATION_DESCRIPTIONS,
   AUDIO_DURATION_PRESETS: () => AUDIO_DURATION_PRESETS,
+  BACKGROUND_AUDIO_DURATION_PRESETS: () => BACKGROUND_AUDIO_DURATION_PRESETS,
   BREAK_STRENGTH_PRESETS: () => BREAK_STRENGTH_PRESETS,
   BREAK_TIME_DESCRIPTIONS: () => BREAK_TIME_DESCRIPTIONS,
   BREAK_TIME_PRESETS: () => BREAK_TIME_PRESETS,
@@ -100,6 +101,9 @@ var AZURE_VOICE_STYLE_MAP = {
   ],
   "es-ES-ElviraNeural": [],
   "fil-PH-AngeloNeural": [],
+  "fil-PH-Angelo:DragonHDLatestNeural": [],
+  "fil-PH-BlessicaNeural": [],
+  "fil-PH-Blessica:DragonHDLatestNeural": [],
   "fr-FR-DeniseNeural": ["cheerful", "sad"],
   "fr-FR-HenriNeural": ["cheerful", "sad"],
   "id-ID-GadisNeural": [],
@@ -377,6 +381,7 @@ var SAY_AS_PRESETS = [
 var LANGUAGE_PRESETS = ["ja-JP", "en-US", "de-DE", "fr-FR"];
 var SILENCE_VALUE_PRESETS = ["300ms", "500ms", "1s"];
 var AUDIO_DURATION_PRESETS = ["5s", "10s", "30s"];
+var BACKGROUND_AUDIO_DURATION_PRESETS = ["0", "500", "1000", "3000", "10000"];
 var SILENCE_TYPE_PRESETS = [
   "Leading",
   "Tailing",
@@ -438,8 +443,8 @@ var SSML_ATTRIBUTE_PRESETS = {
   },
   "mstts:backgroundaudio": {
     volume: PROSODY_VOLUME_PRESETS,
-    fadein: AUDIO_DURATION_PRESETS,
-    fadeout: AUDIO_DURATION_PRESETS
+    fadein: BACKGROUND_AUDIO_DURATION_PRESETS,
+    fadeout: BACKGROUND_AUDIO_DURATION_PRESETS
   },
   silence: {
     type: SILENCE_TYPE_PRESETS,
@@ -3288,7 +3293,7 @@ var SSML_COMPLETION_SNIPPETS = [
   },
   {
     label: "mstts:backgroundaudio",
-    insertText: `<mstts:backgroundaudio src="\${1:https://example.com/audio.mp3}" volume="\${2:-3dB}" />`
+    insertText: `<mstts:backgroundaudio src="\${1:https://example.com/audio.mp3}" volume="\${2:70}" fadein="\${3:1000}" fadeout="\${4:1000}" />`
   },
   {
     label: "mstts:ttsembedding",
@@ -3989,18 +3994,18 @@ var SSML_TAG_DEFINITIONS = [
       },
       {
         name: "volume",
-        description: "The background audio volume, for example `-3dB` or `medium`.",
-        example: "-3dB"
+        description: "The background audio volume from 0 to 100.",
+        example: "70"
       },
       {
         name: "fadein",
-        description: "The fade-in duration, for example `1s`.",
-        example: "1s"
+        description: "The fade-in duration in milliseconds from 0 to 10000.",
+        example: "1000"
       },
       {
         name: "fadeout",
-        description: "The fade-out duration, for example `500ms`.",
-        example: "500ms"
+        description: "The fade-out duration in milliseconds from 0 to 10000.",
+        example: "1000"
       }
     ]
   },
@@ -4659,6 +4664,46 @@ function updateNodesAtPath(nodes, path, update) {
 function updateTextAtPath(document2, path, value) {
   return { ...document2, children: updateNodesAtPath(document2.children ?? [], path, () => value) };
 }
+function getNodeAtPath(nodes, path) {
+  let current;
+  let currentNodes = nodes;
+  for (const index of path) {
+    current = currentNodes[index];
+    if (current === void 0) return void 0;
+    if (!isElement(current)) {
+      currentNodes = [];
+    } else {
+      currentNodes = current.children ?? [];
+    }
+  }
+  return current;
+}
+function updateElementAtPath(document2, path, update) {
+  return {
+    ...document2,
+    children: updateNodesAtPath(document2.children ?? [], path, (node) => isElement(node) ? update(node) : node)
+  };
+}
+function updateElementText(element, value) {
+  return { ...element, children: [value] };
+}
+function updateOptionalElementProperty(document2, path, property, value) {
+  return updateElementAtPath(document2, path, (element) => {
+    const next = { ...element };
+    if (value.trim()) next[property] = value;
+    else delete next[property];
+    return next;
+  });
+}
+function addDialogTurn(document2, path) {
+  return updateElementAtPath(document2, path, (element) => ({
+    ...element,
+    children: [
+      ...element.children ?? [],
+      { type: "mstts:turn", voice: "en-US-JennyNeural", children: ["New dialog turn"] }
+    ]
+  }));
+}
 function wrapTextAtPath(document2, path, start, end, tag, attributes) {
   return {
     ...document2,
@@ -4713,6 +4758,7 @@ function VisualSsmlEditor({
   const [selection, setSelection] = useState2({ start: 0, end: 0 });
   const textLeaves = useMemo(() => collectTextLeaves(document2.children ?? []), [document2]);
   const selectedLeaf = textLeaves.find((leaf) => leaf.path.join(".") === selectedPath?.join(".")) ?? textLeaves[0];
+  const selectedElement = selectedPath ? getNodeAtPath(document2.children ?? [], selectedPath) : void 0;
   const diagnostics = useMemo(() => validateAzureSsml(buildSsml3(document2)), [document2]);
   const commit = (nextDocument) => onChange?.(nextDocument);
   const applyWrapper = (tag, attributes) => {
@@ -4747,7 +4793,106 @@ function VisualSsmlEditor({
           isElement(node) ? elementLabel(node) : JSON.stringify(node)
         )) })
       ] }),
-      /* @__PURE__ */ jsx6("div", { className: "ssml-editor-visual-form", children: selectedLeaf ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      /* @__PURE__ */ jsx6("div", { className: "ssml-editor-visual-form", children: selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:dialog" ? /* @__PURE__ */ jsxs2("fieldset", { children: [
+        /* @__PURE__ */ jsx6("legend", { children: "Dialog" }),
+        /* @__PURE__ */ jsx6("p", { children: "Add and edit speaker turns in this dialog." }),
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            disabled: readOnly,
+            onClick: () => commit(addDialogTurn(document2, selectedPath ?? [])),
+            children: "Add turn"
+          }
+        )
+      ] }) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:turn" ? /* @__PURE__ */ jsxs2("fieldset", { children: [
+        /* @__PURE__ */ jsx6("legend", { children: "Dialog turn" }),
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Voice",
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              value: selectedElement.voice ?? "",
+              readOnly,
+              onChange: (event) => commit(updateOptionalElementProperty(document2, selectedPath ?? [], "voice", event.target.value))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Speaker",
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              value: selectedElement.speaker ?? "",
+              readOnly,
+              onChange: (event) => commit(updateOptionalElementProperty(document2, selectedPath ?? [], "speaker", event.target.value))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Turn text",
+          /* @__PURE__ */ jsx6(
+            "textarea",
+            {
+              value: selectedElement.children?.filter((child) => typeof child === "string").join("") ?? "",
+              readOnly,
+              onChange: (event) => commit(
+                updateElementAtPath(
+                  document2,
+                  selectedPath ?? [],
+                  (element) => updateElementText(element, event.target.value)
+                )
+              )
+            }
+          )
+        ] })
+      ] }) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:backgroundaudio" ? /* @__PURE__ */ jsxs2("fieldset", { children: [
+        /* @__PURE__ */ jsx6("legend", { children: "Background audio" }),
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Source URL",
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              value: selectedElement.src ?? "",
+              readOnly,
+              onChange: (event) => commit(updateOptionalElementProperty(document2, selectedPath ?? [], "src", event.target.value))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Volume",
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              value: selectedElement.volume === void 0 ? "" : String(selectedElement.volume),
+              readOnly,
+              onChange: (event) => commit(updateOptionalElementProperty(document2, selectedPath ?? [], "volume", event.target.value))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Fade in",
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              value: selectedElement.fadeIn === void 0 ? "" : String(selectedElement.fadeIn),
+              readOnly,
+              onChange: (event) => commit(updateOptionalElementProperty(document2, selectedPath ?? [], "fadeIn", event.target.value))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("label", { children: [
+          "Fade out",
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              value: selectedElement.fadeOut === void 0 ? "" : String(selectedElement.fadeOut),
+              readOnly,
+              onChange: (event) => commit(updateOptionalElementProperty(document2, selectedPath ?? [], "fadeOut", event.target.value))
+            }
+          )
+        ] })
+      ] }) : selectedLeaf ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
         /* @__PURE__ */ jsxs2("label", { children: [
           "Text",
           /* @__PURE__ */ jsx6(