Add shortcut hint to assist dialog (#23739)

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

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<void> {
@@ -185,6 +189,9 @@ export class HaVoiceCommandDialog extends LitElement {
                   size="large"
                 ></ha-circular-progress>
               </div>`}
+        ${this._hint
+          ? html`<ha-tip .hass=${this.hass}>${this._hint}</ha-tip>`
+          : nothing}
       </ha-dialog>
     `;
   }
@@ -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;
+        }
       `,
     ];
   }

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,
     },
   });
 };

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<RequestSelectedDetail>): void {