Voice picker: Guard for select undefined, update debug pipelines (#16279)

* Voice picker: Guard for select undefined

* Update types, make debug a little nicer

* Add type to stt-start event

* Add language to STT data in render pipeline

---------

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

src/components/ha-tts-voice-picker.ts

@@ -36,7 +36,7 @@ export class HaTTSVoicePicker extends LitElement {
 
   @state() _voices?: TTSVoice[] | null;
 
-  @query("ha-select") private _select!: HaSelect;
+  @query("ha-select") private _select?: HaSelect;
 
   protected render() {
     if (!this._voices) {
@@ -108,9 +108,12 @@ export class HaTTSVoicePicker extends LitElement {
 
   protected updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
-    if (changedProperties.has("_voices") && this._select.value !== this.value) {
-      this._select.layoutOptions();
-      fireEvent(this, "value-changed", { value: this._select.value });
+    if (
+      changedProperties.has("_voices") &&
+      this._select?.value !== this.value
+    ) {
+      this._select?.layoutOptions();
+      fireEvent(this, "value-changed", { value: this._select?.value });
     }
   }
 

src/data/assist_pipeline.ts

@@ -65,6 +65,7 @@ interface PipelineSTTStartEvent extends PipelineEventBase {
   type: "stt-start";
   data: {
     engine: string;
+    language: string;
     metadata: SpeechMetadata;
   };
 }
@@ -79,6 +80,7 @@ interface PipelineIntentStartEvent extends PipelineEventBase {
   type: "intent-start";
   data: {
     engine: string;
+    language: string;
     intent_input: string;
   };
 }
@@ -93,6 +95,8 @@ interface PipelineTTSStartEvent extends PipelineEventBase {
   type: "tts-start";
   data: {
     engine: string;
+    language: string;
+    voice: string;
     tts_input: string;
   };
 }

src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts

@@ -347,7 +347,7 @@ export class AssistPipelineRunDebug extends LitElement {
         padding-top: 16px;
       }
       assist-render-pipeline-run + assist-render-pipeline-run {
-        border-top: 3px solid black;
+        border-top: 1px solid var(--divider-color);
       }
     `,
   ];

src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts

@@ -17,15 +17,19 @@ const RUN_DATA = {
 
 const STT_DATA = {
   engine: "Engine",
+  language: "Language",
 };
 
 const INTENT_DATA = {
   engine: "Engine",
+  language: "Language",
   intent_input: "Input",
 };
 
 const TTS_DATA = {
   engine: "Engine",
+  language: "Language",
+  voice: "Voice",
   tts_input: "Input",
 };
 
@@ -120,11 +124,10 @@ const dataMinusKeysRender = (
     result[key] = data[key];
   }
   return render
-    ? html`<ha-yaml-editor
-        readOnly
-        autoUpdate
-        .value=${result}
-      ></ha-yaml-editor>`
+    ? html`<ha-expansion-panel>
+        <span slot="header">Raw</span>
+        <ha-yaml-editor readOnly autoUpdate .value=${result}></ha-yaml-editor>
+      </ha-expansion-panel>`
     : "";
 };
 
@@ -204,6 +207,16 @@ export class AssistPipelineDebug extends LitElement {
                   ? html`
                       <div class="card-content">
                         ${renderData(this.pipelineRun.stt, STT_DATA)}
+                        <div class="row">
+                          <div>Language</div>
+                          <div>${this.pipelineRun.stt.metadata.language}</div>
+                        </div>
+                        ${this.pipelineRun.stt.stt_output
+                          ? html`<div class="row">
+                              <div>Output</div>
+                              <div>${this.pipelineRun.stt.stt_output.text}</div>
+                            </div>`
+                          : ""}
                         ${dataMinusKeysRender(this.pipelineRun.stt, STT_DATA)}
                       </div>
                     `
@@ -225,6 +238,25 @@ export class AssistPipelineDebug extends LitElement {
                   ? html`
                       <div class="card-content">
                         ${renderData(this.pipelineRun.intent, INTENT_DATA)}
+                        ${this.pipelineRun.intent.intent_output
+                          ? html`<div class="row">
+                                <div>Response type</div>
+                                <div>
+                                  ${this.pipelineRun.intent.intent_output
+                                    .response.response_type}
+                                </div>
+                              </div>
+                              ${this.pipelineRun.intent.intent_output.response
+                                .response_type === "error"
+                                ? html`<div class="row">
+                                    <div>Error code</div>
+                                    <div>
+                                      ${this.pipelineRun.intent.intent_output
+                                        .response.data.code}
+                                    </div>
+                                  </div>`
+                                : ""}`
+                          : ""}
                         ${dataMinusKeysRender(
                           this.pipelineRun.intent,
                           INTENT_DATA
@@ -249,6 +281,7 @@ export class AssistPipelineDebug extends LitElement {
                   ? html`
                       <div class="card-content">
                         ${renderData(this.pipelineRun.tts, TTS_DATA)}
+                        ${dataMinusKeysRender(this.pipelineRun.tts, TTS_DATA)}
                       </div>
                     `
                   : ""}
@@ -301,6 +334,11 @@ export class AssistPipelineDebug extends LitElement {
     ha-expansion-panel {
       padding-left: 8px;
     }
+    .card-content ha-expansion-panel {
+      padding-left: 0px;
+      --expansion-panel-summary-padding: 0px;
+      --expansion-panel-content-padding: 0px;
+    }
     .heading {
       font-weight: 500;
       margin-bottom: 16px;