add save button to AI suggestions settings (#26407)

src/panels/config/core/ai-task-pref.ts

@@ -2,19 +2,20 @@ import "@material/mwc-button";
 import { mdiHelpCircle, mdiStarFourPoints } from "@mdi/js";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../components/ha-card";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import "../../../components/ha-settings-row";
+import type { HaProgressButton } from "../../../components/buttons/ha-progress-button";
 import "../../../components/entity/ha-entity-picker";
 import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
-import type { HomeAssistant } from "../../../types";
+import "../../../components/ha-card";
-import { brandsUrl } from "../../../util/brands-url";
+import "../../../components/ha-settings-row";
 import {
   fetchAITaskPreferences,
   saveAITaskPreferences,
   type AITaskPreferences,
 } from "../../../data/ai_task";
+import type { HomeAssistant } from "../../../types";
+import { brandsUrl } from "../../../util/brands-url";
 import { documentationUrl } from "../../../util/documentation-url";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 
 @customElement("ai-task-pref")
 export class AITaskPref extends LitElement {
@@ -24,6 +25,8 @@ export class AITaskPref extends LitElement {
 
   @state() private _prefs?: AITaskPreferences;
 
+  private _gen_data_entity_id?: string | null;
+
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     if (!this.hass || !isComponentLoaded(this.hass, "ai_task")) {
@@ -86,30 +89,51 @@ export class AITaskPref extends LitElement {
               .hass=${this.hass}
               .disabled=${this._prefs === undefined &&
               isComponentLoaded(this.hass, "ai_task")}
-              .value=${this._prefs?.gen_data_entity_id}
+              .value=${this._gen_data_entity_id ||
+              this._prefs?.gen_data_entity_id}
               .includeDomains=${["ai_task"]}
               @value-changed=${this._handlePrefChange}
             ></ha-entity-picker>
           </ha-settings-row>
         </div>
+        <div class="card-actions">
+          <ha-progress-button @click=${this._update}>
+            ${this.hass!.localize("ui.common.save")}
+          </ha-progress-button>
+        </div>
       </ha-card>
     `;
   }
 
-  private async _handlePrefChange(
+  private _handlePrefChange(ev: CustomEvent<{ value: string | undefined }>) {
-    ev: CustomEvent<{ value: string | undefined }>
-  ) {
     const input = ev.target as HaEntityPicker;
-    const key = input.getAttribute("data-name") as keyof AITaskPreferences;
+    const key = input.dataset.name as keyof AITaskPreferences;
-    const entityId = ev.detail.value || null;
+    const value = ev.detail.value || null;
+    this[`_${key}`] = value;
+  }
+
+  private async _update(ev) {
+    const button = ev.target as HaProgressButton;
+    if (button.progress) {
+      return;
+    }
+    button.progress = true;
+
     const oldPrefs = this._prefs;
-    this._prefs = { ...this._prefs!, [key]: entityId };
+    const update: Partial<AITaskPreferences> = {
+      gen_data_entity_id: this._gen_data_entity_id,
+    };
+    this._prefs = { ...this._prefs!, ...update };
     try {
       this._prefs = await saveAITaskPreferences(this.hass, {
-        [key]: entityId,
+        ...update,
       });
+      button.actionSuccess();
     } catch (_err: any) {
+      button.actionError();
       this._prefs = oldPrefs;
+    } finally {
+      button.progress = false;
     }
   }
 
@@ -145,6 +169,9 @@ export class AITaskPref extends LitElement {
       direction: var(--direction);
       color: var(--secondary-text-color);
     }
+    .card-actions {
+      text-align: right;
+    }
     ha-entity-picker {
       flex: 1;
       margin-left: 16px;

src/translations/en.json

@@ -2275,9 +2275,9 @@
         },
         "ai_task": {
           "header": "AI suggestions",
-          "description": "Home Assistant can use generative AI to help you with tasks like writing automations, creating scripts, and more. Look for the button with the {button} icon throughout Home Assistant to get suggestions.",
+          "description": "Home Assistant can use generative AI to help you with tasks. Look for the button with the {button} icon throughout Home Assistant to get suggestions. Select an AI task entity to use this feature.",
           "gen_data_header": "Data generation tasks",
-          "gen_data_description": "Suggest automation names or dashboards."
+          "gen_data_description": "Suggest automation names."
         },
         "category": {
           "caption": "Categories",