mirror of
https://github.com/home-assistant/frontend.git
synced 2025-11-08 10:29:37 +00:00
436 lines
14 KiB
TypeScript
436 lines
14 KiB
TypeScript
import { mdiChevronLeft, mdiClose, mdiMenuDown } from "@mdi/js";
|
|
import type { CSSResultGroup } from "lit";
|
|
import { css, html, LitElement, nothing } from "lit";
|
|
import { customElement, property, state } from "lit/decorators";
|
|
import memoizeOne from "memoize-one";
|
|
import { fireEvent } from "../../common/dom/fire_event";
|
|
import { computeDomain } from "../../common/entity/compute_domain";
|
|
import { formatLanguageCode } from "../../common/language/format_language";
|
|
import "../../components/chips/ha-assist-chip";
|
|
import "../../components/ha-dialog";
|
|
import { getLanguageOptions } from "../../components/ha-language-picker";
|
|
import "../../components/ha-md-button-menu";
|
|
import type { AssistSatelliteConfiguration } from "../../data/assist_satellite";
|
|
import { fetchAssistSatelliteConfiguration } from "../../data/assist_satellite";
|
|
import { getLanguageScores } from "../../data/conversation";
|
|
import { UNAVAILABLE } from "../../data/entity";
|
|
import type { EntityRegistryDisplayEntry } from "../../data/entity_registry";
|
|
import { haStyleDialog } from "../../resources/styles";
|
|
import type { HomeAssistant } from "../../types";
|
|
import type { VoiceAssistantSetupDialogParams } from "./show-voice-assistant-setup-dialog";
|
|
import "./voice-assistant-setup-step-area";
|
|
import "./voice-assistant-setup-step-change-wake-word";
|
|
import "./voice-assistant-setup-step-check";
|
|
import "./voice-assistant-setup-step-cloud";
|
|
import "./voice-assistant-setup-step-local";
|
|
import "./voice-assistant-setup-step-pipeline";
|
|
import "./voice-assistant-setup-step-success";
|
|
import "./voice-assistant-setup-step-update";
|
|
import "./voice-assistant-setup-step-wake-word";
|
|
|
|
export const enum STEP {
|
|
INIT,
|
|
UPDATE,
|
|
CHECK,
|
|
WAKEWORD,
|
|
AREA,
|
|
PIPELINE,
|
|
SUCCESS,
|
|
CLOUD,
|
|
LOCAL,
|
|
CHANGE_WAKEWORD,
|
|
}
|
|
|
|
@customElement("ha-voice-assistant-setup-dialog")
|
|
export class HaVoiceAssistantSetupDialog extends LitElement {
|
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
|
|
|
@state() private _params?: VoiceAssistantSetupDialogParams;
|
|
|
|
@state() private _step: STEP = STEP.INIT;
|
|
|
|
@state() private _assistConfiguration?: AssistSatelliteConfiguration;
|
|
|
|
@state() private _error?: string;
|
|
|
|
@state() private _language?: string;
|
|
|
|
@state() private _languages: string[] = [];
|
|
|
|
@state() private _localOption?: string;
|
|
|
|
private _previousSteps: STEP[] = [];
|
|
|
|
private _nextStep?: STEP;
|
|
|
|
public async showDialog(
|
|
params: VoiceAssistantSetupDialogParams
|
|
): Promise<void> {
|
|
this._params = params;
|
|
|
|
await this._fetchAssistConfiguration();
|
|
|
|
this._step = STEP.UPDATE;
|
|
}
|
|
|
|
public async closeDialog(): Promise<void> {
|
|
this.renderRoot.querySelector("ha-dialog")?.close();
|
|
}
|
|
|
|
protected willUpdate(changedProps) {
|
|
if (changedProps.has("_step") && this._step === STEP.PIPELINE) {
|
|
this._getLanguages();
|
|
}
|
|
}
|
|
|
|
private _dialogClosed() {
|
|
this._params = undefined;
|
|
this._assistConfiguration = undefined;
|
|
this._previousSteps = [];
|
|
this._nextStep = undefined;
|
|
this._step = STEP.INIT;
|
|
this._language = undefined;
|
|
this._languages = [];
|
|
this._localOption = undefined;
|
|
fireEvent(this, "dialog-closed", { dialog: this.localName });
|
|
}
|
|
|
|
private _deviceEntities = memoizeOne(
|
|
(
|
|
deviceId: string,
|
|
entities: HomeAssistant["entities"]
|
|
): EntityRegistryDisplayEntry[] =>
|
|
Object.values(entities).filter((entity) => entity.device_id === deviceId)
|
|
);
|
|
|
|
private _findDomainEntityId = memoizeOne(
|
|
(
|
|
deviceId: string,
|
|
entities: HomeAssistant["entities"],
|
|
domain: string
|
|
): string | undefined => {
|
|
const deviceEntities = this._deviceEntities(deviceId, entities);
|
|
return deviceEntities.find(
|
|
(ent) => computeDomain(ent.entity_id) === domain
|
|
)?.entity_id;
|
|
}
|
|
);
|
|
|
|
protected render() {
|
|
if (!this._params) {
|
|
return nothing;
|
|
}
|
|
|
|
const assistSatelliteEntityId = this._findDomainEntityId(
|
|
this._params.deviceId,
|
|
this.hass.entities,
|
|
"assist_satellite"
|
|
);
|
|
|
|
const assistEntityState = assistSatelliteEntityId
|
|
? this.hass.states[assistSatelliteEntityId]
|
|
: undefined;
|
|
|
|
return html`
|
|
<ha-dialog
|
|
open
|
|
@closed=${this._dialogClosed}
|
|
.heading=${"Voice Satellite setup"}
|
|
hideActions
|
|
escapeKeyAction
|
|
scrimClickAction
|
|
>
|
|
<ha-dialog-header slot="heading">
|
|
${this._step === STEP.LOCAL
|
|
? nothing
|
|
: this._previousSteps.length
|
|
? html`<ha-icon-button
|
|
slot="navigationIcon"
|
|
.label=${this.hass.localize("ui.common.back") ?? "Back"}
|
|
.path=${mdiChevronLeft}
|
|
@click=${this._goToPreviousStep}
|
|
></ha-icon-button>`
|
|
: this._step !== STEP.UPDATE
|
|
? html`<ha-icon-button
|
|
slot="navigationIcon"
|
|
.label=${this.hass.localize("ui.common.close") ?? "Close"}
|
|
.path=${mdiClose}
|
|
@click=${this.closeDialog}
|
|
></ha-icon-button>`
|
|
: nothing}
|
|
${this._step === STEP.WAKEWORD || this._step === STEP.AREA
|
|
? html`<ha-button
|
|
@click=${this._goToNextStep}
|
|
class="skip-btn"
|
|
slot="actionItems"
|
|
>${this.hass.localize(
|
|
"ui.panel.config.voice_assistants.satellite_wizard.skip"
|
|
)}</ha-button
|
|
>`
|
|
: this._step === STEP.PIPELINE
|
|
? this._language
|
|
? html`<ha-md-button-menu
|
|
slot="actionItems"
|
|
positioning="fixed"
|
|
>
|
|
<ha-assist-chip
|
|
.label=${formatLanguageCode(
|
|
this._language,
|
|
this.hass.locale
|
|
)}
|
|
slot="trigger"
|
|
>
|
|
<ha-svg-icon
|
|
slot="trailing-icon"
|
|
.path=${mdiMenuDown}
|
|
></ha-svg-icon
|
|
></ha-assist-chip>
|
|
${getLanguageOptions(
|
|
this._languages,
|
|
false,
|
|
false,
|
|
this.hass.locale
|
|
).map(
|
|
(lang) =>
|
|
html`<ha-md-menu-item
|
|
.value=${lang.id}
|
|
@click=${this._handlePickLanguage}
|
|
@keydown=${this._handlePickLanguage}
|
|
.selected=${this._language === lang.id}
|
|
>
|
|
${lang.primary}
|
|
</ha-md-menu-item>`
|
|
)}
|
|
</ha-md-button-menu>`
|
|
: nothing
|
|
: nothing}
|
|
</ha-dialog-header>
|
|
<div
|
|
class="content"
|
|
@next-step=${this._goToNextStep}
|
|
@prev-step=${this._goToPreviousStep}
|
|
>
|
|
${this._step === STEP.UPDATE
|
|
? html`<ha-voice-assistant-setup-step-update
|
|
.hass=${this.hass}
|
|
.updateEntityId=${this._findDomainEntityId(
|
|
this._params.deviceId,
|
|
this.hass.entities,
|
|
"update"
|
|
)}
|
|
></ha-voice-assistant-setup-step-update>`
|
|
: this._error
|
|
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
|
|
: assistEntityState?.state === UNAVAILABLE
|
|
? html`<ha-alert alert-type="error"
|
|
>${this.hass.localize(
|
|
"ui.panel.config.voice_assistants.satellite_wizard.not_available"
|
|
)}</ha-alert
|
|
>`
|
|
: this._step === STEP.CHECK
|
|
? html`<ha-voice-assistant-setup-step-check
|
|
.hass=${this.hass}
|
|
.assistEntityId=${assistSatelliteEntityId}
|
|
></ha-voice-assistant-setup-step-check>`
|
|
: this._step === STEP.WAKEWORD
|
|
? html`<ha-voice-assistant-setup-step-wake-word
|
|
.hass=${this.hass}
|
|
.assistConfiguration=${this._assistConfiguration}
|
|
.assistEntityId=${assistSatelliteEntityId}
|
|
.deviceEntities=${this._deviceEntities(
|
|
this._params.deviceId,
|
|
this.hass.entities
|
|
)}
|
|
></ha-voice-assistant-setup-step-wake-word>`
|
|
: this._step === STEP.CHANGE_WAKEWORD
|
|
? html`
|
|
<ha-voice-assistant-setup-step-change-wake-word
|
|
.hass=${this.hass}
|
|
.assistConfiguration=${this._assistConfiguration}
|
|
.assistEntityId=${assistSatelliteEntityId}
|
|
></ha-voice-assistant-setup-step-change-wake-word>
|
|
`
|
|
: this._step === STEP.AREA
|
|
? html`
|
|
<ha-voice-assistant-setup-step-area
|
|
.hass=${this.hass}
|
|
.deviceId=${this._params.deviceId}
|
|
></ha-voice-assistant-setup-step-area>
|
|
`
|
|
: this._step === STEP.PIPELINE
|
|
? html`<ha-voice-assistant-setup-step-pipeline
|
|
.hass=${this.hass}
|
|
.languages=${this._languages}
|
|
.language=${this._language}
|
|
.assistConfiguration=${this._assistConfiguration}
|
|
.assistEntityId=${assistSatelliteEntityId}
|
|
@language-changed=${this._languageChanged}
|
|
></ha-voice-assistant-setup-step-pipeline>`
|
|
: this._step === STEP.CLOUD
|
|
? html`<ha-voice-assistant-setup-step-cloud
|
|
.hass=${this.hass}
|
|
></ha-voice-assistant-setup-step-cloud>`
|
|
: this._step === STEP.LOCAL
|
|
? html`<ha-voice-assistant-setup-step-local
|
|
.hass=${this.hass}
|
|
.language=${this._language}
|
|
.localOption=${this._localOption}
|
|
.assistConfiguration=${this
|
|
._assistConfiguration}
|
|
></ha-voice-assistant-setup-step-local>`
|
|
: this._step === STEP.SUCCESS
|
|
? html`<ha-voice-assistant-setup-step-success
|
|
.hass=${this.hass}
|
|
.assistConfiguration=${this
|
|
._assistConfiguration}
|
|
.assistEntityId=${assistSatelliteEntityId}
|
|
.deviceId=${this._params.deviceId}
|
|
></ha-voice-assistant-setup-step-success>`
|
|
: nothing}
|
|
</div>
|
|
</ha-dialog>
|
|
`;
|
|
}
|
|
|
|
private async _getLanguages() {
|
|
if (this._languages.length) {
|
|
return;
|
|
}
|
|
|
|
const scores = await getLanguageScores(this.hass);
|
|
|
|
this._languages = Object.entries(scores.languages)
|
|
.filter(
|
|
([_lang, score]) =>
|
|
score.cloud > 0 || score.full_local > 0 || score.focused_local > 0
|
|
)
|
|
.map(([lang, _score]) => lang);
|
|
|
|
this._language =
|
|
scores.preferred_language &&
|
|
this._languages.includes(scores.preferred_language)
|
|
? scores.preferred_language
|
|
: undefined;
|
|
}
|
|
|
|
private async _fetchAssistConfiguration() {
|
|
try {
|
|
this._assistConfiguration = await fetchAssistSatelliteConfiguration(
|
|
this.hass,
|
|
this._findDomainEntityId(
|
|
this._params!.deviceId,
|
|
this.hass.entities,
|
|
"assist_satellite"
|
|
)!
|
|
);
|
|
} catch (err: any) {
|
|
this._error = err.message;
|
|
}
|
|
}
|
|
|
|
private _handlePickLanguage(ev) {
|
|
if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") return;
|
|
|
|
this._language = ev.target.value;
|
|
}
|
|
|
|
private _languageChanged(ev: CustomEvent) {
|
|
if (!ev.detail.value) {
|
|
return;
|
|
}
|
|
this._language = ev.detail.value;
|
|
}
|
|
|
|
private _goToPreviousStep() {
|
|
if (!this._previousSteps.length) {
|
|
return;
|
|
}
|
|
this._step = this._previousSteps.pop()!;
|
|
}
|
|
|
|
private _goToNextStep(ev?: CustomEvent) {
|
|
if (ev?.detail?.updateConfig) {
|
|
this._fetchAssistConfiguration();
|
|
}
|
|
if (ev?.detail?.nextStep) {
|
|
this._nextStep = ev.detail.nextStep;
|
|
}
|
|
if (!ev?.detail?.noPrevious) {
|
|
this._previousSteps.push(this._step);
|
|
}
|
|
if (ev?.detail?.step) {
|
|
this._step = ev.detail.step;
|
|
if (ev.detail.step === STEP.LOCAL) {
|
|
this._localOption = ev.detail.option;
|
|
}
|
|
} else if (this._nextStep) {
|
|
this._step = this._nextStep;
|
|
this._nextStep = undefined;
|
|
} else {
|
|
this._step += 1;
|
|
}
|
|
}
|
|
|
|
static get styles(): CSSResultGroup {
|
|
return [
|
|
haStyleDialog,
|
|
css`
|
|
ha-dialog {
|
|
--dialog-content-padding: 0;
|
|
}
|
|
@media all and (min-width: 450px) and (min-height: 500px) {
|
|
ha-dialog {
|
|
--mdc-dialog-min-width: 560px;
|
|
--mdc-dialog-max-width: 560px;
|
|
--mdc-dialog-min-width: min(560px, 95vw);
|
|
--mdc-dialog-max-width: min(560px, 95vw);
|
|
}
|
|
}
|
|
ha-dialog-header {
|
|
height: 56px;
|
|
}
|
|
@media all and (max-width: 450px), all and (max-height: 500px) {
|
|
.content {
|
|
height: calc(100vh - 56px);
|
|
}
|
|
}
|
|
.skip-btn {
|
|
margin-top: 6px;
|
|
}
|
|
ha-alert {
|
|
margin: 24px;
|
|
display: block;
|
|
}
|
|
ha-md-button-menu {
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 12px;
|
|
margin-inline-end: 12px;
|
|
margin-inline-start: initial;
|
|
}
|
|
`,
|
|
];
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"ha-voice-assistant-setup-dialog": HaVoiceAssistantSetupDialog;
|
|
}
|
|
|
|
interface HASSDomEvents {
|
|
"next-step":
|
|
| {
|
|
step?: STEP;
|
|
updateConfig?: boolean;
|
|
noPrevious?: boolean;
|
|
nextStep?: STEP;
|
|
option?: string;
|
|
}
|
|
| undefined;
|
|
"prev-step": undefined;
|
|
"language-changed": { value: string };
|
|
}
|
|
}
|