ssml-builder-js 2.13.0 → 2.15.0

package/dist/react.mjs

@@ -42,13 +42,13 @@ import {
   resolveExpressAsStyles,
   updateEditableText,
   updateTagAttribute
-} from "./chunk-LCTE26LS.mjs";
+} from "./chunk-BDY2Q2JL.mjs";
 import {
   buildPartialSsml,
   buildSsml,
   validateAzureSsml,
   validateSsml
-} from "./chunk-CZ2F3TET.mjs";
+} from "./chunk-WXFLUCLR.mjs";
 import "./chunk-6S5ODO6A.mjs";
 
 // packages/ssml-editor-react/src/SsmlEditor.tsx
@@ -1960,13 +1960,65 @@ function localizedElementLabel(element, locale) {
 function filteredVoices(voiceCatalog, locale, region, style) {
   return (voiceCatalog ?? []).filter((voice) => {
     if (locale && voice.locale.toLowerCase() !== locale.toLowerCase()) return false;
-    if (region && voice.region && voice.region.toLowerCase() !== region.toLowerCase()) return false;
+    const regions = [voice.region, ...voice.regions ?? []].filter(
+      (candidate) => Boolean(candidate)
+    );
+    if (region && regions.length > 0 && !regions.some((candidate) => candidate.toLowerCase() === region.toLowerCase()))
+      return false;
     if (style && !voice.styles?.some((candidate) => candidate.toLowerCase() === style.toLowerCase())) return false;
     return true;
   });
 }
-function DefaultVoiceSelector({ value, voices, readOnly, locale, onChange }) {
+function VoiceCapabilityMatrix({
+  voice,
+  locale
+}) {
+  const status = voice.status ?? (voice.preview ? "preview" : void 0);
+  return /* @__PURE__ */ React.createElement("div", { className: "ssml-editor-voice-capabilities", "data-voice-capabilities": "" }, /* @__PURE__ */ React.createElement("div", null, locale === "ja" ? "\u30B9\u30C6\u30FC\u30BF\u30B9" : "Status", ": ", status?.toUpperCase() ?? (locale === "ja" ? "GA" : "GA"), status === "preview" || status === "deprecated" ? /* @__PURE__ */ React.createElement("span", { role: "status", "aria-label": status, className: "ssml-editor-voice-warning-badge" }, status === "preview" ? "\u26A0 Preview" : "\u26A0 Deprecated") : null), (voice.regions?.length || voice.region) && /* @__PURE__ */ React.createElement("div", null, locale === "ja" ? "\u30EA\u30FC\u30B8\u30E7\u30F3" : "Regions", ":", " ", [...voice.regions ?? [], ...voice.region ? [voice.region] : []].filter((region, index, all) => all.indexOf(region) === index).join(", ")), voice.supportedTags && voice.supportedTags.length > 0 && /* @__PURE__ */ React.createElement("div", null, locale === "ja" ? "\u5BFE\u5FDC\u30BF\u30B0" : "Supported tags", ": ", voice.supportedTags.join(", ")), voice.unsupportedTags && voice.unsupportedTags.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "ssml-editor-voice-unsupported" }, locale === "ja" ? "\u975E\u5BFE\u5FDC\u30BF\u30B0" : "Unsupported tags", ": ", voice.unsupportedTags.join(", ")));
+}
+function diagnosticMatchesElement(diagnostic, element) {
+  const name = elementLabel(element).toLowerCase().replace("expressas", "mstts:express-as");
+  if (diagnostic.code === "azure-unsupported-style") return name === "mstts:express-as" || name === "express-as";
+  if (diagnostic.code === "azure-unsupported-tag-for-voice") {
+    return diagnostic.message.toLowerCase().includes(`<${name}>`) || diagnostic.message.toLowerCase().includes(`<${name.replace("mstts:", "")}>`);
+  }
+  if (diagnostic.code === "azure-locale-mismatch" || diagnostic.code === "azure-unsupported-model-for-voice")
+    return name === "voice" || name === "mstts:turn";
+  return false;
+}
+function elementWarnings(diagnostics, element) {
+  return diagnostics.filter((diagnostic) => diagnosticMatchesElement(diagnostic, element));
+}
+function fieldWarnings(diagnostics, element, field) {
+  return elementWarnings(diagnostics, element).filter((diagnostic) => {
+    if (diagnostic.code === "azure-unsupported-style") return field.key === "style";
+    return field.key === "name" || field.key === "voice";
+  });
+}
+function WarningBadge({ messages }) {
+  if (messages.length === 0) return null;
   return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      role: "status",
+      "aria-label": messages.map((message) => message.message).join(" "),
+      title: messages.map((message) => message.message).join(" "),
+      "data-ssml-warning-badge": "",
+      "data-testid": "ssml-editor-warning-badge",
+      className: "ssml-editor-warning-badge"
+    },
+    "\u26A0"
+  );
+}
+function DefaultVoiceSelector({
+  value,
+  voices,
+  selectedVoice,
+  readOnly,
+  locale,
+  onChange
+}) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     "select",
     {
       "aria-label": locale === "ja" ? "\u97F3\u58F0" : "Voice",
@@ -1976,7 +2028,7 @@ function DefaultVoiceSelector({ value, voices, readOnly, locale, onChange }) {
     },
     /* @__PURE__ */ React.createElement("option", { value: "" }, locale === "ja" ? "\u97F3\u58F0\u3092\u9078\u629E" : "Select a voice"),
     voices.map((voice) => /* @__PURE__ */ React.createElement("option", { key: voice.name, value: voice.name }, voice.name, voice.preview || voice.status === "preview" ? " (preview)" : ""))
-  );
+  ), selectedVoice ? /* @__PURE__ */ React.createElement(VoiceCapabilityMatrix, { voice: selectedVoice, locale }) : null);
 }
 function VisualElementInspector({
   document: document2,
@@ -1990,15 +2042,19 @@ function VisualElementInspector({
   voiceCatalog,
   voiceLocale,
   voiceRegion,
-  voiceStyle
+  voiceStyle,
+  diagnostics
 }) {
   if (customInspector) {
     return /* @__PURE__ */ React.createElement(React.Fragment, null, customInspector({ document: document2, element, path, readOnly, onChange: commit, locale }));
   }
   const fields = getElementFields(element);
   const availableVoices = filteredVoices(voiceCatalog, voiceLocale, voiceRegion, voiceStyle);
+  const selectedVoice = voiceCatalog?.find(
+    (voice) => voice.name === (element.type === "voice" ? element.name : void 0)
+  );
   const renderSelector = renderVoiceSelector ?? DefaultVoiceSelector;
-  return /* @__PURE__ */ React.createElement("fieldset", null, /* @__PURE__ */ React.createElement("legend", null, `<${elementLabel(element)}>`), fields.length === 0 ? /* @__PURE__ */ React.createElement("p", null, "This element is preserved in the visual tree. Edit its attributes in Code mode.") : fields.map((field) => {
+  return /* @__PURE__ */ React.createElement("fieldset", null, /* @__PURE__ */ React.createElement("legend", null, `<${elementLabel(element)}>`, " ", /* @__PURE__ */ React.createElement(WarningBadge, { messages: elementWarnings(diagnostics, element) })), fields.length === 0 ? /* @__PURE__ */ React.createElement("p", null, "This element is preserved in the visual tree. Edit its attributes in Code mode.") : fields.map((field) => {
     const value = element[field.key];
     const inputValue = value === void 0 ? "" : String(value);
     const inputId = `ssml-visual-${field.key}`;
@@ -2035,9 +2091,10 @@ function VisualElementInspector({
       speakerProfileId: "\u8A71\u8005\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB ID",
       url: "\u97F3\u58F0\u5909\u63DB URL",
       profile: "\u30D7\u30ED\u30D5\u30A1\u30A4\u30EB"
-    }[field.key] ?? field.label : field.label, field.key === "name" && elementLabel(element) === "voice" && voiceCatalog ? renderSelector({
+    }[field.key] ?? field.label : field.label, /* @__PURE__ */ React.createElement(WarningBadge, { messages: fieldWarnings(diagnostics, element, field) }), field.key === "name" && elementLabel(element) === "voice" && voiceCatalog ? renderSelector({
       value: inputValue,
       voices: availableVoices,
+      selectedVoice,
       readOnly,
       locale,
       onChange: (value2) => commit(updateOptionalElementProperty(document2, path, field.key, value2))
@@ -2112,19 +2169,21 @@ function TreeNode({
   node,
   path,
   selectedPath,
-  onSelect
+  onSelect,
+  getWarnings
 }) {
   if (!isElement(node)) return null;
   const name = elementLabel(node);
   const isSelected = selectedPath?.join(".") === path.join(".");
-  return /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("button", { type: "button", "aria-current": isSelected ? "true" : void 0, onClick: () => onSelect(path) }, `<${name}>`), (node.children ?? []).length > 0 && /* @__PURE__ */ React.createElement("ul", null, node.children?.map((child, index) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("button", { type: "button", "aria-current": isSelected ? "true" : void 0, onClick: () => onSelect(path) }, `<${name}>`, /* @__PURE__ */ React.createElement(WarningBadge, { messages: getWarnings(node) })), (node.children ?? []).length > 0 && /* @__PURE__ */ React.createElement("ul", null, node.children?.map((child, index) => /* @__PURE__ */ React.createElement(
     TreeNode,
     {
       key: `${path.join(".")}/${isElement(child) ? elementLabel(child) : JSON.stringify(child)}`,
       node: child,
       path: [...path, index],
       selectedPath,
-      onSelect
+      onSelect,
+      getWarnings
     }
   ))));
 }
@@ -2139,7 +2198,9 @@ function VisualSsmlEditor({
   voiceCatalog,
   voiceLocale,
   voiceRegion,
-  voiceStyle
+  voiceStyle,
+  voiceModel,
+  model
 }) {
   const [selectedPath, setSelectedPath] = useState2(null);
   const [selection, setSelection] = useState2({ start: 0, end: 0 });
@@ -2147,7 +2208,27 @@ function VisualSsmlEditor({
   const selectedLeaf = textLeaves.find((leaf) => leaf.path.join(".") === selectedPath?.join(".")) ?? textLeaves[0];
   const selectedElement = selectedPath ? getNodeAtPath(document2.children ?? [], selectedPath) : void 0;
   const selectedCustomInspector = selectedElement && isElement(selectedElement) ? customInspectors?.[elementLabel(selectedElement)] ?? customInspectors?.[selectedElement.type] : void 0;
-  const diagnostics = useMemo(() => validateAzureSsml(buildSsml(document2)), [document2]);
+  const validationOptions = useMemo(
+    () => ({
+      model: voiceModel ?? model,
+      customVoiceDefinitions: voiceCatalog?.map((voice) => ({
+        name: voice.name,
+        locale: voice.locale,
+        regions: voice.regions ?? (voice.region ? [voice.region] : void 0),
+        styles: voice.styles,
+        supportedTags: voice.supportedTags,
+        unsupportedTags: voice.unsupportedTags,
+        models: voice.models,
+        status: voice.status ?? (voice.preview ? "preview" : "ga")
+      }))
+    }),
+    [model, voiceCatalog, voiceModel]
+  );
+  const diagnostics = useMemo(
+    () => validateAzureSsml(buildSsml(document2), validationOptions),
+    [document2, validationOptions]
+  );
+  const getWarnings = (element) => elementWarnings(diagnostics, element);
   const commit = (nextDocument) => onChange?.(nextDocument);
   const applyWrapper = (tag, attributes) => {
     if (readOnly || !selectedLeaf) return;
@@ -2162,7 +2243,8 @@ function VisualSsmlEditor({
       node,
       path: [index],
       selectedPath,
-      onSelect: setSelectedPath
+      onSelect: setSelectedPath,
+      getWarnings
     }
   )))), /* @__PURE__ */ React.createElement("div", { className: "ssml-editor-visual-form" }, selectedCustomInspector && selectedElement && isElement(selectedElement) ? selectedCustomInspector({
     document: document2,
@@ -2179,9 +2261,10 @@ function VisualSsmlEditor({
       onClick: () => commit(addDialogTurn(document2, selectedPath ?? []))
     },
     locale === "ja" ? "\u30BF\u30FC\u30F3\u3092\u8FFD\u52A0" : "Add turn"
-  )) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:turn" ? /* @__PURE__ */ React.createElement("fieldset", null, /* @__PURE__ */ React.createElement("legend", null, localizedElementLabel(selectedElement, locale)), /* @__PURE__ */ React.createElement("label", { htmlFor: "ssml-visual-turn-voice" }, locale === "ja" ? "\u97F3\u58F0" : "Voice", voiceCatalog ? (renderVoiceSelector ?? DefaultVoiceSelector)({
+  )) : selectedElement && isElement(selectedElement) && selectedElement.type === "mstts:turn" ? /* @__PURE__ */ React.createElement("fieldset", null, /* @__PURE__ */ React.createElement("legend", null, localizedElementLabel(selectedElement, locale)), /* @__PURE__ */ React.createElement("label", { htmlFor: "ssml-visual-turn-voice" }, locale === "ja" ? "\u97F3\u58F0" : "Voice", /* @__PURE__ */ React.createElement(WarningBadge, { messages: elementWarnings(diagnostics, selectedElement) }), voiceCatalog ? (renderVoiceSelector ?? DefaultVoiceSelector)({
     value: selectedElement.voice ?? "",
     voices: filteredVoices(voiceCatalog, voiceLocale, voiceRegion, voiceStyle),
+    selectedVoice: voiceCatalog?.find((voice) => voice.name === selectedElement.voice),
     readOnly,
     locale,
     onChange: (value) => commit(updateOptionalElementProperty(document2, selectedPath ?? [], "voice", value))
@@ -2255,7 +2338,8 @@ function VisualSsmlEditor({
       voiceCatalog,
       voiceLocale,
       voiceRegion,
-      voiceStyle
+      voiceStyle,
+      diagnostics
     }
   ) : selectedLeaf ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", null, "Text", /* @__PURE__ */ React.createElement(
     "textarea",
@@ -2879,6 +2963,8 @@ var SsmlEditor = forwardRef(function SsmlEditor2({
   voiceLocale,
   voiceRegion,
   voiceStyle,
+  voiceModel,
+  model,
   emotionStyles,
   className,
   style,
@@ -3277,7 +3363,9 @@ var SsmlEditor = forwardRef(function SsmlEditor2({
         voiceCatalog,
         voiceLocale,
         voiceRegion,
-        voiceStyle
+        voiceStyle,
+        voiceModel,
+        model
       }
     )) : /* @__PURE__ */ React.createElement("div", { style: { ...editorStyles.editor, minHeight: editorMinHeight } }, /* @__PURE__ */ React.createElement(
       Editor,