Pipelines: Add voice selector, implement supported languages (#16261)

src/components/ha-conversation-agent-picker.ts

@@ -94,6 +94,10 @@ export class HaConversationAgentPicker extends LitElement {
 
     const selectedAgent = agents.find((agent) => agent.id === this.value);
 
+    fireEvent(this, "supported-languages-changed", {
+      value: selectedAgent?.supported_languages,
+    });
+
     if (!selectedAgent || selectedAgent.supported_languages?.length === 0) {
       this.value = undefined;
       fireEvent(this, "value-changed", { value: this.value });
@@ -120,6 +124,10 @@ export class HaConversationAgentPicker extends LitElement {
     }
     this.value = target.value === NONE ? undefined : target.value;
     fireEvent(this, "value-changed", { value: this.value });
+    fireEvent(this, "supported-languages-changed", {
+      value: this._agents!.find((agent) => agent.id === this.value)
+        ?.supported_languages,
+    });
   }
 }
 
@@ -127,4 +135,7 @@ declare global {
   interface HTMLElementTagNameMap {
     "ha-conversation-agent-picker": HaConversationAgentPicker;
   }
+  interface HASSDomEvents {
+    "supported-languages-changed": { value: string[] | undefined };
+  }
 }

src/components/ha-language-picker.ts

@@ -3,8 +3,8 @@ import {
   CSSResultGroup,
   html,
   LitElement,
+  nothing,
   PropertyValues,
-  TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -74,7 +74,7 @@ export class HaLanguagePicker extends LitElement {
     );
   }
 
-  protected render(): TemplateResult {
+  protected render() {
     const value = this.value;
 
     const languageOptions = this._getLanguagesOptions(
@@ -83,6 +83,10 @@ export class HaLanguagePicker extends LitElement {
       this.nativeName
     );
 
+    if (languageOptions.length === 0) {
+      return nothing;
+    }
+
     return html`
       <ha-select
         .label=${this.label}

src/components/ha-selector/ha-selector-tts-voice.ts

@@ -0,0 +1,52 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { TTSVoiceSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-tts-voice-picker";
+
+@customElement("ha-selector-tts_voice")
+export class HaTTSVoiceSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: TTSVoiceSelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  @property({ attribute: false }) public context?: {
+    language?: string;
+    engineId?: string;
+  };
+
+  protected render() {
+    return html`<ha-tts-voice-picker
+      .hass=${this.hass}
+      .value=${this.value}
+      .label=${this.label}
+      .helper=${this.helper}
+      .language=${this.selector.tts_voice?.language || this.context?.language}
+      .engineId=${this.selector.tts_voice?.engineId || this.context?.engineId}
+      .disabled=${this.disabled}
+      .required=${this.required}
+    ></ha-tts-voice-picker>`;
+  }
+
+  static styles = css`
+    ha-tts-picker {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-tts-voice": HaTTSVoiceSelector;
+  }
+}

src/components/ha-selector/ha-selector.ts

@@ -42,6 +42,7 @@ const LOAD_ELEMENTS = {
   media: () => import("./ha-selector-media"),
   theme: () => import("./ha-selector-theme"),
   tts: () => import("./ha-selector-tts"),
+  tts_voice: () => import("./ha-selector-tts-voice"),
   location: () => import("./ha-selector-location"),
   color_temp: () => import("./ha-selector-color-temp"),
   ui_action: () => import("./ha-selector-ui-action"),

src/components/ha-stt-picker.ts

@@ -19,6 +19,8 @@ import type { HaSelect } from "./ha-select";
 
 const NONE = "__NONE_OPTION__";
 
+const NAME_MAP = { cloud: "Home Assistant Cloud" };
+
 @customElement("ha-stt-picker")
 export class HaSTTPicker extends LitElement {
   @property() public value?: string;
@@ -64,12 +66,18 @@ export class HaSTTPicker extends LitElement {
             </ha-list-item>`
           : nothing}
         ${this._engines.map((engine) => {
-          const stateObj = this.hass!.states[engine.engine_id];
+          let label = engine.engine_id;
+          if (engine.engine_id.includes(".")) {
+            const stateObj = this.hass!.states[engine.engine_id];
+            label = stateObj ? computeStateName(stateObj) : engine.engine_id;
+          } else if (engine.engine_id in NAME_MAP) {
+            label = NAME_MAP[engine.engine_id];
+          }
           return html`<ha-list-item
             .value=${engine.engine_id}
             .disabled=${engine.supported_languages?.length === 0}
           >
-            ${stateObj ? computeStateName(stateObj) : engine.engine_id}
+            ${label}
           </ha-list-item>`;
         })}
       </ha-select>
@@ -98,6 +106,10 @@ export class HaSTTPicker extends LitElement {
       (engine) => engine.engine_id === this.value
     );
 
+    fireEvent(this, "supported-languages-changed", {
+      value: selectedEngine?.supported_languages,
+    });
+
     if (!selectedEngine || selectedEngine.supported_languages?.length === 0) {
       this.value = undefined;
       fireEvent(this, "value-changed", { value: this.value });
@@ -124,6 +136,10 @@ export class HaSTTPicker extends LitElement {
     }
     this.value = target.value === NONE ? undefined : target.value;
     fireEvent(this, "value-changed", { value: this.value });
+    fireEvent(this, "supported-languages-changed", {
+      value: this._engines!.find((engine) => engine.engine_id === this.value)
+        ?.supported_languages,
+    });
   }
 }
 

src/components/ha-tts-picker.ts

@@ -19,6 +19,8 @@ import type { HaSelect } from "./ha-select";
 
 const NONE = "__NONE_OPTION__";
 
+const NAME_MAP = { cloud: "Home Assistant Cloud" };
+
 @customElement("ha-tts-picker")
 export class HaTTSPicker extends LitElement {
   @property() public value?: string;
@@ -64,12 +66,18 @@ export class HaTTSPicker extends LitElement {
             </ha-list-item>`
           : nothing}
         ${this._engines.map((engine) => {
-          const stateObj = this.hass!.states[engine.engine_id];
+          let label = engine.engine_id;
+          if (engine.engine_id.includes(".")) {
+            const stateObj = this.hass!.states[engine.engine_id];
+            label = stateObj ? computeStateName(stateObj) : engine.engine_id;
+          } else if (engine.engine_id in NAME_MAP) {
+            label = NAME_MAP[engine.engine_id];
+          }
           return html`<ha-list-item
             .value=${engine.engine_id}
             .disabled=${engine.supported_languages?.length === 0}
           >
-            ${stateObj ? computeStateName(stateObj) : engine.engine_id}
+            ${label}
           </ha-list-item>`;
         })}
       </ha-select>
@@ -98,6 +106,10 @@ export class HaTTSPicker extends LitElement {
       (engine) => engine.engine_id === this.value
     );
 
+    fireEvent(this, "supported-languages-changed", {
+      value: selectedEngine?.supported_languages,
+    });
+
     if (!selectedEngine || selectedEngine.supported_languages?.length === 0) {
       this.value = undefined;
       fireEvent(this, "value-changed", { value: this.value });
@@ -124,6 +136,10 @@ export class HaTTSPicker extends LitElement {
     }
     this.value = target.value === NONE ? undefined : target.value;
     fireEvent(this, "value-changed", { value: this.value });
+    fireEvent(this, "supported-languages-changed", {
+      value: this._engines!.find((engine) => engine.engine_id === this.value)
+        ?.supported_languages,
+    });
   }
 }
 

src/components/ha-tts-voice-picker.ts

@@ -0,0 +1,130 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
+import { debounce } from "../common/util/debounce";
+import { listTTSVoices } from "../data/tts";
+import { HomeAssistant } from "../types";
+import "./ha-list-item";
+import "./ha-select";
+import type { HaSelect } from "./ha-select";
+
+const NONE = "__NONE_OPTION__";
+
+@customElement("ha-tts-voice-picker")
+export class HaTTSVoicePicker extends LitElement {
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property() public engineId?: string;
+
+  @property() public language?: string;
+
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @state() _voices?: string[] | null;
+
+  protected render() {
+    if (!this._voices) {
+      return nothing;
+    }
+    const value = this.value ?? (this.required ? this._voices[0] : NONE);
+    return html`
+      <ha-select
+        .label=${this.label ||
+        this.hass!.localize("ui.components.tts-voice-picker.voice")}
+        .value=${value}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        @selected=${this._changed}
+        @closed=${stopPropagation}
+        fixedMenuPosition
+        naturalMenuWidth
+      >
+        ${!this.required
+          ? html`<ha-list-item .value=${NONE}>
+              ${this.hass!.localize("ui.components.tts-voice-picker.none")}
+            </ha-list-item>`
+          : nothing}
+        ${this._voices.map(
+          (voice) => html`<ha-list-item .value=${voice}>
+            ${voice}
+          </ha-list-item>`
+        )}
+      </ha-select>
+    `;
+  }
+
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+    if (!this.hasUpdated) {
+      this._updateVoices();
+    } else if (
+      changedProperties.has("language") ||
+      changedProperties.has("engineId")
+    ) {
+      this._debouncedUpdateVoices();
+    }
+  }
+
+  private _debouncedUpdateVoices = debounce(() => this._updateVoices(), 500);
+
+  private async _updateVoices() {
+    if (!this.engineId || !this.language) {
+      this._voices = undefined;
+      return;
+    }
+    this._voices = (
+      await listTTSVoices(this.hass, this.engineId, this.language)
+    ).voices;
+
+    if (!this.value) {
+      return;
+    }
+
+    if (!this._voices || !this._voices.includes(this.value)) {
+      this.value = undefined;
+      fireEvent(this, "value-changed", { value: this.value });
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-select {
+        width: 100%;
+      }
+    `;
+  }
+
+  private _changed(ev): void {
+    const target = ev.target as HaSelect;
+    if (
+      !this.hass ||
+      target.value === "" ||
+      target.value === this.value ||
+      (this.value === undefined && target.value === NONE)
+    ) {
+      return;
+    }
+    this.value = target.value === NONE ? undefined : target.value;
+    fireEvent(this, "value-changed", { value: this.value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tts-voice-picker": HaTTSVoicePicker;
+  }
+}

src/data/selector.ts

@@ -43,6 +43,7 @@ export type Selector =
   | ThemeSelector
   | TimeSelector
   | TTSSelector
+  | TTSVoiceSelector
   | UiActionSelector
   | UiColorSelector;
 
@@ -344,6 +345,10 @@ export interface TTSSelector {
   tts: { language?: string } | null;
 }
 
+export interface TTSVoiceSelector {
+  tts_voice: { engineId?: string; language?: string } | null;
+}
+
 export interface UiActionSelector {
   ui_action: {
     actions?: UiAction[];

src/data/tts.ts

@@ -42,7 +42,7 @@ export const listTTSVoices = (
   hass: HomeAssistant,
   engine_id: string,
   language: string
-): Promise<{ voices: TTSVoice[] }> =>
+): Promise<{ voices: string[] | null }> =>
   hass.callWS({
     type: "tts/engine/voices",
     engine_id,

src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts

@@ -1,5 +1,5 @@
 import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { SchemaUnion } from "../../../../components/ha-form/types";
 import { AssistPipeline } from "../../../../data/assist_pipeline";
@@ -11,8 +11,10 @@ export class AssistPipelineDetailConversation extends LitElement {
 
   @property() public data?: Partial<AssistPipeline>;
 
+  @state() private _supportedLanguages?: string[];
+
   private _schema = memoizeOne(
-    (language?: string) =>
+    (language?: string, supportedLanguages?: string[]) =>
       [
         {
           name: "",
@@ -29,8 +31,9 @@ export class AssistPipelineDetailConversation extends LitElement {
             },
             {
               name: "conversation_language",
+              required: true,
               selector: {
-                text: {},
+                language: { languages: supportedLanguages ?? [] },
               },
             },
           ] as const,
@@ -56,15 +59,20 @@ export class AssistPipelineDetailConversation extends LitElement {
           </p>
         </div>
         <ha-form
-          .schema=${this._schema(this.data?.language)}
+          .schema=${this._schema(this.data?.language, this._supportedLanguages)}
           .data=${this.data}
           .hass=${this.hass}
           .computeLabel=${this._computeLabel}
+          @supported-languages-changed=${this._supportedLanguagesChanged}
         ></ha-form>
       </div>
     `;
   }
 
+  private _supportedLanguagesChanged(ev) {
+    this._supportedLanguages = ev.detail.value;
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       .section {

src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts

@@ -1,5 +1,5 @@
 import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { SchemaUnion } from "../../../../components/ha-form/types";
 import { AssistPipeline } from "../../../../data/assist_pipeline";
@@ -11,8 +11,10 @@ export class AssistPipelineDetailSTT extends LitElement {
 
   @property() public data?: Partial<AssistPipeline>;
 
+  @state() private _supportedLanguages?: string[];
+
   private _schema = memoizeOne(
-    (language?: string) =>
+    (language?: string, supportedLanguages?: string[]) =>
       [
         {
           name: "",
@@ -28,8 +30,9 @@ export class AssistPipelineDetailSTT extends LitElement {
             },
             {
               name: "stt_language",
+              required: true,
               selector: {
-                text: {},
+                language: { languages: supportedLanguages ?? [] },
               },
             },
           ] as const,
@@ -55,15 +58,20 @@ export class AssistPipelineDetailSTT extends LitElement {
           </p>
         </div>
         <ha-form
-          .schema=${this._schema(this.data?.language)}
+          .schema=${this._schema(this.data?.language, this._supportedLanguages)}
           .data=${this.data}
           .hass=${this.hass}
           .computeLabel=${this._computeLabel}
+          @supported-languages-changed=${this._supportedLanguagesChanged}
         ></ha-form>
       </div>
     `;
   }
 
+  private _supportedLanguagesChanged(ev) {
+    this._supportedLanguages = ev.detail.value;
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       .section {

src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts

@@ -1,5 +1,5 @@
 import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { SchemaUnion } from "../../../../components/ha-form/types";
 import { AssistPipeline } from "../../../../data/assist_pipeline";
@@ -11,8 +11,10 @@ export class AssistPipelineDetailTTS extends LitElement {
 
   @property() public data?: Partial<AssistPipeline>;
 
+  @state() private _supportedLanguages?: string[];
+
   private _schema = memoizeOne(
-    (language?: string) =>
+    (language?: string, supportedLanguages?: string[]) =>
       [
         {
           name: "",
@@ -26,18 +28,20 @@ export class AssistPipelineDetailTTS extends LitElement {
                 },
               },
             },
-
             {
               name: "tts_language",
               selector: {
-                text: {},
+                language: { languages: supportedLanguages ?? [] },
               },
+              required: true,
             },
             {
               name: "tts_voice",
               selector: {
-                text: {},
+                tts_voice: {},
               },
+              context: { language: "tts_language", engineId: "tts_engine" },
+              required: true,
             },
           ] as const,
         },
@@ -63,15 +67,20 @@ export class AssistPipelineDetailTTS extends LitElement {
           </p>
         </div>
         <ha-form
-          .schema=${this._schema(this.data?.language)}
+          .schema=${this._schema(this.data?.language, this._supportedLanguages)}
           .data=${this.data}
           .hass=${this.hass}
           .computeLabel=${this._computeLabel}
+          @supported-languages-changed=${this._supportedLanguagesChanged}
         ></ha-form>
       </div>
     `;
   }
 
+  private _supportedLanguagesChanged(ev) {
+    this._supportedLanguages = ev.detail.value;
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       .section {

src/translations/en.json

@@ -417,6 +417,10 @@
         "tts": "Text to Speech",
         "none": "None"
       },
+      "tts-voice-picker": {
+        "voice": "Voice",
+        "none": "None"
+      },
       "user-picker": {
         "no_user": "No user",
         "add_user": "Add user",