diff --git a/src/panels/config/voice-assistants/entity-voice-settings.ts b/src/panels/config/voice-assistants/entity-voice-settings.ts index fbe5de072e..8d614fc1eb 100644 --- a/src/panels/config/voice-assistants/entity-voice-settings.ts +++ b/src/panels/config/voice-assistants/entity-voice-settings.ts @@ -1,4 +1,11 @@ -import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit"; +import { + css, + CSSResultGroup, + html, + LitElement, + nothing, + PropertyValues, +} from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; @@ -148,12 +155,11 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) { const anyExposed = uiExposed || manExposedAlexa || manExposedGoogle; - return html` - ${this.hass.localize( - "ui.dialogs.voice-settings.expose_header" - )} + return html` + +

+ ${this.hass.localize("ui.dialogs.voice-settings.expose_header")} +

${anyExposed ? showAssistants.map( - (key) => html` - - ${voiceAssistants[key].name} - ${key === "cloud.google_assistant" && - !googleManual && - this._googleEntity?.might_2fa - ? html` - - ` - : (alexaManual && key === "cloud.alexa") || - (googleManual && key === "cloud.google_assistant") - ? html`${this.hass.localize( - "ui.dialogs.voice-settings.manual_config" - )}` - : ""} - - ` + (key) => html` + + + ${voiceAssistants[key].name} + ${key === "cloud.google_assistant" && + !googleManual && + this._googleEntity?.might_2fa + ? html` + + + + ` + : (alexaManual && key === "cloud.alexa") || + (googleManual && key === "cloud.google_assistant") + ? html` + + ${this.hass.localize( + "ui.dialogs.voice-settings.manual_config" + )} + + ` + : nothing} + + + ` ) - : ""} + : nothing} -

- ${this.hass.localize("ui.dialogs.voice-settings.aliasses_header")} +

+ ${this.hass.localize("ui.dialogs.voice-settings.aliases_header")}

+

+ ${this.hass.localize("ui.dialogs.voice-settings.aliases_description")} +

+ `; + > + `; } private _aliasesChanged(ev) { @@ -297,6 +314,7 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) { } img { height: 32px; + width: 32px; margin-right: 16px; } ha-aliases-editor { @@ -312,6 +330,17 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) { ha-checkbox { --mdc-checkbox-state-layer-size: 40px; } + .header { + margin-top: 8px; + margin-bottom: 4px; + } + .description { + color: var(--secondary-text-color); + font-size: 14px; + line-height: 20px; + margin-top: 0; + margin-bottom: 16px; + } `, ]; } @@ -325,3 +354,9 @@ declare global { "entity-entry-updated": ExtEntityRegistryEntry; } } + +declare global { + interface HTMLElementTagNameMap { + "entity-voice-settings": EntityVoiceSettings; + } +} diff --git a/src/translations/en.json b/src/translations/en.json index 6034c59a02..ef8afe17e2 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1071,7 +1071,8 @@ }, "voice-settings": { "expose_header": "Expose", - "aliasses_header": "Aliasses", + "aliases_header": "Aliases", + "aliases_description": "Aliases are supported by Assist and Google Assistant.", "ask_pin": "Ask for PIN", "manual_config": "Managed with filters in configuration.yaml" },