diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts index 111dbcb0b6..6717a6860a 100644 --- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts +++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts @@ -29,6 +29,7 @@ import { haStyleDialog } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; import { documentationUrl } from "../../util/documentation-url"; import type { VoiceCommandDialogParams } from "./show-ha-voice-command-dialog"; +import "../../components/ha-tip"; @customElement("ha-voice-command-dialog") export class HaVoiceCommandDialog extends LitElement { @@ -51,6 +52,8 @@ export class HaVoiceCommandDialog extends LitElement { @state() private _errorLoadAssist?: "not_found" | "unknown"; + @state() private _hint?: string; + private _startListening = false; public async showDialog( @@ -68,6 +71,7 @@ export class HaVoiceCommandDialog extends LitElement { this._startListening = params.start_listening; this._opened = true; + this._hint = params.hint; } public async closeDialog(): Promise { @@ -185,6 +189,9 @@ export class HaVoiceCommandDialog extends LitElement { size="large" > `} + ${this._hint + ? html`${this._hint}` + : nothing} `; } @@ -247,7 +254,7 @@ export class HaVoiceCommandDialog extends LitElement { css` ha-dialog { --mdc-dialog-max-width: 500px; - --mdc-dialog-max-height: 500px; + --mdc-dialog-max-height: 550px; --dialog-content-padding: 0; } ha-dialog-header a { @@ -312,6 +319,9 @@ export class HaVoiceCommandDialog extends LitElement { margin: 0 24px 16px; min-height: 399px; } + ha-tip { + padding-bottom: 16px; + } `, ]; } diff --git a/src/dialogs/voice-command-dialog/show-ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/show-ha-voice-command-dialog.ts index 2ac41a5d9a..e027839d7e 100644 --- a/src/dialogs/voice-command-dialog/show-ha-voice-command-dialog.ts +++ b/src/dialogs/voice-command-dialog/show-ha-voice-command-dialog.ts @@ -6,6 +6,7 @@ const loadVoiceCommandDialog = () => import("./ha-voice-command-dialog"); export interface VoiceCommandDialogParams { pipeline_id: "last_used" | "preferred" | string; start_listening?: boolean; + hint?: string; } export const showVoiceCommandDialog = ( @@ -31,6 +32,7 @@ export const showVoiceCommandDialog = ( pipeline_id: dialogParams.pipeline_id, // Don't start listening by default for web start_listening: dialogParams.start_listening ?? false, + hint: dialogParams.hint, }, }); }; diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 8a56f7a9cf..eb621a9648 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -730,7 +730,12 @@ class HUIRoot extends LitElement { } private _showVoiceCommandDialog(): void { - showVoiceCommandDialog(this, this.hass, { pipeline_id: "last_used" }); + showVoiceCommandDialog(this, this.hass, { + pipeline_id: "last_used", + hint: this.hass.enableShortcuts + ? this.hass.localize("ui.tips.key_a_hint") + : undefined, + }); } private _handleEnableEditMode(ev: CustomEvent): void {