Remove default options from tts/stt/conversation agent (#16236)

This commit is contained in:
Bram Kragten 2023-04-19 14:05:25 +02:00 committed by GitHub
parent c470ced308
commit 0ce3757b80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 89 additions and 49 deletions

View File

@ -15,7 +15,7 @@ import "./ha-list-item";
import "./ha-select"; import "./ha-select";
import type { HaSelect } from "./ha-select"; import type { HaSelect } from "./ha-select";
const DEFAULT = "default_agent_option"; const NONE = "__NONE_OPTION__";
@customElement("ha-conversation-agent-picker") @customElement("ha-conversation-agent-picker")
export class HaConversationAgentPicker extends LitElement { export class HaConversationAgentPicker extends LitElement {
@property() public value?: string; @property() public value?: string;
@ -36,7 +36,7 @@ export class HaConversationAgentPicker extends LitElement {
if (!this._agents) { if (!this._agents) {
return nothing; return nothing;
} }
const value = this.value ?? DEFAULT; const value = this.value ?? (this.required ? this._defaultAgent : NONE);
return html` return html`
<ha-select <ha-select
.label=${this.label || .label=${this.label ||
@ -51,16 +51,13 @@ export class HaConversationAgentPicker extends LitElement {
fixedMenuPosition fixedMenuPosition
naturalMenuWidth naturalMenuWidth
> >
<ha-list-item .value=${DEFAULT}> ${!this.required
${this.hass!.localize( ? html`<ha-list-item .value=${NONE}>
"ui.components.coversation-agent-picker.default", ${this.hass!.localize(
{ "ui.components.coversation-agent-picker.none"
default: this._agents.find( )}
(agent) => agent.id === this._defaultAgent </ha-list-item>`
)?.name, : nothing}
}
)}
</ha-list-item>
${this._agents.map( ${this._agents.map(
(agent) => (agent) =>
html`<ha-list-item .value=${agent.id}>${agent.name}</ha-list-item>` html`<ha-list-item .value=${agent.id}>${agent.name}</ha-list-item>`
@ -93,11 +90,11 @@ export class HaConversationAgentPicker extends LitElement {
!this.hass || !this.hass ||
target.value === "" || target.value === "" ||
target.value === this.value || target.value === this.value ||
(this.value === undefined && target.value === DEFAULT) (this.value === undefined && target.value === NONE)
) { ) {
return; return;
} }
this.value = target.value === DEFAULT ? undefined : target.value; this.value = target.value === NONE ? undefined : target.value;
fireEvent(this, "value-changed", { value: this.value }); fireEvent(this, "value-changed", { value: this.value });
} }
} }

View File

@ -3,20 +3,22 @@ import {
CSSResultGroup, CSSResultGroup,
html, html,
LitElement, LitElement,
PropertyValueMap, nothing,
PropertyValues,
TemplateResult, TemplateResult,
} from "lit"; } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import { stopPropagation } from "../common/dom/stop_propagation"; import { stopPropagation } from "../common/dom/stop_propagation";
import { computeStateName } from "../common/entity/compute_state_name"; import { computeStateName } from "../common/entity/compute_state_name";
import { debounce } from "../common/util/debounce";
import { listSTTEngines, STTEngine } from "../data/stt"; import { listSTTEngines, STTEngine } from "../data/stt";
import { HomeAssistant } from "../types"; import { HomeAssistant } from "../types";
import "./ha-list-item"; import "./ha-list-item";
import "./ha-select"; import "./ha-select";
import type { HaSelect } from "./ha-select"; import type { HaSelect } from "./ha-select";
const DEFAULT = "default_engine_option"; const NONE = "__NONE_OPTION__";
@customElement("ha-stt-picker") @customElement("ha-stt-picker")
export class HaSTTPicker extends LitElement { export class HaSTTPicker extends LitElement {
@ -35,7 +37,11 @@ export class HaSTTPicker extends LitElement {
@state() _engines: STTEngine[] = []; @state() _engines: STTEngine[] = [];
protected render(): TemplateResult { protected render(): TemplateResult {
const value = this.value ?? DEFAULT; const value =
this.value ??
(this.required
? this._engines.find((engine) => engine.language_supported)
: NONE);
return html` return html`
<ha-select <ha-select
.label=${this.label || .label=${this.label ||
@ -48,9 +54,11 @@ export class HaSTTPicker extends LitElement {
fixedMenuPosition fixedMenuPosition
naturalMenuWidth naturalMenuWidth
> >
<ha-list-item .value=${DEFAULT}> ${!this.required
${this.hass!.localize("ui.components.stt-picker.default")} ? html`<ha-list-item .value=${NONE}>
</ha-list-item> ${this.hass!.localize("ui.components.stt-picker.none")}
</ha-list-item>`
: nothing}
${this._engines.map((engine) => { ${this._engines.map((engine) => {
const stateObj = this.hass!.states[engine.engine_id]; const stateObj = this.hass!.states[engine.engine_id];
return html`<ha-list-item return html`<ha-list-item
@ -64,14 +72,27 @@ export class HaSTTPicker extends LitElement {
`; `;
} }
protected willUpdate( protected willUpdate(changedProperties: PropertyValues<this>): void {
changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
): void {
super.willUpdate(changedProperties); super.willUpdate(changedProperties);
if (!this.hasUpdated || changedProperties.has("language")) { if (!this.hasUpdated) {
listSTTEngines(this.hass, this.language).then((engines) => { this._updateEngines();
this._engines = engines.providers; } else if (changedProperties.has("language")) {
}); this._debouncedUpdateEngines();
}
}
private _debouncedUpdateEngines = debounce(() => this._updateEngines(), 500);
private async _updateEngines() {
this._engines = (await listSTTEngines(this.hass, this.language)).providers;
if (
this.value &&
!this._engines.find((engine) => engine.engine_id === this.value)
?.language_supported
) {
this.value = undefined;
fireEvent(this, "value-changed", { value: this.value });
} }
} }
@ -89,11 +110,11 @@ export class HaSTTPicker extends LitElement {
!this.hass || !this.hass ||
target.value === "" || target.value === "" ||
target.value === this.value || target.value === this.value ||
(this.value === undefined && target.value === DEFAULT) (this.value === undefined && target.value === NONE)
) { ) {
return; return;
} }
this.value = target.value === DEFAULT ? undefined : target.value; this.value = target.value === NONE ? undefined : target.value;
fireEvent(this, "value-changed", { value: this.value }); fireEvent(this, "value-changed", { value: this.value });
} }
} }

View File

@ -1,22 +1,24 @@
import { debounce } from "chart.js/helpers";
import { import {
css, css,
CSSResultGroup, CSSResultGroup,
html, html,
LitElement, LitElement,
PropertyValueMap, nothing,
PropertyValues,
TemplateResult, TemplateResult,
} from "lit"; } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import { stopPropagation } from "../common/dom/stop_propagation"; import { stopPropagation } from "../common/dom/stop_propagation";
import { computeStateName } from "../common/entity/compute_state_name"; import { computeStateName } from "../common/entity/compute_state_name";
import { TTSEngine, listTTSEngines } from "../data/tts"; import { listTTSEngines, TTSEngine } from "../data/tts";
import { HomeAssistant } from "../types"; import { HomeAssistant } from "../types";
import "./ha-select";
import "./ha-list-item"; import "./ha-list-item";
import "./ha-select";
import type { HaSelect } from "./ha-select"; import type { HaSelect } from "./ha-select";
const DEFAULT = "default_engine_option"; const NONE = "__NONE_OPTION__";
@customElement("ha-tts-picker") @customElement("ha-tts-picker")
export class HaTTSPicker extends LitElement { export class HaTTSPicker extends LitElement {
@ -35,7 +37,11 @@ export class HaTTSPicker extends LitElement {
@state() _engines: TTSEngine[] = []; @state() _engines: TTSEngine[] = [];
protected render(): TemplateResult { protected render(): TemplateResult {
const value = this.value ?? DEFAULT; const value =
this.value ??
(this.required
? this._engines.find((engine) => engine.language_supported)
: NONE);
return html` return html`
<ha-select <ha-select
.label=${this.label || .label=${this.label ||
@ -48,9 +54,11 @@ export class HaTTSPicker extends LitElement {
fixedMenuPosition fixedMenuPosition
naturalMenuWidth naturalMenuWidth
> >
<ha-list-item .value=${DEFAULT}> ${!this.required
${this.hass!.localize("ui.components.tts-picker.default")} ? html`<ha-list-item .value=${NONE}>
</ha-list-item> ${this.hass!.localize("ui.components.tts-picker.none")}
</ha-list-item>`
: nothing}
${this._engines.map((engine) => { ${this._engines.map((engine) => {
const stateObj = this.hass!.states[engine.engine_id]; const stateObj = this.hass!.states[engine.engine_id];
return html`<ha-list-item return html`<ha-list-item
@ -64,14 +72,27 @@ export class HaTTSPicker extends LitElement {
`; `;
} }
protected willUpdate( protected willUpdate(changedProperties: PropertyValues<this>): void {
changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
): void {
super.willUpdate(changedProperties); super.willUpdate(changedProperties);
if (!this.hasUpdated || changedProperties.has("language")) { if (!this.hasUpdated) {
listTTSEngines(this.hass, this.language).then((engines) => { this._updateEngines();
this._engines = engines.providers; } else if (changedProperties.has("language")) {
}); this._debouncedUpdateEngines();
}
}
private _debouncedUpdateEngines = debounce(() => this._updateEngines(), 500);
private async _updateEngines() {
this._engines = (await listTTSEngines(this.hass, this.language)).providers;
if (
this.value &&
!this._engines.find((engine) => engine.engine_id === this.value)
?.language_supported
) {
this.value = undefined;
fireEvent(this, "value-changed", { value: this.value });
} }
} }
@ -89,11 +110,11 @@ export class HaTTSPicker extends LitElement {
!this.hass || !this.hass ||
target.value === "" || target.value === "" ||
target.value === this.value || target.value === this.value ||
(this.value === undefined && target.value === DEFAULT) (this.value === undefined && target.value === NONE)
) { ) {
return; return;
} }
this.value = target.value === DEFAULT ? undefined : target.value; this.value = target.value === NONE ? undefined : target.value;
fireEvent(this, "value-changed", { value: this.value }); fireEvent(this, "value-changed", { value: this.value });
} }
} }

View File

@ -131,6 +131,7 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
}, },
{ {
name: "conversation_engine", name: "conversation_engine",
required: true,
selector: { selector: {
conversation_agent: {}, conversation_agent: {},
}, },

View File

@ -403,7 +403,7 @@
}, },
"coversation-agent-picker": { "coversation-agent-picker": {
"conversation_agent": "Conversation agent", "conversation_agent": "Conversation agent",
"default": "Default agent ({default})" "none": "None"
}, },
"theme-picker": { "theme-picker": {
"theme": "Theme", "theme": "Theme",
@ -411,7 +411,7 @@
}, },
"tts-picker": { "tts-picker": {
"tts": "Text to Speech", "tts": "Text to Speech",
"default": "Default" "none": "None"
}, },
"user-picker": { "user-picker": {
"no_user": "No user", "no_user": "No user",
@ -466,7 +466,7 @@
} }
} }
}, },
"stt-picker": { "stt": "Speech to text", "default": "Default" }, "stt-picker": { "stt": "Speech to text", "none": "None" },
"related-filter-menu": { "related-filter-menu": {
"filter": "Filter", "filter": "Filter",
"filter_by_entity": "Filter by entity", "filter_by_entity": "Filter by entity",