Update voice wizard animations (#22656)

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

@@ -66,6 +66,8 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
   private _dialogClosed() {
     this._params = undefined;
     this._assistConfiguration = undefined;
+    this._previousSteps = [];
+    this._nextStep = undefined;
     this._step = STEP.INIT;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }

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

@@ -17,7 +17,7 @@ export class HaVoiceAssistantSetupStepArea extends LitElement {
     const device = this.hass.devices[this.deviceId];
 
     return html`<div class="content">
-        <img src="/static/images/voice-assistant/area.gif" />
+        <img src="/static/images/voice-assistant/area.png" />
         <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

@@ -21,7 +21,7 @@ export class HaVoiceAssistantSetupStepChangeWakeWord extends LitElement {
 
   protected override render() {
     return html`<div class="padding content">
-        <img src="/static/images/voice-assistant/change-wake-word.gif" />
+        <img src="/static/images/voice-assistant/change-wake-word.png" />
         <h1>Change wake word</h1>
         <p class="secondary">
           Some wake words are better for

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

@@ -6,6 +6,7 @@ import "../../components/ha-circular-progress";
 import { testAssistSatelliteConnection } from "../../data/assist_satellite";
 import type { HomeAssistant } from "../../types";
 import { AssistantSetupStyles } from "./styles";
+import { documentationUrl } from "../../util/documentation-url";
 
 @customElement("ha-voice-assistant-setup-step-check")
 export class HaVoiceAssistantSetupStepCheck extends LitElement {
@@ -35,7 +36,7 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
   protected override render() {
     return html`<div class="content">
       ${this._status === "timeout"
-        ? html`<img src="/static/images/voice-assistant/error.gif" />
+        ? html`<img src="/static/images/voice-assistant/error.png" />
             <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
@@ -44,12 +45,15 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
             </p>
             <div class="footer">
               <a
-                href="https://www.home-assistant.io/docs/configuration/remote/#adding-a-remote-url-to-home-assistant"
+                href=${documentationUrl(
+                  this.hass,
+                  "/voice_control/troubleshooting/#i-dont-get-a-voice-response"
+                )}
                 ><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" />
+        : html`<img src="/static/images/voice-assistant/hi.png" />
             <h1>Hi</h1>
             <p class="secondary">
               Over the next couple steps we're going to personalize your voice

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

@@ -67,7 +67,7 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
       : undefined;
 
     return html`<div class="content">
-        <img src="/static/images/voice-assistant/heart.gif" />
+        <img src="/static/images/voice-assistant/heart.png" />
         <h1>Ready to Assist!</h1>
         <p class="secondary">
           Make any final customizations here. You can always change these in the

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

@@ -65,7 +65,7 @@ export class HaVoiceAssistantSetupStepUpdate extends LitElement {
     const progressIsNumeric = stateObj && updateUsesProgress(stateObj);
 
     return html`<div class="content">
-      <img src="/static/images/voice-assistant/update.gif" />
+      <img src="/static/images/voice-assistant/update.png" />
       <h1>
         ${stateObj &&
         (stateObj.state === "unavailable" || updateIsInstalling(stateObj))

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

@@ -64,14 +64,14 @@ export class HaVoiceAssistantSetupStepWakeWord extends LitElement {
     return html`<div class="content">
         ${!this._detected
           ? html`
-          <img src="/static/images/voice-assistant/sleep.gif" />
+          <img src="/static/images/voice-assistant/sleep.png" />
           <h1>
             Say “${this._activeWakeWord(this.assistConfiguration)}” to wake the
             device up
           </h1>
           <p class="secondary">Setup will continue once the device is awake.</p>
         </div>`
-          : html`<img src="/static/images/voice-assistant/ok-nabu.gif" />
+          : html`<img src="/static/images/voice-assistant/ok-nabu.png" />
               <h1>
                 Say “${this._activeWakeWord(this.assistConfiguration)}” again
               </h1>