tubestation/browser/components/genai/content/model-optin.mjs

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

import { html } from "chrome://global/content/vendor/lit.all.mjs";
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";

/**
 * Model Optin Component
 *
 * Displays a prompt allowing the user to opt in or out of a model download.
 * Can also show a progress bar while downloading.
 */
class ModelOptin extends MozLitElement {
  static properties = {
    headingL10nId: { type: String, fluent: true },
    headingIcon: { type: String },
    messageL10nId: { type: String, fluent: true },
    optinButtonL10nId: { type: String, fluent: true },
    optoutButtonL10nId: { type: String, fluent: true },
    cancelDownloadButtonL10nId: { type: String, fluent: true },
    isLoading: { type: Boolean, reflect: true },
    progressStatus: { type: Number }, // Expected to be a number between 0 and 100
    isHidden: { type: Boolean },
  };

  static events = {
    confirm: "MlModelOptinConfirm",
    deny: "MlModelOptinDeny",
    cancelDownload: "MlModelOptinCancelDownload",
  };

  static eventBehaviors = {
    bubbles: true,
    composed: true,
  };

  constructor() {
    super();
    this.isLoading = false;
    this.isHidden = false;
    this.optinButtonL10nId = "genai-model-optin-continue";
    this.optoutButtonL10nId = "genai-model-optin-optout";
    this.cancelDownloadButtonL10nId = "genai-model-optin-cancel";
  }

  dispatch(event) {
    this.dispatchEvent(
      new CustomEvent(event, { bubbles: true, composed: true })
    );
  }

  handleConfirmClick() {
    this.dispatch(ModelOptin.events.confirm);
  }

  handleDenyClick() {
    this.dispatch(ModelOptin.events.deny);
    this.isHidden = true;
  }

  handleCancelDownloadClick() {
    this.dispatch(ModelOptin.events.cancelDownload);
    this.isLoading = false;
    this.progressStatus = undefined;
  }

  render() {
    return html`
      <link
        rel="stylesheet"
        href="chrome://browser/content/genai/content/model-optin.css"
      />
      <section ?hidden=${this.isHidden} class="optin-wrapper">
        <div class="optin-header-wrapper">
          <div class="optin-header">
            ${this.headingIcon
              ? html`<img
                  src=${this.headingIcon}
                  alt=${this.headingL10nId}
                  class="optin-heading-icon"
                />`
              : ""}
            <h3 class="optin-heading" data-l10n-id=${this.headingL10nId}></h3>
          </div>
        </div>

        <p class="optin-message" data-l10n-id=${this.messageL10nId}></p>
        <slot></slot>

        ${this.isLoading
          ? html`
              <div>
                <div class="optin-actions">
                  <moz-button
                    data-l10n-id=${this.cancelDownloadButtonL10nId}
                    @click=${this.handleCancelDownloadClick}
                  >
                  </moz-button>
                </div>
                <!-- Inlined progress bar -->
                <div class="optin-progress-bar-wrapper">
                  <progress
                    class="optin-progress-bar"
                    value=${this.progressStatus}
                    max="100"
                  ></progress>
                </div>
              </div>
            `
          : html`
              <div class="optin-actions">
                <moz-button-group>
                  <moz-button
                    id="optin-confirm-button"
                    type="primary"
                    data-l10n-id=${this.optinButtonL10nId}
                    @click=${this.handleConfirmClick}
                  >
                  </moz-button>
                  <moz-button
                    id="optin-deny-button"
                    data-l10n-id=${this.optoutButtonL10nId}
                    @click=${this.handleDenyClick}
                  >
                  </moz-button>
                </moz-button-group>
              </div>
            `}
      </section>
    `;
  }
}
customElements.define("model-optin", ModelOptin);