Link to docs when no wake word engines (#18046)

src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-wakeword.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 { LocalizeKeys } from "../../../../common/translations/localize";
@@ -6,6 +13,7 @@ import "../../../../components/ha-form/ha-form";
 import { AssistPipeline } from "../../../../data/assist_pipeline";
 import { HomeAssistant } from "../../../../types";
 import { fetchWakeWordInfo, WakeWord } from "../../../../data/wake_word";
+import { documentationUrl } from "../../../../util/documentation-url";
 
 @customElement("assist-pipeline-detail-wakeword")
 export class AssistPipelineDetailWakeWord extends LitElement {
@@ -67,7 +75,12 @@ 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">
@@ -83,11 +96,25 @@ export class AssistPipelineDetailWakeWord extends LitElement {
               )}
             </p>
           </div>
+          ${!hasWakeWorkEntities
+            ? html`${this.hass.localize(
+                  `ui.panel.config.voice_assistants.assistants.pipeline.detail.steps.wakeword.no_wake_words`
+                )}
+                <a
+                  href=${documentationUrl(this.hass, "/docs/assist/")}
+                  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>
@@ -129,6 +156,9 @@ export class AssistPipelineDetailWakeWord extends LitElement {
         margin-top: 0;
         margin-bottom: 0;
       }
+      a {
+        color: var(--primary-color);
+      }
     `;
   }
 }

src/panels/config/voice-assistants/assist-pref.ts

@@ -25,6 +25,7 @@ import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box
 import type { HomeAssistant } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 import { showVoiceAssistantPipelineDetailDialog } from "./show-dialog-voice-assistant-pipeline-detail";
+import { documentationUrl } from "../../../util/documentation-url";
 
 export class AssistPref extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -73,9 +74,9 @@ export class AssistPref extends LitElement {
         </h1>
         <div class="header-actions">
           <a
-            href="https://www.home-assistant.io/docs/assist/"
+            href=${documentationUrl(this.hass, "/docs/assist/")}
             target="_blank"
-            rel="noreferrer"
+            rel="noreferrer noopener"
             class="icon-link"
           >
             <ha-icon-button

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

@@ -307,9 +307,7 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
     return [
       haStyleDialog,
       css`
-        assist-pipeline-detail-config,
-        assist-pipeline-detail-conversation,
-        assist-pipeline-detail-stt {
+        .content > *:not(:last-child) {
           margin-bottom: 16px;
           display: block;
         }

src/translations/en.json

@@ -2196,7 +2196,9 @@
                   },
                   "wakeword": {
                     "title": "Wake word",
-                    "description": "If a device supports wake words, you can activate Assist by saying this word."
+                    "description": "If a device supports wake words, you can activate Assist by saying this word.",
+                    "no_wake_words": "It looks like you don't have a wake word engine setup yet.",
+                    "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.",