Inform user that subscription is needed for cloud services (#16318)

src/panels/config/voice-assistants/assist-pref.ts

@@ -22,6 +22,7 @@ import type { HomeAssistant } from "../../../types";
 import { showVoiceAssistantPipelineDetailDialog } from "./show-dialog-voice-assistant-pipeline-detail";
 import { brandsUrl } from "../../../util/brands-url";
 import { formatLanguageCode } from "../../../common/language/format_language";
+import { CloudStatusLoggedIn } from "../../../data/cloud";
 
 export class AssistPref extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -30,6 +31,8 @@ export class AssistPref extends LitElement {
 
   @state() private _preferred: string | null = null;
 
+  @property() public cloudStatus?: CloudStatusLoggedIn;
+
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
@@ -125,6 +128,7 @@ export class AssistPref extends LitElement {
 
   private async _openDialog(pipeline?: AssistPipeline): Promise<void> {
     showVoiceAssistantPipelineDetailDialog(this, {
+      cloudActiveSubscription: this.cloudStatus?.active_subscription,
       pipeline,
       preferred: pipeline?.id === this._preferred,
       createPipeline: async (values) => {

src/panels/config/voice-assistants/dialog-voice-assistant-pipeline-detail.ts

@@ -28,6 +28,8 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
 
   @state() private _preferred?: boolean;
 
+  @state() private _cloudActive?: boolean;
+
   @state() private _error?: Record<string, string>;
 
   @state() private _submitting = false;
@@ -40,13 +42,14 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
     if (this._params.pipeline) {
       this._data = this._params.pipeline;
       this._preferred = this._params.preferred;
+      this._cloudActive = this._params.cloudActiveSubscription;
     } else {
       this._data = {
         language: (
           this.hass.config.language || this.hass.locale.language
         ).substring(0, 2),
-        stt_engine: "cloud",
+        stt_engine: this._cloudActive ? "cloud" : undefined,
-        tts_engine: "cloud",
+        tts_engine: this._cloudActive ? "cloud" : undefined,
       };
     }
   }
@@ -88,7 +91,7 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
       >
         <div class="content">
           ${this._error
-            ? html`<ha-alert alert-type="error"> ${this._error} </ha-alert>`
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : nothing}
           <assist-pipeline-detail-config
             .hass=${this.hass}
@@ -104,6 +107,28 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
             keys="conversation_engine,conversation_language"
             @value-changed=${this._valueChanged}
           ></assist-pipeline-detail-conversation>
+          ${!this._cloudActive &&
+          (this._data.tts_engine === "cloud" ||
+            this._data.stt_engine === "cloud")
+            ? html`
+                <ha-alert alert-type="warning"
+                  >${this.hass.localize(
+                    "ui.panel.config.voice_assistants.assistants.pipeline.detail.no_cloud_message"
+                  )}
+                  <a
+                    href="/config/cloud"
+                    slot="action"
+                    @click=${this.closeDialog}
+                  >
+                    <ha-button>
+                      ${this.hass.localize(
+                        "ui.panel.config.voice_assistants.assistants.pipeline.detail.no_cloud_action"
+                      )}
+                    </ha-button>
+                  </a>
+                </ha-alert>
+              `
+            : nothing}
           <assist-pipeline-detail-stt
             .hass=${this.hass}
             .data=${this._data}
@@ -236,7 +261,7 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
           display: block;
         }
         ha-alert {
-          margin-bottom: 8px;
+          margin-bottom: 16px;
           display: block;
         }
         a {

src/panels/config/voice-assistants/ha-config-voice-assistants-assistants.ts

@@ -40,7 +40,10 @@ export class HaConfigVoiceAssistantsAssistants extends LitElement {
       >
         <div class="content">
           ${isComponentLoaded(this.hass, "assist_pipeline")
-            ? html` <assist-pref .hass=${this.hass}></assist-pref> `
+            ? html`<assist-pref
+                .hass=${this.hass}
+                .cloudStatus=${this.cloudStatus}
+              ></assist-pref>`
             : nothing}
           ${this.cloudStatus?.logged_in
             ? html`

src/panels/config/voice-assistants/show-dialog-voice-assistant-pipeline-detail.ts

@@ -5,6 +5,7 @@ import {
 } from "../../../data/assist_pipeline";
 
 export interface VoiceAssistantPipelineDetailsDialogParams {
+  cloudActiveSubscription?: boolean;
   pipeline?: AssistPipeline;
   preferred?: boolean;
   createPipeline: (values: AssistPipelineMutableParams) => Promise<unknown>;

src/translations/en.json

@@ -2068,7 +2068,9 @@
                     "title": "Text-to-speech",
                     "description": "When you are controlling your assistant with voice, the text-to-speech engine turns the conversation text responses into audio."
                   }
-                }
+                },
+                "no_cloud_message": "You should have an active cloud subscription to use cloud speech services.",
+                "no_cloud_action": "Subscribe"
               }
             },
             "cloud": {