Add sick animation

This commit is contained in:
Paulus Schoutsen 2025-07-11 13:30:33 +00:00
parent 517a0a6223
commit a8f6589ce0
2 changed files with 36 additions and 11 deletions

View File

@ -1,5 +1,5 @@
import type { PropertyValues } from "lit";
import { html, LitElement, nothing } from "lit";
import { html, css, LitElement, nothing } from "lit";
import { mdiStarFourPoints } from "@mdi/js";
import { customElement, state, property } from "lit/decorators";
@ -10,6 +10,7 @@ import type {
} from "../data/ai_task";
import { fetchAITaskPreferences, generateDataAITask } from "../data/ai_task";
import "./chips/ha-assist-chip";
import "./ha-svg-icon";
import type { HomeAssistant } from "../types";
import { fireEvent } from "../common/dom/fire_event";
import { isComponentLoaded } from "../common/config/is_component_loaded";
@ -57,7 +58,7 @@ export class HaSuggestWithAIButton extends LitElement {
label=${this.hass.localize(
this._suggesting ? "ui.common.suggesting_ai" : "ui.common.suggest_ai"
)}
.active=${this._suggesting}
?active=${this._suggesting}
>
<ha-svg-icon slot="icon" .path=${mdiStarFourPoints}></ha-svg-icon>
</ha-assist-chip>
@ -77,6 +78,24 @@ export class HaSuggestWithAIButton extends LitElement {
this._suggesting = false;
}
}
static styles = css`
ha-assist-chip[active] {
animation: pulse-glow 1.5s ease-in-out infinite;
}
@keyframes pulse-glow {
0% {
box-shadow: 0 0 0 0 rgba(var(--rgb-primary-color), 0);
}
50% {
box-shadow: 0 0 8px 2px rgba(var(--rgb-primary-color), 0.6);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--rgb-primary-color), 0);
}
}
`;
}
declare global {

View File

@ -1,13 +1,14 @@
import "@material/mwc-button";
import type { CSSResultGroup, PropertyValues } from "lit";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { mdiClose, mdiPlus, mdiStarFourPoints } from "@mdi/js";
import { mdiClose, mdiPlus } from "@mdi/js";
import { dump } from "js-yaml";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-alert";
import "../../../../components/ha-domain-icon";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-svg-icon";
import "../../../../components/ha-textarea";
import "../../../../components/ha-textfield";
import "../../../../components/ha-labels-picker";
@ -460,13 +461,18 @@ ${dump(this._params.config)}
}
}
if (result.data.category) {
// TODO search up category ID
this._entryUpdates = {
...this._entryUpdates,
category: result.data.category,
};
if (!this._visibleOptionals.includes("category")) {
this._visibleOptionals = [...this._visibleOptionals, "category"];
// We get back category name, convert it to ID
const categoryId = Object.entries(categories).find(
([, name]) => name === result.data.category
)?.[0];
if (categoryId) {
this._entryUpdates = {
...this._entryUpdates,
category: categoryId,
};
if (!this._visibleOptionals.includes("category")) {
this._visibleOptionals = [...this._visibleOptionals, "category"];
}
}
}
if (result.data.labels?.length) {