Hide wake word in pipeline settings (#22879)

* hide wake word in pipeline settings

* move logic to pipeline-editor

src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-wakeword.ts

@@ -1,5 +1,5 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
@@ -8,7 +8,6 @@ import type { AssistPipeline } from "../../../../data/assist_pipeline";
 import type { HomeAssistant } from "../../../../types";
 import type { WakeWord } from "../../../../data/wake_word";
 import { fetchWakeWordInfo } from "../../../../data/wake_word";
-import { documentationUrl } from "../../../../util/documentation-url";
 import { fireEvent } from "../../../../common/dom/fire_event";
 
 @customElement("assist-pipeline-detail-wakeword")
@@ -79,12 +78,7 @@ export class AssistPipelineDetailWakeWord extends LitElement {
     }
   }
 
-  private _hasWakeWorkEntities = memoizeOne((states: HomeAssistant["states"]) =>
-    Object.keys(states).some((entityId) => entityId.startsWith("wake_word."))
-  );
-
   protected render() {
-    const hasWakeWorkEntities = this._hasWakeWorkEntities(this.hass.states);
     return html`
       <div class="section">
         <div class="content">
@@ -99,29 +93,17 @@ export class AssistPipelineDetailWakeWord extends LitElement {
                 `ui.panel.config.voice_assistants.assistants.pipeline.detail.steps.wakeword.description`
               )}
             </p>
+            <ha-alert alert-type="info">
+              ${this.hass.localize(
+                `ui.panel.config.voice_assistants.assistants.pipeline.detail.steps.wakeword.note`
+              )}
+            </ha-alert>
           </div>
-          ${!hasWakeWorkEntities
-            ? html`${this.hass.localize(
-                  `ui.panel.config.voice_assistants.assistants.pipeline.detail.steps.wakeword.no_wake_words`
-                )}
-                <a
-                  href=${documentationUrl(
-                    this.hass,
-                    "/voice_control/install_wake_word_add_on/"
-                  )}
-                  target="_blank"
-                  rel="noreferrer noopener"
-                  >${this.hass.localize(
-                    `ui.panel.config.voice_assistants.assistants.pipeline.detail.steps.wakeword.no_wake_words_link`
-                  )}</a
-                >`
-            : nothing}
           <ha-form
             .schema=${this._schema(this._wakeWords)}
             .data=${this.data}
             .hass=${this.hass}
             .computeLabel=${this._computeLabel}
-            .disabled=${!hasWakeWorkEntities}
           ></ha-form>
         </div>
       </div>

src/panels/config/voice-assistants/dialog-voice-assistant-pipeline-detail.ts

@@ -1,7 +1,8 @@
-import { mdiClose } from "@mdi/js";
+import { mdiClose, mdiDotsVertical } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-button";
 import "../../../components/ha-dialog-header";
@@ -21,6 +22,7 @@ import "./assist-pipeline-detail/assist-pipeline-detail-wakeword";
 import "./debug/assist-render-pipeline-events";
 import type { VoiceAssistantPipelineDetailsDialogParams } from "./show-dialog-voice-assistant-pipeline-detail";
 import { computeDomain } from "../../../common/entity/compute_domain";
+import { stopPropagation } from "../../../common/dom/stop_propagation";
 
 @customElement("dialog-voice-assistant-pipeline-detail")
 export class DialogVoiceAssistantPipelineDetail extends LitElement {
@@ -30,6 +32,8 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
 
   @state() private _data?: Partial<AssistPipeline>;
 
+  @state() private _hideWakeWord = false;
+
   @state() private _cloudActive?: boolean;
 
   @state() private _error?: Record<string, string>;
@@ -42,11 +46,17 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
     this._params = params;
     this._error = undefined;
     this._cloudActive = this._params.cloudActiveSubscription;
+
     if (this._params.pipeline) {
       this._data = this._params.pipeline;
+
+      this._hideWakeWord =
+        this._params.hideWakeWord || !this._data.wake_word_entity;
       return;
     }
 
+    this._hideWakeWord = true;
+
     let sstDefault: string | undefined;
     let ttsDefault: string | undefined;
     if (this._cloudActive) {
@@ -79,6 +89,7 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
   public closeDialog(): void {
     this._params = undefined;
     this._data = undefined;
+    this._hideWakeWord = false;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -91,6 +102,10 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
     this._supportedLanguages = languages;
   }
 
+  private _hasWakeWorkEntities = memoizeOne((states: HomeAssistant["states"]) =>
+    Object.keys(states).some((entityId) => entityId.startsWith("wake_word."))
+  );
+
   protected render() {
     if (!this._params || !this._data) {
       return nothing;
@@ -118,6 +133,27 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
             .path=${mdiClose}
           ></ha-icon-button>
           <span slot="title" .title=${title}>${title}</span>
+          ${!this._hideWakeWord ||
+          this._params.hideWakeWord ||
+          !this._hasWakeWorkEntities(this.hass.states)
+            ? nothing
+            : html`<ha-button-menu
+                slot="actionItems"
+                @action=${this._handleShowWakeWord}
+                @closed=${stopPropagation}
+                menuCorner="END"
+                corner="BOTTOM_END"
+              >
+                <ha-icon-button
+                  .path=${mdiDotsVertical}
+                  slot="trigger"
+                ></ha-icon-button>
+                <mwc-list-item>
+                  ${this.hass.localize(
+                    "ui.panel.config.voice_assistants.assistants.pipeline.detail.add_streaming_wake_word"
+                  )}
+                </mwc-list-item></ha-button-menu
+              >`}
         </ha-dialog-header>
         <div class="content">
           ${this._error
@@ -171,7 +207,7 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
             keys="tts_engine,tts_language,tts_voice"
             @value-changed=${this._valueChanged}
           ></assist-pipeline-detail-tts>
-          ${this._params.hideWakeWord
+          ${this._hideWakeWord
             ? nothing
             : html`<assist-pipeline-detail-wakeword
                 .hass=${this.hass}
@@ -198,6 +234,10 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
     `;
   }
 
+  private _handleShowWakeWord() {
+    this._hideWakeWord = false;
+  }
+
   private _valueChanged(ev: CustomEvent) {
     this._error = undefined;
     const value = {};

src/translations/en.json

@@ -2719,6 +2719,7 @@
                 "try_tts": "Try voice",
                 "debug": "Debug",
                 "set_as_preferred": "Set as preferred",
+                "add_streaming_wake_word": "Add streaming wake word",
                 "form": {
                   "name": "[%key:ui::common::name%]",
                   "conversation_engine": "Conversation agent",
@@ -2750,10 +2751,9 @@
                     "description": "When you are controlling your assistant with voice, the text-to-speech engine turns the conversation text responses into audio."
                   },
                   "wakeword": {
-                    "title": "Wake word",
+                    "title": "Streaming wake word engine",
-                    "description": "If a device supports wake words, you can activate Assist by saying this word.",
+                    "description": " If a device supports streaming wake word engines, you can activate Assist by saying this word.",
-                    "no_wake_words": "It looks like you don't have a wake word engine setup yet.",
+                    "note": "Most recent devices support on-device wake word engines and are configured on their device page."
-                    "no_wake_words_link": "Find out more about wake words."
                   }
                 },
                 "no_cloud_message": "You should have an active cloud subscription to use cloud speech services.",