@ssml-builder-js/ssml-editor-react 2.8.0 → 2.9.0

package/package.json

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

package/src/SsmlEditor.tsx

@@ -1,4 +1,4 @@
-import { Fragment, forwardRef, useImperativeHandle } from "react";
+import { Fragment, forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import type { CSSProperties, ReactElement, ReactNode } from "react";
 import Editor from "@monaco-editor/react";
 import type { SsmlDocument } from "@ssml-builder-js/ssml-core";
@@ -6,6 +6,8 @@ import { isSsmlEditorButtonVisible, type SsmlEditorButton, type SsmlEditorButton
 import {
   BREAK_TIME_DESCRIPTIONS,
   BREAK_TIME_PRESETS,
+  AUDIO_DURATION_DESCRIPTIONS,
+  AUDIO_DURATION_PRESETS,
   EMPHASIS_LEVEL_DESCRIPTIONS,
   EMPHASIS_LEVEL_PRESETS,
   EXPRESS_AS_STYLE_DESCRIPTIONS,
@@ -38,8 +40,9 @@ import { InsertionPopover } from "./components/popovers/InsertionPopover";
 import { useSsmlEditorState } from "./hooks/useSsmlEditorState";
 import { useSsmlMonaco } from "./hooks/useSsmlMonaco";
 import { editorStyles as styles } from "./styles/editorStyles";
+import { VisualSsmlEditor } from "./components/VisualSsmlEditor";
 const UNGROUPED_TOOLBAR_GROUP = "__ssml-editor-ungrouped__";
-const TIMING_POPOVER_TAGS = new Set(["break", "mstts:silence"]);
+const TIMING_POPOVER_TAGS = new Set(["break", "mstts:silence", "mstts:audioduration"]);
 const PROSODY_POPOVER_TAGS = new Set(["prosody", "mstts:express-as", "voice", "emphasis"]);
 const TEXT_POPOVER_TAGS = new Set(["sub", "say-as", "phoneme", "w", "lang"]);
 
@@ -365,13 +368,34 @@ export const SSML_INSERTIONS = [
       mode: "insert",
     }),
   },
+  {
+    id: "mstts:audioduration",
+    icon: "◷",
+    tagName: "mstts:audioduration",
+    selfClosing: true,
+    labels: { ja: "音声長", en: "Audio duration" },
+    descriptions: {
+      ja: "合成音声の目標時間を指定します。",
+      en: "Sets the target duration of synthesized audio.",
+    },
+    parameterDescription: {
+      ja: "目標時間を選択します。",
+      en: "Selects the target duration.",
+    },
+    options: createInsertionOptions(AUDIO_DURATION_PRESETS, AUDIO_DURATION_DESCRIPTIONS),
+    createTemplate: (value) => ({
+      prefix: `<mstts:audioduration value="${value}"/>`,
+      suffix: "",
+      mode: "insert",
+    }),
+  },
 ] satisfies readonly SsmlInsertionDefinition[];
 
 const DEFAULT_INSERTION_GROUPS = [
   {
     id: "pauses",
     labels: { ja: "間・無音", en: "Pauses" },
-    insertionIds: ["break", "mstts:silence"],
+    insertionIds: ["break", "mstts:silence", "mstts:audioduration"],
   },
   {
     id: "prosody",
@@ -614,6 +638,60 @@ const STYLE_CSS = `
   > .ssml-editor-help-settings-summary::before {
   content: "▾";
 }
+[data-ssml-editor] .ssml-editor-visual-layout {
+  display: grid;
+  grid-template-columns: minmax(12rem, 0.35fr) minmax(16rem, 1fr);
+  gap: 1rem;
+}
+[data-ssml-editor] .ssml-editor-visual-tree,
+[data-ssml-editor] .ssml-editor-visual-form {
+  display: grid;
+  gap: 0.5rem;
+  align-content: start;
+}
+[data-ssml-editor] .ssml-editor-visual-tree ul {
+  margin: 0;
+  padding-left: 1.25rem;
+}
+[data-ssml-editor] .ssml-editor-visual-tree button,
+[data-ssml-editor] .ssml-editor-visual-breadcrumb button,
+[data-ssml-editor] .ssml-editor-visual-actions button {
+  padding: 0.35rem 0.5rem;
+  border: 1px solid var(--ssml-editor-control-border);
+  border-radius: 0.25rem;
+  color: var(--ssml-editor-color);
+  background: var(--ssml-editor-control-bg);
+  cursor: pointer;
+}
+[data-ssml-editor] .ssml-editor-visual-tree button[aria-current] {
+  border-color: var(--ssml-editor-active-border);
+  background: var(--ssml-editor-active-bg);
+}
+[data-ssml-editor] .ssml-editor-visual-breadcrumb,
+[data-ssml-editor] .ssml-editor-visual-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
+}
+[data-ssml-editor] .ssml-editor-visual-form textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 6rem;
+  padding: 0.5rem;
+  color: var(--ssml-editor-color);
+  background: var(--ssml-editor-control-bg);
+  border: 1px solid var(--ssml-editor-control-border);
+  border-radius: 0.25rem;
+  font: inherit;
+}
+[data-ssml-editor] .ssml-editor-visual-errors {
+  padding: 0.5rem;
+  color: var(--ssml-editor-error);
+  background: var(--ssml-editor-error-bg);
+  border: 1px solid var(--ssml-editor-error);
+  border-radius: 0.25rem;
+}
 `.trim();
 
 function injectEditorTheme(): void {
@@ -660,6 +738,8 @@ export interface SsmlEditorProps {
   minHeight?: string | number;
   /** Whether the Monaco editor is read-only. */
   readOnly?: boolean;
+  /** Selects the XML source editor or the structured visual editor. */
+  editMode?: SsmlEditorEditMode;
   /** Monaco theme mode. */
   theme?: SsmlEditorTheme;
   /** Monaco editor font size. */
@@ -700,6 +780,8 @@ export interface SsmlEditorProps {
   displayStyle?: CSSProperties;
 }
 
+export type SsmlEditorEditMode = "code" | "visual";
+
 export interface SelectionInfo {
   selectedText: string;
   characterCount: number;
@@ -791,9 +873,12 @@ export const SsmlEditor = forwardRef<SsmlEditorRef, SsmlEditorProps>(function Ss
     displayClassName,
     displayStyle,
     loadingFallback,
+    editMode: editModeProp = "code",
   }: SsmlEditorProps,
   ref,
 ): ReactElement {
+  const [editMode, setEditMode] = useState<SsmlEditorEditMode>(editModeProp);
+  useEffect(() => setEditMode(editModeProp), [editModeProp]);
   const resolvedEditorOptions: SsmlEditorOptions = {
     ...settings,
     ...editorOptions,
@@ -882,6 +967,7 @@ export const SsmlEditor = forwardRef<SsmlEditorRef, SsmlEditorProps>(function Ss
 
   const {
     editorRef,
+    draftDocument,
     text,
     selectionOverlay,
     activeTags,
@@ -893,6 +979,7 @@ export const SsmlEditor = forwardRef<SsmlEditorRef, SsmlEditorProps>(function Ss
     syntaxError,
     setSyntaxError,
     helpPanelId,
+    commit,
     handleTextChange,
     handleInsert,
     handleInsertBreak,
@@ -1187,6 +1274,27 @@ export const SsmlEditor = forwardRef<SsmlEditorRef, SsmlEditorProps>(function Ss
             data-ssml-editor-toolbar-actions=""
           >
             {renderToolbarItems()}
+            <span style={styles.toolbarSeparator} aria-hidden="true" />
+            <button
+              type="button"
+              style={
+                editMode === "visual" ? { ...toolbarButtonStyle, ...styles.toolbarButtonActive } : toolbarButtonStyle
+              }
+              aria-pressed={editMode === "visual"}
+              onClick={() => setEditMode("visual")}
+            >
+              Visual
+            </button>
+            <button
+              type="button"
+              style={
+                editMode === "code" ? { ...toolbarButtonStyle, ...styles.toolbarButtonActive } : toolbarButtonStyle
+              }
+              aria-pressed={editMode === "code"}
+              onClick={() => setEditMode("code")}
+            >
+              Code
+            </button>
           </div>
         </div>
       )}
@@ -1232,65 +1340,76 @@ export const SsmlEditor = forwardRef<SsmlEditorRef, SsmlEditorProps>(function Ss
             )}
           </section>
         )}
-        <div style={{ ...styles.editor, minHeight: editorMinHeight }}>
-          <Editor
-            height={editorHeight}
-            language="xml"
-            theme={isDarkTheme ? "vs-dark" : "light"}
-            options={{
-              automaticLayout: resolvedEditorOptions.automaticLayout ?? true,
-              autoClosingBrackets: "never",
-              fontSize: resolvedEditorOptions.fontSize,
-              hover: { enabled: "on" },
-              inlayHints: { enabled: decorationsVisible ? "on" : "off" },
-              lineNumbers: resolvedEditorOptions.lineNumbers,
-              minimap: {
-                enabled: resolvedEditorOptions.minimap ?? true,
-              },
-              readOnly: isReadOnly,
-              wordWrap: resolvedEditorOptions.wordWrap,
-            }}
-            value={text}
-            loading={loadingFallback}
-            onMount={onMount}
-            onChange={(value) => handleTextChange(value ?? "")}
-          />
-          {selectionOverlay.hasSelection && selectionOverlay.position && (
-            <div
-              role="toolbar"
-              aria-label={copy.selectionActions}
-              data-ssml-editor-selection-actions=""
-              style={{
-                ...styles.selectionActions,
-                top: selectionOverlay.position.top,
-                left: selectionOverlay.position.left,
-                transform:
-                  selectionOverlay.placement === "above"
-                    ? "translateY(calc(-100% - 0.5rem))"
-                    : `translateY(calc(${selectionOverlay.position.height}px + 0.5rem))`,
+        {editMode === "visual" ? (
+          <div style={styles.visual}>
+            <VisualSsmlEditor
+              document={draftDocument}
+              readOnly={isReadOnly}
+              onChange={commit}
+              onPreviewSelection={onPreviewSelection}
+            />
+          </div>
+        ) : (
+          <div style={{ ...styles.editor, minHeight: editorMinHeight }}>
+            <Editor
+              height={editorHeight}
+              language="xml"
+              theme={isDarkTheme ? "vs-dark" : "light"}
+              options={{
+                automaticLayout: resolvedEditorOptions.automaticLayout ?? true,
+                autoClosingBrackets: "never",
+                fontSize: resolvedEditorOptions.fontSize,
+                hover: { enabled: "on" },
+                inlayHints: { enabled: decorationsVisible ? "on" : "off" },
+                lineNumbers: resolvedEditorOptions.lineNumbers,
+                minimap: {
+                  enabled: resolvedEditorOptions.minimap ?? true,
+                },
+                readOnly: isReadOnly,
+                wordWrap: resolvedEditorOptions.wordWrap,
               }}
-              onMouseDown={(event) => event.preventDefault()}
-            >
-              <span style={styles.selectionCount} aria-live="polite">
-                {selectionOverlay.characterCount}
-                {copy.selectionCountSuffix}
-              </span>
-              <span style={styles.selectionActionsDivider} aria-hidden="true" />
-              <button
-                type="button"
-                style={styles.selectionActionButton}
-                title={copy.previewSelectionTitle}
-                disabled={!canPreviewSelection}
-                onClick={previewSelection}
+              value={text}
+              loading={loadingFallback}
+              onMount={onMount}
+              onChange={(value) => handleTextChange(value ?? "")}
+            />
+            {selectionOverlay.hasSelection && selectionOverlay.position && (
+              <div
+                role="toolbar"
+                aria-label={copy.selectionActions}
+                data-ssml-editor-selection-actions=""
+                style={{
+                  ...styles.selectionActions,
+                  top: selectionOverlay.position.top,
+                  left: selectionOverlay.position.left,
+                  transform:
+                    selectionOverlay.placement === "above"
+                      ? "translateY(calc(-100% - 0.5rem))"
+                      : `translateY(calc(${selectionOverlay.position.height}px + 0.5rem))`,
+                }}
+                onMouseDown={(event) => event.preventDefault()}
               >
-                <span style={styles.selectionActionIcon} aria-hidden="true">
-                  ▶
+                <span style={styles.selectionCount} aria-live="polite">
+                  {selectionOverlay.characterCount}
+                  {copy.selectionCountSuffix}
                 </span>
-                {copy.previewSelection}
-              </button>
-            </div>
-          )}
-        </div>
+                <span style={styles.selectionActionsDivider} aria-hidden="true" />
+                <button
+                  type="button"
+                  style={styles.selectionActionButton}
+                  title={copy.previewSelectionTitle}
+                  disabled={!canPreviewSelection}
+                  onClick={previewSelection}
+                >
+                  <span style={styles.selectionActionIcon} aria-hidden="true">
+                    ▶
+                  </span>
+                  {copy.previewSelection}
+                </button>
+              </div>
+            )}
+          </div>
+        )}
         {syntaxError && (
           <p style={styles.error} role="alert">
             {copy.syntaxError}: {syntaxError.message}

package/src/buttonVisibility.ts

@@ -13,6 +13,7 @@ export type SsmlEditorInsertionButton =
   | "mark"
   | "bookmark"
   | "mstts:silence"
+  | "mstts:audioduration"
   | "mstts:viseme"
   | (string & {});
 

package/src/components/VisualSsmlEditor.tsx

@@ -0,0 +1,240 @@
+import { useMemo, useState } from "react";
+import type { ReactElement } from "react";
+import {
+  buildSsml,
+  validateAzureSsml,
+  type SsmlDocument,
+  type SsmlElement,
+  type SsmlNode,
+} from "@ssml-builder-js/ssml-core";
+
+export interface VisualSsmlEditorProps {
+  document: SsmlDocument;
+  readOnly?: boolean;
+  onChange?: (document: SsmlDocument) => void;
+  onPreviewSelection?: (ssml: string) => void;
+}
+
+interface TextLeaf {
+  path: number[];
+  value: string;
+  ancestors: string[];
+}
+
+function isElement(node: SsmlNode): node is SsmlElement {
+  return typeof node !== "string" && node.type !== "text";
+}
+
+function elementLabel(element: SsmlElement): string {
+  return element.type === "custom" || element.type === "element" ? element.name : element.type;
+}
+
+function collectTextLeaves(nodes: SsmlNode[], path: number[] = [], ancestors: string[] = []): TextLeaf[] {
+  return nodes.flatMap((node, index) => {
+    const currentPath = [...path, index];
+    if (typeof node === "string") return [{ ancestors, path: currentPath, value: node }];
+    if (node.type === "text") return [{ ancestors, path: currentPath, value: node.value }];
+    return collectTextLeaves(node.children ?? [], currentPath, [...ancestors, elementLabel(node)]);
+  });
+}
+
+function updateNodesAtPath(
+  nodes: SsmlNode[],
+  path: number[],
+  update: (node: SsmlNode) => SsmlNode | SsmlNode[],
+): SsmlNode[] {
+  if (path.length === 0) return nodes;
+  const [index, ...rest] = path;
+  return nodes.flatMap((node, nodeIndex) => {
+    if (nodeIndex !== index) return [node];
+    if (rest.length === 0) {
+      const next = update(node);
+      return Array.isArray(next) ? next : [next];
+    }
+    if (!isElement(node)) return [node];
+    return [{ ...node, children: updateNodesAtPath(node.children ?? [], rest, update) }];
+  });
+}
+
+function updateTextAtPath(document: SsmlDocument, path: number[], value: string): SsmlDocument {
+  return { ...document, children: updateNodesAtPath(document.children ?? [], path, () => value) };
+}
+
+function wrapTextAtPath(
+  document: SsmlDocument,
+  path: number[],
+  start: number,
+  end: number,
+  tag: SsmlElement["type"],
+  attributes: Record<string, string>,
+): SsmlDocument {
+  return {
+    ...document,
+    children: updateNodesAtPath(document.children ?? [], path, (node) => {
+      const value = typeof node === "string" ? node : node.type === "text" ? node.value : "";
+      if (!value || start === end) return node;
+      if (tag === "break") {
+        return [
+          value.slice(0, start),
+          { type: tag, attributes, children: [] } as SsmlElement,
+          value.slice(start),
+        ].filter((part) => (typeof part === "string" ? part.length > 0 : true));
+      }
+      const selected = value.slice(start, end);
+      const wrapped = { type: tag, attributes, children: [selected] } as SsmlElement;
+      return [value.slice(0, start), wrapped, value.slice(end)].filter((part) =>
+        typeof part === "string" ? part.length > 0 : true,
+      );
+    }),
+  };
+}
+
+function TreeNode({
+  node,
+  path,
+  selectedPath,
+  onSelect,
+}: {
+  node: SsmlNode;
+  path: number[];
+  selectedPath: number[] | null;
+  onSelect: (path: number[]) => void;
+}): ReactElement | null {
+  if (!isElement(node)) return null;
+  const name = elementLabel(node);
+  const isSelected = selectedPath?.join(".") === path.join(".");
+  return (
+    <li>
+      <button type="button" aria-current={isSelected ? "true" : undefined} onClick={() => onSelect(path)}>
+        {`<${name}>`}
+      </button>
+      {(node.children ?? []).length > 0 && (
+        <ul>
+          {node.children?.map((child, index) => (
+            <TreeNode
+              key={`${path.join(".")}/${isElement(child) ? elementLabel(child) : JSON.stringify(child)}`}
+              node={child}
+              path={[...path, index]}
+              selectedPath={selectedPath}
+              onSelect={onSelect}
+            />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+export function VisualSsmlEditor({
+  document,
+  readOnly = false,
+  onChange,
+  onPreviewSelection,
+}: VisualSsmlEditorProps): ReactElement {
+  const [selectedPath, setSelectedPath] = useState<number[] | null>(null);
+  const [selection, setSelection] = useState({ start: 0, end: 0 });
+  const textLeaves = useMemo(() => collectTextLeaves(document.children ?? []), [document]);
+  const selectedLeaf = textLeaves.find((leaf) => leaf.path.join(".") === selectedPath?.join(".")) ?? textLeaves[0];
+  const diagnostics = useMemo(() => validateAzureSsml(buildSsml(document)), [document]);
+  const commit = (nextDocument: SsmlDocument): void => onChange?.(nextDocument);
+
+  const applyWrapper = (tag: SsmlElement["type"], attributes: Record<string, string>): void => {
+    if (readOnly || !selectedLeaf) return;
+    const start = selection.start === selection.end ? 0 : selection.start;
+    const end = selection.start === selection.end ? selectedLeaf.value.length : selection.end;
+    commit(wrapTextAtPath(document, selectedLeaf.path, start, end, tag, attributes));
+  };
+
+  return (
+    <div className="ssml-editor-visual" data-ssml-editor-visual="">
+      <fieldset className="ssml-editor-visual-breadcrumb">
+        <legend>SSML structure breadcrumb</legend>
+        <span>&lt;speak&gt;</span>
+        {selectedLeaf?.ancestors.map((ancestor, index) => (
+          <span key={selectedLeaf?.ancestors.slice(0, index + 1).join("/")}> / &lt;{ancestor}&gt;</span>
+        ))}
+        {selectedPath && (
+          <button type="button" onClick={() => setSelectedPath(null)}>
+            Clear parent
+          </button>
+        )}
+      </fieldset>
+      {diagnostics.length > 0 && (
+        <div role="alert" aria-invalid="true" className="ssml-editor-visual-errors">
+          {diagnostics.map((diagnostic) => (
+            <div key={`${diagnostic.code}-${diagnostic.message}`}>{diagnostic.message}</div>
+          ))}
+        </div>
+      )}
+      <div className="ssml-editor-visual-layout">
+        <nav aria-label="SSML structure tree" className="ssml-editor-visual-tree">
+          <strong>Structure</strong>
+          <ul>
+            {document.children?.map((node, index) => (
+              <TreeNode
+                key={isElement(node) ? elementLabel(node) : JSON.stringify(node)}
+                node={node}
+                path={[index]}
+                selectedPath={selectedPath}
+                onSelect={setSelectedPath}
+              />
+            ))}
+          </ul>
+        </nav>
+        <div className="ssml-editor-visual-form">
+          {selectedLeaf ? (
+            <>
+              <label>
+                Text
+                <textarea
+                  value={selectedLeaf.value}
+                  readOnly={readOnly}
+                  onSelect={(event) =>
+                    setSelection({ start: event.currentTarget.selectionStart, end: event.currentTarget.selectionEnd })
+                  }
+                  onChange={(event) => commit(updateTextAtPath(document, selectedLeaf.path, event.target.value))}
+                />
+              </label>
+              <fieldset className="ssml-editor-visual-actions">
+                <legend>Apply SSML formatting</legend>
+                <button type="button" disabled={readOnly} onClick={() => applyWrapper("prosody", { rate: "slow" })}>
+                  Rate
+                </button>
+                <button type="button" disabled={readOnly} onClick={() => applyWrapper("prosody", { pitch: "high" })}>
+                  Pitch
+                </button>
+                <button
+                  type="button"
+                  disabled={readOnly}
+                  onClick={() => applyWrapper("mstts:express-as", { style: "cheerful" })}
+                >
+                  Emotion
+                </button>
+                <button type="button" disabled={readOnly} onClick={() => applyWrapper("break", { time: "500ms" })}>
+                  Pause
+                </button>
+                <button
+                  type="button"
+                  disabled={readOnly}
+                  onClick={() => applyWrapper("phoneme", { alphabet: "ipa", ph: selectedLeaf.value })}
+                >
+                  Pronunciation
+                </button>
+                {onPreviewSelection && (
+                  <button
+                    type="button"
+                    onClick={() => onPreviewSelection(buildSsml({ ...document, children: [selectedLeaf.value] }))}
+                  >
+                    Preview selection
+                  </button>
+                )}
+              </fieldset>
+            </>
+          ) : (
+            <p>Select an element or text node to edit it.</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/constants/azureVoiceStyleMap.generated.ts

@@ -0,0 +1,94 @@
+/** Generated by scripts/sync-azure-voices.ts. */
+export const AZURE_VOICE_STYLE_MAP = {
+  "de-DE-ConradNeural": ["cheerful", "sad"],
+  "de-DE-KatjaNeural": ["cheerful", "sad"],
+  "en-US-AndrewNeural": ["empathetic", "relieved"],
+  "en-US-GuyNeural": [
+    "angry",
+    "cheerful",
+    "excited",
+    "friendly",
+    "hopeful",
+    "newscast",
+    "sad",
+    "shouting",
+    "terrified",
+    "unfriendly",
+    "whispering",
+  ],
+  "en-US-JennyMultilingualNeural": [
+    "cheerful",
+    "empathetic",
+    "excited",
+    "friendly",
+    "hopeful",
+    "sad",
+    "shouting",
+    "terrified",
+    "unfriendly",
+    "whispering",
+  ],
+  "en-US-JennyNeural": [
+    "assistant",
+    "chat",
+    "customerservice",
+    "newscast",
+    "cheerful",
+    "empathetic",
+    "excited",
+    "friendly",
+    "hopeful",
+    "sad",
+    "shouting",
+    "terrified",
+    "unfriendly",
+    "whispering",
+  ],
+  "es-ES-ElviraNeural": [],
+  "fil-PH-AngeloNeural": [],
+  "fr-FR-DeniseNeural": ["cheerful", "sad"],
+  "fr-FR-HenriNeural": ["cheerful", "sad"],
+  "id-ID-GadisNeural": [],
+  "it-IT-ElsaNeural": ["cheerful", "sad"],
+  "ja-JP-KeitaNeural": ["chat"],
+  "ja-JP-MayuNeural": ["calm", "cheerful", "sad"],
+  "ja-JP-NanamiNeural": ["chat", "customerservice", "cheerful", "whispering", "sad"],
+  "ko-KR-SunHiNeural": ["cheerful", "sad"],
+  "ms-MY-YasminNeural": [],
+  "pt-BR-FranciscaNeural": ["calm"],
+  "ru-RU-SvetlanaNeural": ["cheerful", "sad", "angry", "disgruntled", "embarrassed", "fearful"],
+  "th-TH-PremwadeeNeural": [],
+  "vi-VN-HoaiMyNeural": [],
+  "zh-CN-XiaoxiaoNeural": [
+    "assistant",
+    "chat",
+    "customerservice",
+    "newscast",
+    "cheerful",
+    "empathetic",
+    "excited",
+    "friendly",
+    "hopeful",
+    "sad",
+    "terrified",
+    "whispering",
+    "poetry-reading",
+    "sports_commentary",
+    "sports_commentary_excited",
+    "story",
+  ],
+  "zh-CN-YunxiNeural": [
+    "narration-relaxed",
+    "embarrassed",
+    "fearful",
+    "sad",
+    "disgruntled",
+    "serious",
+    "angry",
+    "depressed",
+    "chat",
+    "cheerful",
+    "assistant",
+  ],
+  "zh-TW-HsiaoChenNeural": [],
+} as const satisfies Readonly<Record<string, readonly string[]>>;