@ssml-builder-js/ssml-editor-react 2.13.0 → 2.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssml-builder-js/ssml-editor-react",
-  "version": "2.13.0",
+  "version": "2.15.0",
   "description": "React-based SSML editor component",
   "license": "MIT",
   "repository": {
@@ -52,6 +52,6 @@
     }
   },
   "dependencies": {
-    "@ssml-builder-js/ssml-core": "^2.13.0"
+    "@ssml-builder-js/ssml-core": "^2.15.0"
   }
 }

package/src/SsmlEditor.tsx

@@ -781,6 +781,10 @@ export interface SsmlEditorProps {
   voiceRegion?: string;
   /** Optional style filter for the visual voice selector. */
   voiceStyle?: string;
+  /** Selected Azure voice model used for live capability validation. */
+  voiceModel?: string;
+  /** Alias for voiceModel. */
+  model?: string;
   /** Candidate style values shown by the built-in emotion insertion. */
   emotionStyles?: readonly string[];
   /** Class name applied to the editor container. */
@@ -888,6 +892,8 @@ export const SsmlEditor = forwardRef<SsmlEditorRef, SsmlEditorProps>(function Ss
     voiceLocale,
     voiceRegion,
     voiceStyle,
+    voiceModel,
+    model,
     emotionStyles,
     className,
     style,
@@ -1377,6 +1383,8 @@ export const SsmlEditor = forwardRef<SsmlEditorRef, SsmlEditorProps>(function Ss
               voiceLocale={voiceLocale}
               voiceRegion={voiceRegion}
               voiceStyle={voiceStyle}
+              voiceModel={voiceModel}
+              model={model}
             />
           </div>
         ) : (

package/src/components/VisualSsmlEditor.tsx

@@ -6,6 +6,7 @@ import {
   type SsmlDocument,
   type SsmlElement,
   type SsmlNode,
+  type SsmlDiagnostic,
 } from "@ssml-builder-js/ssml-core";
 import { SSML_ELEMENT_COPY, type SsmlEditorLocale } from "../locales";
 
@@ -13,7 +14,11 @@ export interface VisualVoiceCatalogEntry {
   name: string;
   locale: string;
   region?: string;
+  regions?: readonly string[];
   styles?: readonly string[];
+  supportedTags?: readonly string[];
+  unsupportedTags?: readonly string[];
+  models?: readonly string[];
   preview?: boolean;
   status?: "ga" | "preview" | "deprecated";
 }
@@ -21,6 +26,7 @@ export interface VisualVoiceCatalogEntry {
 export interface VoiceSelectorRenderProps {
   value: string;
   voices: readonly VisualVoiceCatalogEntry[];
+  selectedVoice?: VisualVoiceCatalogEntry;
   readOnly: boolean;
   locale: SsmlEditorLocale;
   onChange: (voice: string) => void;
@@ -49,6 +55,10 @@ export interface VisualSsmlEditorProps {
   voiceLocale?: string;
   voiceRegion?: string;
   voiceStyle?: string;
+  /** Selected Azure voice model used for live capability validation. */
+  voiceModel?: string;
+  /** Alias for voiceModel. */
+  model?: string;
 }
 
 interface TextLeaf {
@@ -240,28 +250,127 @@ function filteredVoices(
 ): readonly VisualVoiceCatalogEntry[] {
   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): candidate is string =>
+      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 }: VoiceSelectorRenderProps): ReactElement {
+function VoiceCapabilityMatrix({
+  voice,
+  locale,
+}: {
+  voice: VisualVoiceCatalogEntry;
+  locale: SsmlEditorLocale;
+}): ReactElement {
+  const status = voice.status ?? (voice.preview ? "preview" : undefined);
+  return (
+    <div className="ssml-editor-voice-capabilities" data-voice-capabilities="">
+      <div>
+        {locale === "ja" ? "ステータス" : "Status"}: {status?.toUpperCase() ?? (locale === "ja" ? "GA" : "GA")}
+        {status === "preview" || status === "deprecated" ? (
+          <span role="status" aria-label={status} className="ssml-editor-voice-warning-badge">
+            {status === "preview" ? "⚠ Preview" : "⚠ Deprecated"}
+          </span>
+        ) : null}
+      </div>
+      {(voice.regions?.length || voice.region) && (
+        <div>
+          {locale === "ja" ? "リージョン" : "Regions"}:{" "}
+          {[...(voice.regions ?? []), ...(voice.region ? [voice.region] : [])]
+            .filter((region, index, all) => all.indexOf(region) === index)
+            .join(", ")}
+        </div>
+      )}
+      {voice.supportedTags && voice.supportedTags.length > 0 && (
+        <div>
+          {locale === "ja" ? "対応タグ" : "Supported tags"}: {voice.supportedTags.join(", ")}
+        </div>
+      )}
+      {voice.unsupportedTags && voice.unsupportedTags.length > 0 && (
+        <div className="ssml-editor-voice-unsupported">
+          {locale === "ja" ? "非対応タグ" : "Unsupported tags"}: {voice.unsupportedTags.join(", ")}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function diagnosticMatchesElement(diagnostic: SsmlDiagnostic, element: SsmlElement): boolean {
+  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: readonly SsmlDiagnostic[], element: SsmlElement): readonly SsmlDiagnostic[] {
+  return diagnostics.filter((diagnostic) => diagnosticMatchesElement(diagnostic, element));
+}
+
+function fieldWarnings(
+  diagnostics: readonly SsmlDiagnostic[],
+  element: SsmlElement,
+  field: VisualElementField,
+): readonly SsmlDiagnostic[] {
+  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 }: { messages: readonly SsmlDiagnostic[] }): ReactElement | null {
+  if (messages.length === 0) return null;
   return (
-    <select
-      aria-label={locale === "ja" ? "音声" : "Voice"}
-      value={value}
-      disabled={readOnly}
-      onChange={(event) => onChange(event.target.value)}
+    <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"
     >
-      <option value="">{locale === "ja" ? "音声を選択" : "Select a voice"}</option>
-      {voices.map((voice) => (
-        <option key={voice.name} value={voice.name}>
-          {voice.name}
-          {voice.preview || voice.status === "preview" ? " (preview)" : ""}
-        </option>
-      ))}
-    </select>
+      ⚠
+    </span>
+  );
+}
+
+function DefaultVoiceSelector({
+  value,
+  voices,
+  selectedVoice,
+  readOnly,
+  locale,
+  onChange,
+}: VoiceSelectorRenderProps): ReactElement {
+  return (
+    <>
+      <select
+        aria-label={locale === "ja" ? "音声" : "Voice"}
+        value={value}
+        disabled={readOnly}
+        onChange={(event) => onChange(event.target.value)}
+      >
+        <option value="">{locale === "ja" ? "音声を選択" : "Select a voice"}</option>
+        {voices.map((voice) => (
+          <option key={voice.name} value={voice.name}>
+            {voice.name}
+            {voice.preview || voice.status === "preview" ? " (preview)" : ""}
+          </option>
+        ))}
+      </select>
+      {selectedVoice ? <VoiceCapabilityMatrix voice={selectedVoice} locale={locale} /> : null}
+    </>
   );
 }
 
@@ -278,6 +387,7 @@ function VisualElementInspector({
   voiceLocale,
   voiceRegion,
   voiceStyle,
+  diagnostics,
 }: {
   document: SsmlDocument;
   element: SsmlElement;
@@ -291,16 +401,22 @@ function VisualElementInspector({
   voiceLocale?: string;
   voiceRegion?: string;
   voiceStyle?: string;
+  diagnostics: readonly SsmlDiagnostic[];
 }): ReactElement {
   if (customInspector) {
     return <>{customInspector({ document, 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 : undefined),
+  );
   const renderSelector = renderVoiceSelector ?? DefaultVoiceSelector;
   return (
     <fieldset>
-      <legend>{`<${elementLabel(element)}>`}</legend>
+      <legend>
+        {`<${elementLabel(element)}>`} <WarningBadge messages={elementWarnings(diagnostics, element)} />
+      </legend>
       {fields.length === 0 ? (
         <p>This element is preserved in the visual tree. Edit its attributes in Code mode.</p>
       ) : (
@@ -348,10 +464,12 @@ function VisualElementInspector({
                     } as Record<string, string>
                   )[field.key] ?? field.label)
                 : field.label}
+              <WarningBadge messages={fieldWarnings(diagnostics, element, field)} />
               {field.key === "name" && elementLabel(element) === "voice" && voiceCatalog ? (
                 renderSelector({
                   value: inputValue,
                   voices: availableVoices,
+                  selectedVoice,
                   readOnly,
                   locale,
                   onChange: (value) => commit(updateOptionalElementProperty(document, path, field.key, value)),
@@ -447,11 +565,13 @@ function TreeNode({
   path,
   selectedPath,
   onSelect,
+  getWarnings,
 }: {
   node: SsmlNode;
   path: number[];
   selectedPath: number[] | null;
   onSelect: (path: number[]) => void;
+  getWarnings: (element: SsmlElement) => readonly SsmlDiagnostic[];
 }): ReactElement | null {
   if (!isElement(node)) return null;
   const name = elementLabel(node);
@@ -460,6 +580,7 @@ function TreeNode({
     <li>
       <button type="button" aria-current={isSelected ? "true" : undefined} onClick={() => onSelect(path)}>
         {`<${name}>`}
+        <WarningBadge messages={getWarnings(node)} />
       </button>
       {(node.children ?? []).length > 0 && (
         <ul>
@@ -470,6 +591,7 @@ function TreeNode({
               path={[...path, index]}
               selectedPath={selectedPath}
               onSelect={onSelect}
+              getWarnings={getWarnings}
             />
           ))}
         </ul>
@@ -490,6 +612,8 @@ export function VisualSsmlEditor({
   voiceLocale,
   voiceRegion,
   voiceStyle,
+  voiceModel,
+  model,
 }: VisualSsmlEditorProps): ReactElement {
   const [selectedPath, setSelectedPath] = useState<number[] | null>(null);
   const [selection, setSelection] = useState({ start: 0, end: 0 });
@@ -500,7 +624,27 @@ export function VisualSsmlEditor({
     selectedElement && isElement(selectedElement)
       ? (customInspectors?.[elementLabel(selectedElement)] ?? customInspectors?.[selectedElement.type])
       : undefined;
-  const diagnostics = useMemo(() => validateAzureSsml(buildSsml(document)), [document]);
+  const validationOptions = useMemo(
+    () => ({
+      model: voiceModel ?? model,
+      customVoiceDefinitions: voiceCatalog?.map((voice) => ({
+        name: voice.name,
+        locale: voice.locale,
+        regions: voice.regions ?? (voice.region ? [voice.region] : undefined),
+        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(document), validationOptions) as SsmlDiagnostic[],
+    [document, validationOptions],
+  );
+  const getWarnings = (element: SsmlElement): readonly SsmlDiagnostic[] => elementWarnings(diagnostics, element);
   const commit = (nextDocument: SsmlDocument): void => onChange?.(nextDocument);
 
   const applyWrapper = (tag: SsmlElement["type"], attributes: Record<string, string>): void => {
@@ -542,6 +686,7 @@ export function VisualSsmlEditor({
                 path={[index]}
                 selectedPath={selectedPath}
                 onSelect={setSelectedPath}
+                getWarnings={getWarnings}
               />
             ))}
           </ul>
@@ -573,10 +718,12 @@ export function VisualSsmlEditor({
               <legend>{localizedElementLabel(selectedElement, locale)}</legend>
               <label htmlFor="ssml-visual-turn-voice">
                 {locale === "ja" ? "音声" : "Voice"}
+                <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) =>
@@ -681,6 +828,7 @@ export function VisualSsmlEditor({
               voiceLocale={voiceLocale}
               voiceRegion={voiceRegion}
               voiceStyle={voiceStyle}
+              diagnostics={diagnostics}
             />
           ) : selectedLeaf ? (
             <>

package/test/ui-components.test.tsx

@@ -724,6 +724,34 @@ describe("SsmlEditor props", () => {
     );
   });
 
+  it("shows live capability warning badges for model, locale, and style mismatches", () => {
+    renderEditor({
+      editMode: "visual",
+      model: "neural-v2",
+      document: {
+        ...editorDocument,
+        children: [
+          {
+            type: "voice",
+            name: "en-US-ExampleNeural",
+            children: [{ type: "mstts:express-as", style: "sad", children: ["Hello"] }],
+          },
+        ],
+      },
+      voiceCatalog: [
+        {
+          name: "en-US-ExampleNeural",
+          locale: "ja-JP",
+          styles: ["cheerful"],
+          models: ["neural-v1"],
+          supportedTags: ["mstts:express-as"],
+        },
+      ],
+    });
+
+    expect(screen.getAllByTestId("ssml-editor-warning-badge").length).toBeGreaterThan(0);
+  });
+
   it("updates toolbar and popover text when the locale changes", async () => {
     const user = userEvent.setup();
     const { rerender } = renderEditor({ locale: "ja", showToolbarLabels: true });