From 7a607637869583f520cfeb44c98da4f3be901a60 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Fri, 27 Sep 2024 16:56:38 +0200 Subject: [PATCH] Voice setup feedback (#22134) * Voice setup feedback * Update voice-assistant-setup-step-check.ts --- public/static/images/logo_nabu_casa.png | Bin 0 -> 2956 bytes src/dialogs/voice-assistant-setup/styles.ts | 20 ++- .../voice-assistant-setup-dialog.ts | 55 ++++++- .../voice-assistant-setup-step-addons.ts | 54 ++++--- .../voice-assistant-setup-step-area.ts | 2 +- ...e-assistant-setup-step-change-wake-word.ts | 5 +- .../voice-assistant-setup-step-check.ts | 17 +-- .../voice-assistant-setup-step-cloud.ts | 20 ++- .../voice-assistant-setup-step-pipeline.ts | 10 +- .../voice-assistant-setup-step-success.ts | 138 ++++++++++++------ .../voice-assistant-setup-step-update.ts | 16 +- .../voice-assistant-setup-step-wake-word.ts | 4 +- 12 files changed, 217 insertions(+), 124 deletions(-) create mode 100644 public/static/images/logo_nabu_casa.png diff --git a/public/static/images/logo_nabu_casa.png b/public/static/images/logo_nabu_casa.png new file mode 100644 index 0000000000000000000000000000000000000000..ea3817f2de52286ee39b685dec0cdb34a4db453a GIT binary patch literal 2956 zcmV;73v={|P)001xu1^@s6mZ@=W00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP~s0U4__pv^m7wTCLU? z+nXOhenc@~4XzbhwnGrp1G-@Rv$kTzudI5=dqC*kN0}w8< z0$_dE9f5o#bAT;I{eur5J`AnFPNFsfQgVSPuWU+`Qp8(Q{|V}U&LZ|_kcOw$VCPT^ z0q@_xe~jVv48;zJcM9U2*#-a-l6>bj9oomZ*B_0cvRl|X0Y$zcim?bWwhaS3>}y!& zJ)hJ`!iNtZcA@W5G8@|TcUnC_TaTbNJY^YD`PKE3*l$}3|I*ulwvH?# zymm~|qYs|3hi81ub6X`Ke_Rc_TPK1?!m;jMio0wrpe_4;ThMWR9Ai7}^71lQ z|48Cry3eTRFwYB~YTF`Y?zjE@eby85J9v)$)VZNe4aT@_TY@(n)*^*)J9aE3LKkn} zx$OpMg#Bq10d*a%`kV*os}Z(=HYfR9A6AAvD+r2fI*QS$2R7B^0v<;L`8LxH@&-S^ z_}#mAV;%oX*VQ%zl7xH_P&|gDIl<7d5#2Kn=<`IAE~+rVP?sA%*#{kc?pp!S4d$x{ zo7@=9IsIo zAvR8x^{r-5-$L7{+;^%TPV$1zauvJO{j3D=vd^6GlI$@*U=%vG0^o>7Qp0FGl0gxw zzL!=Z)=EI$9F6JgV z=Fw#5=4@ zN^A;x9&Vwg@ak#@RRZTH3sHV-If1^K4YMHIbCBd*LvJGWQ0G(22})A>A+^oaDXL(P z9z6=IBK$T4d*lm>%u=v3Z{NOMTZd-B+qZ9H?(uvV3}TRksLdkAZ#=|kL&AjiDP|m(gnEd3UdS`dCHOx-~Z>!moI_sFd!j@ znq}b7axMu`t4oH4k?%y#fzTBsrRGA`oNMOm*RMS*=#rt!4PFm_h9rw8;|(_IrGfAA zlC>VHz0n*26`A7PCAIs=HVqDcGDf;qGpHw{qXupkBr7}}me%h{`aGVGFISM)CkP$# z9N$fJQjl+UoGMusgNAecQVn?TKT#LkIdQHcmT}EsrUTO4mW!pZyF~iT6KK1)&;`fZ_95~+v!ILX?!6ee+jxpQ&h4;gt~?{Ms{NeC!2p2o)z7H@3T zB9gzW5b(n$Vq9<1o76d4j3Ku10ts+;i9$YyTeog;C}44GhSMsylsY<7XJ@%KPkm;a zaha(N(V}w+0i7AoG1)2x$%i4YZv_EKN|FWXxk*BiBOxVQ`W{ktd+X}g+_ky6>;~IK z+cV=|Z-V{T2zRW()aSGE9L@g0orqCk;8e>94VzDeR3orBZ43aKW!?4+O?_VTy3RrZNj{7As=8?Py&)A zQBesCm`R3b*fINxW{wxSN# zrocN~IKiJjW*26*=y#?ST$tVRaBt0lyFnZ*JK;r8yU_X4aHLkO<=pQ_0#WMb4H4t@ zzT>?}LXv`yNsvH?Vply4GX@n{PWYi>i^9Sj0Rt-lXF=}j-0wQ@jbz*L_x!OwljOqsjbYq(jAQ z!SC1REP|DgV(}E5T>fO&44emM+cQRYBmtQqMrbAB!sl)3{O`N_D*`FfHMt1nNt#Ie zT)_t-OGkCR_SzIHdOWfz5i@helftq6%2An59mV#qm5-G8zlS2ICszfci+w19#dUO) zJ}-&*%#(&|;Y%7N4Mi$vCb4u*H!XSWyR~p?L>oaV8FAJ+-AlyhbWu5)+n=GWCD1B) zvu^-mD`{|{1AK$yH_0oBJmh8>;pKcxxO|2S{@^@$o*~nVgz7kFJPjMYG`Zl1ilMFx zKS#wEc5Uy?uG(jpB&g@ys=U`GTn9<)pp^h-oGLfkT;Dl8+$APi&V(dNI_Z3o4$<=O zF&&pg%tK~BO;j&cWa?u-5zIxyyp)0&#uX(W;lWSyn(akhI{e|&3;ASN=cE>R;a`;? zm5`oE|s)%6yyvSx-Q^zF)T^LZbQBeW9-alEL2)Z+mE2Nu<{Os0;A|e^cIe#f_1%ef$rLQm3&Rb%VA50000 { @@ -113,19 +115,38 @@ export class HaVoiceAssistantSetupDialog extends LitElement { @closed=${this._dialogClosed} .heading=${"Voice Satellite setup"} hideActions + escapeKeyAction + scrimClickAction > ${this._previousSteps.length ? html`` + : this._step !== STEP.UPDATE + ? html`` + : nothing} + ${this._step === STEP.WAKEWORD || + this._step === STEP.AREA || + this._step === STEP.PIPELINE + ? html`Skip` : nothing} -
+
${this._step === STEP.UPDATE ? html` -

Home Assistant Cloud:

-
-
- ${!this._showFirst ? "…" : "Turn on the lights in the bedroom"} -
- ${this._showFirst - ? html`
0.2 seconds
` - : nothing} - ${this._showFirst - ? html`
- ${!this._showSecond ? "…" : "Turned on the lights"} -
` - : nothing} - ${this._showSecond - ? html`
0.4 seconds
` - : nothing} -
-

Raspberry Pi 4:

+

Raspberry Pi 4

${!this._showThird ? "…" : "Turn on the lights in the bedroom"} @@ -76,8 +59,28 @@ export class HaVoiceAssistantSetupStepAddons extends LitElement { ? html`
5 seconds
` : nothing}
+

Home Assistant Cloud

+
+
+ ${!this._showFirst ? "…" : "Turn on the lights in the bedroom"} +
+ ${this._showFirst + ? html`
0.2 seconds
` + : nothing} + ${this._showFirst + ? html`
+ ${!this._showSecond ? "…" : "Turned on the lights"} +
` + : nothing} + ${this._showSecond + ? html`
0.4 seconds
` + : nothing} +
-
+
+ Try Home Assistant Cloud Learn how to setup local assistant - I already have a local assistant + Learn more +
`; } - private _close() { - fireEvent(this, "closed"); + private _goToCloud() { + fireEvent(this, "next-step", { step: STEP.CLOUD }); } private _skip() { diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-area.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-area.ts index 6552172e0d..d1db3fdd7a 100644 --- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-area.ts +++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-area.ts @@ -28,7 +28,7 @@ export class HaVoiceAssistantSetupStepArea extends LitElement { >
- Next + Next
`; } diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-change-wake-word.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-change-wake-word.ts index 4a229691b3..1f6e8740e2 100644 --- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-change-wake-word.ts +++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-change-wake-word.ts @@ -25,8 +25,8 @@ export class HaVoiceAssistantSetupStepChangeWakeWord extends LitElement {

Change wake word

- 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.

@@ -72,6 +72,7 @@ export class HaVoiceAssistantSetupStepChangeWakeWord extends LitElement { ha-md-list { width: 100%; text-align: initial; + margin-bottom: 24px; } `, ]; diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-check.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-check.ts index 0d61e8bd73..0ce0fa9b86 100644 --- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-check.ts +++ b/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 {

` : this._status === "timeout" ? html` -

Error

+

Voice assistant can not connect to Home Assistant

- Your device was unable to reach Home Assistant. Make sure you - have setup your - Home Assistant URL's - correctly. + A good explanation what is happening and what action you should + take.

+ Help me Retry
` : html` @@ -73,10 +70,6 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement { fireEvent(this, "next-step", { noPrevious: true }); } - private _close() { - fireEvent(this, "closed"); - } - static styles = AssistantSetupStyles; } diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-cloud.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-cloud.ts index 84a69f065e..72aec24ca2 100644 --- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-cloud.ts +++ b/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`
- -

Home Assistant Cloud

+ +

Supercharge your assistant with Home Assistant Cloud

- 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.

-
+
+ Learn more Start your free trialTry 1 month for free
`; } diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-pipeline.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-pipeline.ts index 99204a3736..0f69ce002a 100644 --- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-pipeline.ts +++ b/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 { - if (!config) { - return ""; - } - const activeId = config.active_wake_words[0]; - return config.available_wake_words.find((ww) => ww.id === activeId) - ?.wake_word; - } - ); - protected override render() { + const pipelineEntity = this.assistConfiguration + ? this.hass.states[this.assistConfiguration.pipeline_entity_id] + : undefined; + return html`

Ready to assist!

- Make your assistant more personal by customizing shizzle to the - manizzle + Your device is all ready to go! If you want to tweak some more + settings, you can change that below.

- - Change wake word - ${this._activeWakeWord(this.assistConfiguration)} - - - - ${this._ttsSettings - ? html` +
+ ` - : nothing} + fixedMenuPosition + naturalMenuWidth + .value=${this.assistConfiguration?.active_wake_words[0]} + > + ${this.assistConfiguration?.available_wake_words.map( + (wakeword) => + html` + ${wakeword.wake_word} + ` + )} + + + + Test + +
+
+ + ${pipelineEntity?.attributes.options.map( + (pipeline) => + html` + ${this.hass.formatEntityState(pipelineEntity, pipeline)} + ` + )} + + + + Edit + +
+ ${this._ttsSettings + ? html`
+ + + + Try + +
` + : nothing} +
- Change assistant settings Done
`; } @@ -160,6 +180,9 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement { ...pipeline, tts_voice: ev.detail.value, }); + } + + private _testTts() { this._announce("Hello, how can I help you?"); } @@ -170,8 +193,11 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement { await assistSatelliteAnnounce(this.hass, this.assistEntityId, message); } - private _changeWakeWord() { - fireEvent(this, "next-step", { step: STEP.CHANGE_WAKEWORD }); + private _testWakeWord() { + fireEvent(this, "next-step", { + step: STEP.WAKEWORD, + nextStep: STEP.SUCCESS, + }); } private async _openPipeline() { @@ -209,12 +235,28 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement { text-align: initial; } ha-tts-voice-picker { - margin-top: 16px; display: block; } .footer { margin-top: 24px; } + .rows { + gap: 16px; + display: flex; + flex-direction: column; + } + .row { + display: flex; + justify-content: space-between; + align-items: center; + } + .row > *:first-child { + flex: 1; + margin-right: 4px; + } + .row ha-button { + width: 82px; + } `, ]; } diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts index 9cff75a475..d0ac0f298a 100644 --- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts +++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts @@ -17,6 +17,11 @@ export class HaVoiceAssistantSetupStepUpdate extends LitElement { protected override willUpdate(changedProperties: PropertyValues): void { super.willUpdate(changedProperties); + if (!this.updateEntityId) { + this._nextStep(); + return; + } + if (changedProperties.has("hass") && this.updateEntityId) { const oldHass = changedProperties.get("hass") as this["hass"] | undefined; if (oldHass) { @@ -32,16 +37,9 @@ export class HaVoiceAssistantSetupStepUpdate extends LitElement { } } - if (!changedProperties.has("updateEntityId")) { - return; + if (changedProperties.has("updateEntityId")) { + this._tryUpdate(); } - - if (!this.updateEntityId) { - this._nextStep(); - return; - } - - this._tryUpdate(); } protected override render() { diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-wake-word.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-wake-word.ts index 4c9b9306a0..4cd90f4ca2 100644 --- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-wake-word.ts +++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-wake-word.ts @@ -58,7 +58,7 @@ export class HaVoiceAssistantSetupStepWakeWord extends LitElement { const entityState = this.hass.states[this.assistEntityId]; - if (entityState.state !== "listening_wake_word") { + if (entityState.state !== "idle") { return html``; } @@ -80,7 +80,7 @@ export class HaVoiceAssistantSetupStepWakeWord extends LitElement { To make sure the wake word works for you.

`}
-
+
Change wake word
`; }