disabled microphone button when not supported

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -1,3 +1,4 @@
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import "@material/mwc-button/mwc-button";
 import {
   mdiChevronDown,
@@ -109,7 +110,6 @@ export class HaVoiceCommandDialog extends LitElement {
     if (!this._opened) {
       return nothing;
     }
-    const supportsSTT = this._pipeline?.stt_engine && AudioRecorder.isSupported;
     return html`
       <ha-dialog
         open
@@ -202,11 +202,12 @@ export class HaVoiceCommandDialog extends LitElement {
             dialogInitialFocus
             iconTrailing
           >
-            <span slot="trailingIcon">
+            <div slot="trailingIcon">
               ${this._showSendButton
                 ? html`
                     <ha-icon-button
-                      class="listening-icon"
+                      id="microphone-button"
+                      class="move-end"
                       .path=${mdiSend}
                       @click=${this._handleSendMessage}
                       .label=${this.hass.localize(
@@ -215,8 +216,8 @@ export class HaVoiceCommandDialog extends LitElement {
                     >
                     </ha-icon-button>
                   `
-                : supportsSTT
+                : this._pipeline?.stt_engine
-                ? html`
+                ? html` <div class="move-end">
                     ${this._audioRecorder?.active
                       ? html`
                           <div class="bouncer">
@@ -226,17 +227,28 @@ export class HaVoiceCommandDialog extends LitElement {
                         `
                       : ""}
                     <ha-icon-button
-                      class="listening-icon"
+                      id="microphone-button"
-                      .path=${mdiMicrophone}
-                      @click=${this._toggleListening}
                       .label=${this.hass.localize(
                         "ui.dialogs.voice_command.start_listening"
                       )}
+                      .path=${mdiMicrophone}
+                      .disabled=${!AudioRecorder.isSupported}
+                      @click=${this._toggleListening}
                     >
                     </ha-icon-button>
-                  `
+                    ${!AudioRecorder.isSupported
+                      ? html`<simple-tooltip
+                          animation-delay="0"
+                          position="top"
+                          offset="1"
+                          >${this.hass.localize(
+                            "ui.dialogs.voice_command.stt_not_supported"
+                          )}</simple-tooltip
+                        >`
+                      : ""}
+                  </div>`
                 : ""}
-            </span>
+            </div>
           </ha-textfield>
           ${this._agentInfo && this._agentInfo.attribution
             ? html`
@@ -561,18 +573,20 @@ export class HaVoiceCommandDialog extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-icon-button.listening-icon {
+        #microphone-button {
           color: var(--secondary-text-color);
-          margin-right: -24px;
-          margin-inline-end: -24px;
-          margin-inline-start: initial;
           direction: var(--direction);
         }
-
+        #microphone-button[active] {
-        ha-icon-button.listening-icon[active] {
           color: var(--primary-color);
         }
-
+        .move-end {
+          position: relative;
+          right: -24px;
+        }
+        simple-tooltip {
+          top: 0;
+        }
         ha-dialog {
           --primary-action-button-flex: 1;
           --secondary-action-button-flex: 0;
@@ -622,7 +636,6 @@ export class HaVoiceCommandDialog extends LitElement {
         }
         ha-textfield {
           display: block;
-          overflow: hidden;
         }
         a.button {
           text-decoration: none;

src/translations/en.json

@@ -838,6 +838,7 @@
         "input_label": "Enter a request",
         "send_text": "Send text",
         "start_listening": "Start listening",
+        "stt_not_supported": "You can only use speech-to-text when using HTTPS.",
         "manage_assistants": "Manage assistants"
       },
       "generic": {