Add language to conversation agent picker (#16244)

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

@@ -4,11 +4,12 @@ import {
   html,
   LitElement,
   nothing,
-  PropertyValueMap,
+  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 { Agent, listAgents } from "../data/conversation";
 import { HomeAssistant } from "../types";
 import "./ha-list-item";
@@ -20,6 +21,8 @@ const NONE = "__NONE_OPTION__";
 export class HaConversationAgentPicker extends LitElement {
   @property() public value?: string;
 
+  @property() public language?: string;
+
   @property() public label?: string;
 
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -30,13 +33,11 @@ export class HaConversationAgentPicker extends LitElement {
 
   @state() _agents?: Agent[];
 
-  @state() _defaultAgent: string | null = null;
-
   protected render() {
     if (!this._agents) {
       return nothing;
     }
-    const value = this.value ?? (this.required ? this._defaultAgent : NONE);
+    const value = this.value ?? (this.required ? "homeassistant" : NONE);
     return html`
       <ha-select
         .label=${this.label ||
@@ -60,20 +61,41 @@ export class HaConversationAgentPicker extends LitElement {
           : nothing}
         ${this._agents.map(
           (agent) =>
-            html`<ha-list-item .value=${agent.id}>${agent.name}</ha-list-item>`
+            html`<ha-list-item
+              .value=${agent.id}
+              .disabled=${agent.language_supported === false}
+            >
+              ${agent.name}
+            </ha-list-item>`
         )}
       </ha-select>
     `;
   }
 
-  protected firstUpdated(
-    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
-  ): void {
-    super.firstUpdated(changedProperties);
-    listAgents(this.hass).then((agents) => {
-      this._agents = agents.agents;
-      this._defaultAgent = agents.default_agent;
-    });
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+    if (!this.hasUpdated) {
+      this._updateAgents();
+    } else if (changedProperties.has("language")) {
+      this._debouncedUpdateAgents();
+    }
+  }
+
+  private _debouncedUpdateAgents = debounce(() => this._updateAgents(), 500);
+
+  private async _updateAgents() {
+    const { agents } = await listAgents(this.hass, this.language);
+
+    this._agents = agents;
+
+    if (
+      this.value &&
+      agents.find((agent) => agent.id === this.value)?.language_supported ===
+        false
+    ) {
+      this.value = undefined;
+      fireEvent(this, "value-changed", { value: this.value });
+    }
   }
 
   static get styles(): CSSResultGroup {

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

@@ -20,10 +20,16 @@ export class HaConversationAgentSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @property({ attribute: false }) public context?: {
+    language?: string;
+  };
+
   protected render() {
     return html`<ha-conversation-agent-picker
       .hass=${this.hass}
       .value=${this.value}
+      .language=${this.selector.conversation_agent?.language ||
+      this.context?.language}
       .label=${this.label}
       .helper=${this.helper}
       .disabled=${this.disabled}

src/components/ha-stt-picker.ts

@@ -90,8 +90,8 @@ export class HaSTTPicker extends LitElement {
 
     if (
       this.value &&
-      !this._engines.find((engine) => engine.engine_id === this.value)
-        ?.language_supported
+      this._engines.find((engine) => engine.engine_id === this.value)
+        ?.language_supported === false
     ) {
       this.value = undefined;
       fireEvent(this, "value-changed", { value: this.value });

src/components/ha-tts-picker.ts

@@ -1,4 +1,3 @@
-import { debounce } from "chart.js/helpers";
 import {
   css,
   CSSResultGroup,
@@ -11,6 +10,7 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { computeStateName } from "../common/entity/compute_state_name";
+import { debounce } from "../common/util/debounce";
 import { listTTSEngines, TTSEngine } from "../data/tts";
 import { HomeAssistant } from "../types";
 import "./ha-list-item";
@@ -90,8 +90,8 @@ export class HaTTSPicker extends LitElement {
 
     if (
       this.value &&
-      !this._engines.find((engine) => engine.engine_id === this.value)
-        ?.language_supported
+      this._engines.find((engine) => engine.engine_id === this.value)
+        ?.language_supported === false
     ) {
       this.value = undefined;
       fireEvent(this, "value-changed", { value: this.value });

src/data/conversation.ts

@@ -59,6 +59,7 @@ export interface AgentInfo {
 export interface Agent {
   id: string;
   name: string;
+  language_supported: boolean;
 }
 
 export const processConversationInput = (
@@ -76,10 +77,12 @@ export const processConversationInput = (
   });
 
 export const listAgents = (
-  hass: HomeAssistant
-): Promise<{ agents: Agent[]; default_agent: string | null }> =>
+  hass: HomeAssistant,
+  language?: string
+): Promise<{ agents: Agent[] }> =>
   hass.callWS({
     type: "conversation/agent/list",
+    language,
   });
 
 export const getAgentInfo = (

src/data/selector.ts

@@ -89,8 +89,7 @@ export interface ColorTempSelector {
 }
 
 export interface ConversationAgentSelector {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  conversation_agent: {} | null;
+  conversation_agent: { language?: string } | null;
 }
 
 export interface ConfigEntrySelector {

src/panels/config/voice-assistants/dialog-voice-assistant-pipeline-detail.ts

@@ -129,13 +129,6 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
             text: {},
           },
         },
-        {
-          name: "conversation_engine",
-          required: true,
-          selector: {
-            conversation_agent: {},
-          },
-        },
         {
           name: "language",
           required: true,
@@ -143,6 +136,14 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
             text: {},
           },
         },
+        {
+          name: "conversation_engine",
+          required: true,
+          selector: {
+            conversation_agent: {},
+          },
+          context: { language: "language" },
+        },
         {
           name: "stt_engine",
           selector: {

src/panels/config/voice-assistants/ha-config-voice-assistants-assistants.ts

@@ -1,5 +1,5 @@
 import "@polymer/paper-item/paper-item";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
@@ -37,7 +37,9 @@ export class HaConfigVoiceAssistantsAssistants extends LitElement {
         .tabs=${voiceAssistantTabs}
       >
         <div class="content">
-          <assist-pref .hass=${this.hass}> </assist-pref>
+          ${isComponentLoaded(this.hass, "assist_pipeline")
+            ? html`<assist-pref .hass=${this.hass}></assist-pref>`
+            : nothing}
           ${this.cloudStatus?.logged_in
             ? html`<cloud-alexa-pref
                   .hass=${this.hass}