114 lines
3.2 KiB
TypeScript
114 lines
3.2 KiB
TypeScript
import { css, html, LitElement } from "lit";
|
|
import { customElement, property, state } from "lit/decorators";
|
|
import memoizeOne from "memoize-one";
|
|
import type { LocalizeKeys } from "../../../../common/translations/localize";
|
|
import type { AssistPipeline } from "../../../../data/assist_pipeline";
|
|
import type { HomeAssistant } from "../../../../types";
|
|
import "../../../../components/ha-form/ha-form";
|
|
|
|
@customElement("assist-pipeline-detail-stt")
|
|
export class AssistPipelineDetailSTT extends LitElement {
|
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
|
|
|
@property({ attribute: false }) public data?: Partial<AssistPipeline>;
|
|
|
|
@state() private _supportedLanguages?: string[];
|
|
|
|
private _schema = memoizeOne(
|
|
(language?: string, supportedLanguages?: string[]) =>
|
|
[
|
|
{
|
|
name: "",
|
|
type: "grid",
|
|
schema: [
|
|
{
|
|
name: "stt_engine",
|
|
selector: {
|
|
stt: {
|
|
language,
|
|
},
|
|
},
|
|
},
|
|
supportedLanguages?.length
|
|
? {
|
|
name: "stt_language",
|
|
required: true,
|
|
selector: {
|
|
language: { languages: supportedLanguages, no_sort: true },
|
|
},
|
|
}
|
|
: { name: "", type: "constant" },
|
|
] as const,
|
|
},
|
|
] as const
|
|
);
|
|
|
|
private _computeLabel = (schema): string =>
|
|
schema.name
|
|
? this.hass.localize(
|
|
`ui.panel.config.voice_assistants.assistants.pipeline.detail.form.${schema.name}` as LocalizeKeys
|
|
)
|
|
: "";
|
|
|
|
protected render() {
|
|
return html`
|
|
<div class="section">
|
|
<div class="intro">
|
|
<h3>
|
|
${this.hass.localize(
|
|
`ui.panel.config.voice_assistants.assistants.pipeline.detail.steps.stt.title`
|
|
)}
|
|
</h3>
|
|
<p>
|
|
${this.hass.localize(
|
|
`ui.panel.config.voice_assistants.assistants.pipeline.detail.steps.stt.description`
|
|
)}
|
|
</p>
|
|
</div>
|
|
<ha-form
|
|
.schema=${this._schema(this.data?.language, this._supportedLanguages)}
|
|
.data=${this.data}
|
|
.hass=${this.hass}
|
|
.computeLabel=${this._computeLabel}
|
|
@supported-languages-changed=${this._supportedLanguagesChanged}
|
|
></ha-form>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private _supportedLanguagesChanged(ev) {
|
|
this._supportedLanguages = ev.detail.value;
|
|
}
|
|
|
|
static styles = css`
|
|
.section {
|
|
border: 1px solid var(--divider-color);
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
}
|
|
.intro {
|
|
margin-bottom: 16px;
|
|
}
|
|
h3 {
|
|
font-size: var(--ha-font-size-xl);
|
|
font-weight: var(--ha-font-weight-normal);
|
|
line-height: var(--ha-line-height-condensed);
|
|
margin-top: 0;
|
|
margin-bottom: 4px;
|
|
}
|
|
p {
|
|
color: var(--secondary-text-color);
|
|
font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
`;
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"assist-pipeline-detail-stt": AssistPipelineDetailSTT;
|
|
}
|
|
}
|