Update voice wizard (#22472)

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

@@ -39,6 +39,9 @@ export const AssistantSetupStyles = [
     .footer.full-width ha-button {
       width: 100%;
     }
+    .footer.centered {
+      justify-content: center;
+    }
     .footer.side-by-side {
       justify-content: space-between;
     }

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

@@ -14,7 +14,6 @@ import { EntityRegistryDisplayEntry } from "../../data/entity_registry";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { VoiceAssistantSetupDialogParams } from "./show-voice-assistant-setup-dialog";
-import "./voice-assistant-setup-step-addons";
 import "./voice-assistant-setup-step-area";
 import "./voice-assistant-setup-step-change-wake-word";
 import "./voice-assistant-setup-step-check";
@@ -34,7 +33,6 @@ export const enum STEP {
   PIPELINE,
   SUCCESS,
   CLOUD,
-  ADDONS,
   CHANGE_WAKEWORD,
 }
 
@@ -210,22 +208,18 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
                           ? html`<ha-voice-assistant-setup-step-cloud
                               .hass=${this.hass}
                             ></ha-voice-assistant-setup-step-cloud>`
-                          : this._step === STEP.ADDONS
-                            ? html`<ha-voice-assistant-setup-step-addons
+                          : this._step === STEP.SUCCESS
+                            ? html`<ha-voice-assistant-setup-step-success
                                 .hass=${this.hass}
-                              ></ha-voice-assistant-setup-step-addons>`
-                            : this._step === STEP.SUCCESS
-                              ? html`<ha-voice-assistant-setup-step-success
-                                  .hass=${this.hass}
-                                  .assistConfiguration=${this
-                                    ._assistConfiguration}
-                                  .assistEntityId=${this._findDomainEntityId(
-                                    this._params.deviceId,
-                                    this.hass.entities,
-                                    "assist_satellite"
-                                  )}
-                                ></ha-voice-assistant-setup-step-success>`
-                              : nothing}
+                                .assistConfiguration=${this
+                                  ._assistConfiguration}
+                                .assistEntityId=${this._findDomainEntityId(
+                                  this._params.deviceId,
+                                  this.hass.entities,
+                                  "assist_satellite"
+                                )}
+                              ></ha-voice-assistant-setup-step-success>`
+                            : nothing}
         </div>
       </ha-dialog>
     `;

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

@@ -16,7 +16,7 @@ export class HaVoiceAssistantSetupStepArea extends LitElement {
     const device = this.hass.devices[this.deviceId];
 
     return html`<div class="content">
-        <img src="/static/icons/casita/loving.png" />
+        <img src="/static/images/voice-assistant/area.gif" />
         <h1>Select area</h1>
         <p class="secondary">
           When you voice assistant knows where it is, it can better control the

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

@@ -10,6 +10,7 @@ import { STEP } from "./voice-assistant-setup-dialog";
 import { AssistantSetupStyles } from "./styles";
 import "../../components/ha-md-list";
 import "../../components/ha-md-list-item";
+import { formatLanguageCode } from "../../common/language/format_language";
 
 @customElement("ha-voice-assistant-setup-step-change-wake-word")
 export class HaVoiceAssistantSetupStepChangeWakeWord extends LitElement {
@@ -22,11 +23,12 @@ export class HaVoiceAssistantSetupStepChangeWakeWord extends LitElement {
 
   protected override render() {
     return html`<div class="padding content">
-        <img src="/static/icons/casita/smiling.png" />
+        <img src="/static/images/voice-assistant/change-wake-word.gif" />
         <h1>Change wake word</h1>
         <p class="secondary">
-          Some wake words are better for [your language] and voice than others.
-          Please try them out.
+          Some wake words are better for
+          ${formatLanguageCode(this.hass.locale.language, this.hass.locale)} and
+          voice than others. Please try them out.
         </p>
       </div>
       <ha-md-list>

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

@@ -1,4 +1,4 @@
-import { html, LitElement, PropertyValues } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { testAssistSatelliteConnection } from "../../data/assist_satellite";
@@ -13,6 +13,8 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
 
   @state() private _status?: "success" | "timeout";
 
+  @state() private _showLoader = false;
+
   protected override willUpdate(changedProperties: PropertyValues): void {
     super.willUpdate(changedProperties);
     if (!this.hasUpdated) {
@@ -30,39 +32,48 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
 
   protected override render() {
     return html`<div class="content">
-      ${this._status === "success"
-        ? html`<img src="/static/icons/casita/smiling.png" />
+      ${this._status === "timeout"
+        ? html`<img src="/static/images/voice-assistant/error.gif" />
+            <h1>The voice assistant is unable to connect to Home Assistant</h1>
+            <p class="secondary">
+              To play audio, the voice assistant device has to connect to Home
+              Assistant to fetch the files. Our test shows that the device is
+              unable to reach the Home Assistant server.
+            </p>
+            <div class="footer">
+              <a
+                href="https://www.home-assistant.io/docs/configuration/remote/#adding-a-remote-url-to-home-assistant"
+                ><ha-button>Help me</ha-button></a
+              >
+              <ha-button @click=${this._testConnection}>Retry</ha-button>
+            </div>`
+        : html`<img src="/static/images/voice-assistant/hi.gif" />
             <h1>Hi</h1>
             <p class="secondary">
-              With a couple of steps we are going to setup your voice assistant.
-            </p>`
-        : this._status === "timeout"
-          ? html`<img src="/static/icons/casita/sad.png" />
-              <h1>Voice assistant can not connect to Home Assistant</h1>
-              <p class="secondary">
-                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" />
-              <h1>Checking...</h1>
-              <p class="secondary">
-                We are checking if the device can reach your Home Assistant
-                instance.
-              </p>
-              <ha-circular-progress indeterminate></ha-circular-progress>`}
+              Over the next couple steps we're going to personalize your voice
+              assistant.
+            </p>
+
+            ${this._showLoader
+              ? html`<ha-circular-progress
+                  indeterminate
+                ></ha-circular-progress>`
+              : nothing} `}
     </div>`;
   }
 
   private async _testConnection() {
     this._status = undefined;
+    this._showLoader = false;
+    const timeout = setTimeout(() => {
+      this._showLoader = true;
+    }, 3000);
     const result = await testAssistSatelliteConnection(
       this.hass,
       this.assistEntityId!
     );
+    clearTimeout(timeout);
+    this._showLoader = false;
     this._status = result.status;
   }