Voice setup feedback (#22134)

* Voice setup feedback

* Update voice-assistant-setup-step-check.ts

src/dialogs/voice-assistant-setup/styles.ts

@@ -8,7 +8,6 @@ export const AssistantSetupStyles = [
       align-items: center;
       text-align: center;
       min-height: 300px;
-      max-width: 500px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
@@ -21,16 +20,27 @@ export const AssistantSetupStyles = [
     }
     .content img {
       width: 120px;
-      margin-top: 68px;
-      margin-bottom: 68px;
+    }
+    @media all and (max-width: 450px), all and (max-height: 500px) {
+      .content img {
+        margin-top: 68px;
+        margin-bottom: 68px;
+      }
     }
     .footer {
-      width: 100%;
       display: flex;
+      width: 100%;
+      flex-direction: row;
+      justify-content: flex-end;
+    }
+    .footer.full-width {
       flex-direction: column;
     }
-    .footer ha-button {
+    .footer.full-width ha-button {
       width: 100%;
     }
+    .footer.side-by-side {
+      justify-content: space-between;
+    }
   `,
 ];

src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button/mwc-button";
-import { mdiChevronLeft } from "@mdi/js";
+import { mdiChevronLeft, mdiClose } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -50,6 +50,8 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
 
   private _previousSteps: STEP[] = [];
 
+  private _nextStep?: STEP;
+
   public async showDialog(
     params: VoiceAssistantSetupDialogParams
   ): Promise<void> {
@@ -113,19 +115,38 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
         @closed=${this._dialogClosed}
         .heading=${"Voice Satellite setup"}
         hideActions
+        escapeKeyAction
+        scrimClickAction
       >
         <ha-dialog-header slot="heading">
           ${this._previousSteps.length
             ? html`<ha-icon-button
                 slot="navigationIcon"
-                .label=${this.hass.localize("ui.dialogs.generic.close") ??
-                "Close"}
+                .label=${this.hass.localize("ui.common.back") ?? "Back"}
                 .path=${mdiChevronLeft}
                 @click=${this._goToPreviousStep}
               ></ha-icon-button>`
+            : this._step !== STEP.UPDATE
+              ? html`<ha-icon-button
+                  slot="navigationIcon"
+                  .label=${this.hass.localize("ui.dialogs.generic.close") ??
+                  "Close"}
+                  .path=${mdiClose}
+                  @click=${this.closeDialog}
+                ></ha-icon-button>`
+              : nothing}
+          ${this._step === STEP.WAKEWORD ||
+          this._step === STEP.AREA ||
+          this._step === STEP.PIPELINE
+            ? html`<ha-button
+                @click=${this._goToNextStep}
+                class="skip-btn"
+                slot="actionItems"
+                >Skip</ha-button
+              >`
             : nothing}
         </ha-dialog-header>
-        <div class="content" @next-step=${this._nextStep}>
+        <div class="content" @next-step=${this._goToNextStep}>
           ${this._step === STEP.UPDATE
             ? html`<ha-voice-assistant-setup-step-update
                 .hass=${this.hass}
@@ -229,15 +250,21 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
     this._step = this._previousSteps.pop()!;
   }
 
-  private _nextStep(ev) {
+  private _goToNextStep(ev) {
     if (ev.detail?.updateConfig) {
       this._fetchAssistConfiguration();
     }
+    if (ev.detail?.nextStep) {
+      this._nextStep = ev.detail.nextStep;
+    }
     if (!ev.detail?.noPrevious) {
       this._previousSteps.push(this._step);
     }
     if (ev.detail?.step) {
       this._step = ev.detail.step;
+    } else if (this._nextStep) {
+      this._step = this._nextStep;
+      this._nextStep = undefined;
     } else {
       this._step += 1;
     }
@@ -250,6 +277,14 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
         ha-dialog {
           --dialog-content-padding: 0;
         }
+        @media all and (min-width: 450px) and (min-height: 500px) {
+          ha-dialog {
+            --mdc-dialog-min-width: 560px;
+            --mdc-dialog-max-width: 560px;
+            --mdc-dialog-min-width: min(560px, 95vw);
+            --mdc-dialog-max-width: min(560px, 95vw);
+          }
+        }
         ha-dialog-header {
           height: 56px;
         }
@@ -258,6 +293,9 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
             height: calc(100vh - 56px);
           }
         }
+        .skip-btn {
+          margin-top: 6px;
+        }
       `,
     ];
   }
@@ -270,7 +308,12 @@ declare global {
 
   interface HASSDomEvents {
     "next-step":
-      | { step?: STEP; updateConfig?: boolean; noPrevious?: boolean }
+      | {
+          step?: STEP;
+          updateConfig?: boolean;
+          noPrevious?: boolean;
+          nextStep?: STEP;
+        }
       | undefined;
   }
 }

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-addons.ts

@@ -42,24 +42,7 @@ export class HaVoiceAssistantSetupStepAddons extends LitElement {
           powerful device to run. If you device is not powerful enough, Home
           Assistant cloud might be a better option.
         </p>
-        <h3>Home Assistant Cloud:</h3>
-        <div class="messages-container cloud">
-          <div class="message user ${this._showFirst ? "show" : ""}">
-            ${!this._showFirst ? "…" : "Turn on the lights in the bedroom"}
-          </div>
-          ${this._showFirst
-            ? html`<div class="timing user">0.2 seconds</div>`
-            : nothing}
-          ${this._showFirst
-            ? html` <div class="message hass ${this._showSecond ? "show" : ""}">
-                ${!this._showSecond ? "…" : "Turned on the lights"}
-              </div>`
-            : nothing}
-          ${this._showSecond
-            ? html`<div class="timing hass">0.4 seconds</div>`
-            : nothing}
-        </div>
-        <h3>Raspberry Pi 4:</h3>
+        <h3>Raspberry Pi 4</h3>
         <div class="messages-container rpi">
           <div class="message user ${this._showThird ? "show" : ""}">
             ${!this._showThird ? "…" : "Turn on the lights in the bedroom"}
@@ -76,28 +59,43 @@ export class HaVoiceAssistantSetupStepAddons extends LitElement {
             ? html`<div class="timing hass">5 seconds</div>`
             : nothing}
         </div>
+        <h3>Home Assistant Cloud</h3>
+        <div class="messages-container cloud">
+          <div class="message user ${this._showFirst ? "show" : ""}">
+            ${!this._showFirst ? "…" : "Turn on the lights in the bedroom"}
+          </div>
+          ${this._showFirst
+            ? html`<div class="timing user">0.2 seconds</div>`
+            : nothing}
+          ${this._showFirst
+            ? html` <div class="message hass ${this._showSecond ? "show" : ""}">
+                ${!this._showSecond ? "…" : "Turned on the lights"}
+              </div>`
+            : nothing}
+          ${this._showSecond
+            ? html`<div class="timing hass">0.4 seconds</div>`
+            : nothing}
+        </div>
       </div>
-      <div class="footer">
+      <div class="footer side-by-side">
+        <ha-button @click=${this._goToCloud}
+          >Try Home Assistant Cloud</ha-button
+        >
         <a
           href=${documentationUrl(
             this.hass,
             "/voice_control/voice_remote_local_assistant/"
           )}
           target="_blank"
           rel="noreferrer noopenner"
-          @click=${this._close}
-          ><ha-button unelevated
-            >Learn how to setup local assistant</ha-button
-          ></a
-        >
-        <ha-button @click=${this._skip}
-          >I already have a local assistant</ha-button
         >
+          <ha-button @click=${this._skip} unelevated>Learn more</ha-button>
+        </a>
       </div>`;
   }
 
-  private _close() {
-    fireEvent(this, "closed");
+  private _goToCloud() {
+    fireEvent(this, "next-step", { step: STEP.CLOUD });
   }
 
   private _skip() {

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-area.ts

@@ -28,7 +28,7 @@ export class HaVoiceAssistantSetupStepArea extends LitElement {
         ></ha-area-picker>
       </div>
       <div class="footer">
-        <ha-button @click=${this._setArea}>Next</ha-button>
+        <ha-button @click=${this._setArea} unelevated>Next</ha-button>
       </div>`;
   }
 

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-change-wake-word.ts

@@ -25,8 +25,8 @@ export class HaVoiceAssistantSetupStepChangeWakeWord extends LitElement {
         <img src="/static/icons/casita/smiling.png" />
         <h1>Change wake word</h1>
         <p class="secondary">
-          When you voice assistant knows where it is, it can better control the
-          devices around it.
+          Some wake words are better for [your language] and voice than others.
+          Please try them out.
         </p>
       </div>
       <ha-md-list>
@@ -72,6 +72,7 @@ export class HaVoiceAssistantSetupStepChangeWakeWord extends LitElement {
       ha-md-list {
         width: 100%;
         text-align: initial;
+        margin-bottom: 24px;
       }
     `,
   ];

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-check.ts

@@ -22,7 +22,7 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
     if (
       this._status === "success" &&
       changedProperties.has("hass") &&
-      this.hass.states[this.assistEntityId!]?.state === "listening_wake_word"
+      this.hass.states[this.assistEntityId!]?.state === "idle"
     ) {
       this._nextStep();
     }
@@ -38,16 +38,13 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
             </p>`
         : this._status === "timeout"
           ? html`<img src="/static/icons/casita/sad.png" />
-              <h1>Error</h1>
+              <h1>Voice assistant can not connect to Home Assistant</h1>
               <p class="secondary">
-                Your device was unable to reach Home Assistant. Make sure you
-                have setup your
-                <a href="/config/network" @click=${this._close}
-                  >Home Assistant URL's</a
-                >
-                correctly.
+                A good explanation what is happening and what action you should
+                take.
               </p>
               <div class="footer">
+                <a href="#"><ha-button>Help me</ha-button></a>
                 <ha-button @click=${this._testConnection}>Retry</ha-button>
               </div>`
           : html`<img src="/static/icons/casita/loading.png" />
@@ -73,10 +70,6 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
     fireEvent(this, "next-step", { noPrevious: true });
   }
 
-  private _close() {
-    fireEvent(this, "closed");
-  }
-
   static styles = AssistantSetupStyles;
 }
 

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-cloud.ts

@@ -10,16 +10,24 @@ export class HaVoiceAssistantSetupStepCloud extends LitElement {
 
   protected override render() {
     return html`<div class="content">
-        <img src="/static/icons/casita/loving.png" />
-        <h1>Home Assistant Cloud</h1>
+        <img src="/static/images/logo_nabu_casa.png" />
+        <h1>Supercharge your assistant with Home Assistant Cloud</h1>
         <p class="secondary">
-          With Home Assistant Cloud, you get the best results for your voice
-          assistant, sign up for a free trial now.
+          Speed up and take the load off your system by running your
+          text-to-speech and speech-to-text in our private and secure cloud.
+          Cloud also includes secure remote access to your system while
+          supporting the development of Home Assistant.
         </p>
       </div>
-      <div class="footer">
+      <div class="footer side-by-side">
+        <a
+          href="https://www.nabucasa.com"
+          target="_blank"
+          rel="noreferrer noopenner"
+          ><ha-button>Learn more</ha-button></a
+        >
         <a href="/config/cloud/register" @click=${this._close}
-          ><ha-button>Start your free trial</ha-button></a
+          ><ha-button unelevated>Try 1 month for free</ha-button></a
         >
       </div>`;
   }

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-pipeline.ts

@@ -92,7 +92,7 @@ export class HaVoiceAssistantSetupStepPipeline extends LitElement {
           )}
           rel="noreferrer noopenner"
           target="_blank"
-          @click=${this._close}
+          @click=${this._skip}
         >
           Use external system
           <span slot="supporting-text"
@@ -221,12 +221,12 @@ export class HaVoiceAssistantSetupStepPipeline extends LitElement {
     fireEvent(this, "next-step", { step: STEP.ADDONS });
   }
 
-  private _nextStep(step?: STEP) {
-    fireEvent(this, "next-step", { step });
+  private _skip() {
+    this._nextStep(STEP.SUCCESS);
   }
 
-  private _close() {
-    fireEvent(this, "closed");
+  private _nextStep(step?: STEP) {
+    fireEvent(this, "next-step", { step });
   }
 
   static styles = [