@corti/dictation-web 0.0.0-rc.359 → 0.0.0-test.562

package/dist/src/components/device-selector.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from "lit";
+export declare class DeviceSelector extends LitElement {
+    private _devices?;
+    private _selectedDevice?;
+    disabled: boolean;
+    /**
+     * Internal cache of loaded devices to check if devices were auto-loaded or provided via property
+     * @private
+     */
+    private _loadedDevices;
+    private _devicesAutoLoaded;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    private _loadDevices;
+    private _handleDeviceChange;
+    private _handleSelectDevice;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "device-selector": DeviceSelector;
+    }
+}

package/dist/src/components/device-selector.js

@@ -0,0 +1,106 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { consume } from "@lit/context";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { devicesContext, selectedDeviceContext, } from "../contexts/dictation-context.js";
+import SelectStyles from "../styles/select.js";
+import { getAudioDevices } from "../utils/devices.js";
+import { errorEvent, readyEvent, recordingDevicesChangedEvent, } from "../utils/events.js";
+let DeviceSelector = class DeviceSelector extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        /**
+         * Internal cache of loaded devices to check if devices were auto-loaded or provided via property
+         * @private
+         */
+        this._loadedDevices = [];
+        this._handleDeviceChange = async () => {
+            if (this._devicesAutoLoaded()) {
+                await this._loadDevices();
+            }
+        };
+    }
+    _devicesAutoLoaded() {
+        return this._loadedDevices === this._devices;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        if (!this._devices) {
+            await this._loadDevices();
+            navigator.mediaDevices.addEventListener("devicechange", this._handleDeviceChange);
+        }
+        this.dispatchEvent(readyEvent());
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        navigator.mediaDevices.removeEventListener("devicechange", this._handleDeviceChange);
+    }
+    async _loadDevices() {
+        try {
+            const { devices, defaultDevice } = await getAudioDevices();
+            this._loadedDevices = devices;
+            // Use selected device if it still exists, otherwise fall back to default
+            const selectedDevice = devices.find((d) => d.deviceId === this._selectedDevice?.deviceId) ??
+                defaultDevice;
+            this.dispatchEvent(recordingDevicesChangedEvent(devices, selectedDevice));
+        }
+        catch (error) {
+            this.dispatchEvent(errorEvent(error));
+        }
+    }
+    _handleSelectDevice(e) {
+        const deviceId = e.target.value;
+        const device = this._devices?.find((d) => d.deviceId === deviceId);
+        if (!device) {
+            return;
+        }
+        this.dispatchEvent(recordingDevicesChangedEvent(this._devices || [], device));
+    }
+    render() {
+        return html `
+      <div>
+        <label id="device-select-label" for="device-select">
+          Recording Device
+        </label>
+        <select
+          id="device-select"
+          aria-labelledby="device-select-label"
+          @change=${this._handleSelectDevice}
+          ?disabled=${this.disabled || !this._devices || this._devices.length === 0}
+        >
+          ${this._devices?.map((device) => html `
+              <option
+                value=${device.deviceId}
+                ?selected=${this._selectedDevice?.deviceId === device.deviceId}
+              >
+                ${device.label || "Unknown Device"}
+              </option>
+            `)}
+        </select>
+      </div>
+    `;
+    }
+};
+DeviceSelector.styles = SelectStyles;
+__decorate([
+    consume({ context: devicesContext, subscribe: true }),
+    state()
+], DeviceSelector.prototype, "_devices", void 0);
+__decorate([
+    consume({ context: selectedDeviceContext, subscribe: true }),
+    state()
+], DeviceSelector.prototype, "_selectedDevice", void 0);
+__decorate([
+    property({ type: Boolean })
+], DeviceSelector.prototype, "disabled", void 0);
+DeviceSelector = __decorate([
+    customElement("device-selector")
+], DeviceSelector);
+export { DeviceSelector };
+//# sourceMappingURL=device-selector.js.map

package/dist/src/components/device-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-selector.js","sourceRoot":"","sources":["../../../src/components/device-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from \"@lit/context\";\nimport { html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport {\n  devicesContext,\n  selectedDeviceContext,\n} from \"../contexts/dictation-context.js\";\nimport SelectStyles from \"../styles/select.js\";\nimport { getAudioDevices } from \"../utils/devices.js\";\nimport {\n  errorEvent,\n  readyEvent,\n  recordingDevicesChangedEvent,\n} from \"../utils/events.js\";\n\n@customElement(\"device-selector\")\nexport class DeviceSelector extends LitElement {\n  @consume({ context: devicesContext, subscribe: true })\n  @state()\n  private _devices?: MediaDeviceInfo[];\n\n  @consume({ context: selectedDeviceContext, subscribe: true })\n  @state()\n  private _selectedDevice?: MediaDeviceInfo;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  /**\n   * Internal cache of loaded devices to check if devices were auto-loaded or provided via property\n   * @private\n   */\n  private _loadedDevices: MediaDeviceInfo[] = [];\n\n  private _devicesAutoLoaded(): boolean {\n    return this._loadedDevices === this._devices;\n  }\n\n  static styles = SelectStyles;\n\n  async connectedCallback(): Promise<void> {\n    super.connectedCallback();\n\n    if (!this._devices) {\n      await this._loadDevices();\n\n      navigator.mediaDevices.addEventListener(\n        \"devicechange\",\n        this._handleDeviceChange,\n      );\n    }\n\n    this.dispatchEvent(readyEvent());\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    navigator.mediaDevices.removeEventListener(\n      \"devicechange\",\n      this._handleDeviceChange,\n    );\n  }\n\n  private async _loadDevices(): Promise<void> {\n    try {\n      const { devices, defaultDevice } = await getAudioDevices();\n      this._loadedDevices = devices;\n\n      // Use selected device if it still exists, otherwise fall back to default\n      const selectedDevice =\n        devices.find((d) => d.deviceId === this._selectedDevice?.deviceId) ??\n        defaultDevice;\n\n      this.dispatchEvent(\n        recordingDevicesChangedEvent(devices, selectedDevice),\n      );\n    } catch (error) {\n      this.dispatchEvent(errorEvent(error));\n    }\n  }\n\n  private _handleDeviceChange = async () => {\n    if (this._devicesAutoLoaded()) {\n      await this._loadDevices();\n    }\n  };\n\n  private _handleSelectDevice(e: Event): void {\n    const deviceId = (e.target as HTMLSelectElement).value;\n    const device = this._devices?.find((d) => d.deviceId === deviceId);\n\n    if (!device) {\n      return;\n    }\n\n    this.dispatchEvent(\n      recordingDevicesChangedEvent(this._devices || [], device),\n    );\n  }\n\n  render() {\n    return html`\n      <div>\n        <label id=\"device-select-label\" for=\"device-select\">\n          Recording Device\n        </label>\n        <select\n          id=\"device-select\"\n          aria-labelledby=\"device-select-label\"\n          @change=${this._handleSelectDevice}\n          ?disabled=${this.disabled || !this._devices || this._devices.length === 0}\n        >\n          ${this._devices?.map(\n            (device) => html`\n              <option\n                value=${device.deviceId}\n                ?selected=${this._selectedDevice?.deviceId === device.deviceId}\n              >\n                ${device.label || \"Unknown Device\"}\n              </option>\n            `,\n          )}\n        </select>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"device-selector\": DeviceSelector;\n  }\n}\n"]}

package/dist/src/components/language-selector.d.ts

@@ -0,0 +1,24 @@
+import { LitElement, type PropertyValues } from "lit";
+export declare class LanguageSelector extends LitElement {
+    private _languages?;
+    private _dictationConfig?;
+    disabled: boolean;
+    _region?: string;
+    /**
+     * Internal cache of loaded languages to check if languages were auto-loaded or provided via property
+     * @private
+     */
+    private _loadedLanguages;
+    private _languagesAutoLoaded;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): Promise<void>;
+    updated(changedProperties: PropertyValues<this>): void;
+    private _loadLanguages;
+    private _handleSelectLanguage;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "language-selector": LanguageSelector;
+    }
+}

package/dist/src/components/language-selector.js

@@ -0,0 +1,100 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { consume } from "@lit/context";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { dictationConfigContext, languagesContext, regionContext, } from "../contexts/dictation-context.js";
+import SelectStyles from "../styles/select.js";
+import { languageChangedEvent, languagesChangedEvent, } from "../utils/events.js";
+import { getLanguageName, getLanguagesByRegion } from "../utils/languages.js";
+let LanguageSelector = class LanguageSelector extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        /**
+         * Internal cache of loaded languages to check if languages were auto-loaded or provided via property
+         * @private
+         */
+        this._loadedLanguages = [];
+    }
+    _languagesAutoLoaded() {
+        return this._loadedLanguages === this._languages;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        if (this._languages) {
+            return;
+        }
+        await this._loadLanguages();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("_region") && this._languagesAutoLoaded()) {
+            this._loadLanguages();
+        }
+    }
+    async _loadLanguages() {
+        const { languages, defaultLanguage } = getLanguagesByRegion(this._region);
+        this._loadedLanguages = languages;
+        const selectedLanguage = this._dictationConfig?.primaryLanguage ?? defaultLanguage;
+        this.dispatchEvent(languagesChangedEvent(languages, selectedLanguage));
+        // Dispatch backward compatible event
+        if (selectedLanguage) {
+            this.dispatchEvent(languageChangedEvent(selectedLanguage));
+        }
+    }
+    _handleSelectLanguage(e) {
+        const language = e.target.value;
+        this.dispatchEvent(languagesChangedEvent(this._languages || [], language));
+        // Dispatch backward compatible event
+        this.dispatchEvent(languageChangedEvent(language));
+    }
+    render() {
+        return html `
+      <div>
+        <label id="language-select-label" for="language-select">
+          Dictation Language
+        </label>
+        <select
+          id="language-select"
+          aria-labelledby="language-select-label"
+          @change=${this._handleSelectLanguage}
+          ?disabled=${this.disabled || !this._languages || this._languages.length === 0}
+        >
+          ${this._languages?.map((language) => html `
+              <option
+                value=${language}
+                ?selected=${this._dictationConfig?.primaryLanguage === language}
+              >
+                ${getLanguageName(language)}
+              </option>
+            `)}
+        </select>
+      </div>
+    `;
+    }
+};
+LanguageSelector.styles = SelectStyles;
+__decorate([
+    consume({ context: languagesContext, subscribe: true }),
+    state()
+], LanguageSelector.prototype, "_languages", void 0);
+__decorate([
+    consume({ context: dictationConfigContext, subscribe: true }),
+    state()
+], LanguageSelector.prototype, "_dictationConfig", void 0);
+__decorate([
+    property({ type: Boolean })
+], LanguageSelector.prototype, "disabled", void 0);
+__decorate([
+    consume({ context: regionContext, subscribe: true }),
+    state()
+], LanguageSelector.prototype, "_region", void 0);
+LanguageSelector = __decorate([
+    customElement("language-selector")
+], LanguageSelector);
+export { LanguageSelector };
+//# sourceMappingURL=language-selector.js.map

package/dist/src/components/language-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"language-selector.js","sourceRoot":"","sources":["../../../src/components/language-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Corti } from \"@corti/sdk\";\nimport { consume } from \"@lit/context\";\nimport { html, LitElement, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport {\n  dictationConfigContext,\n  languagesContext,\n  regionContext,\n} from \"../contexts/dictation-context.js\";\nimport SelectStyles from \"../styles/select.js\";\nimport {\n  languageChangedEvent,\n  languagesChangedEvent,\n} from \"../utils/events.js\";\nimport { getLanguageName, getLanguagesByRegion } from \"../utils/languages.js\";\n\n@customElement(\"language-selector\")\nexport class LanguageSelector extends LitElement {\n  @consume({ context: languagesContext, subscribe: true })\n  @state()\n  private _languages?: string[];\n\n  @consume({ context: dictationConfigContext, subscribe: true })\n  @state()\n  private _dictationConfig?: Corti.TranscribeConfig;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @consume({ context: regionContext, subscribe: true })\n  @state()\n  _region?: string;\n\n  /**\n   * Internal cache of loaded languages to check if languages were auto-loaded or provided via property\n   * @private\n   */\n  private _loadedLanguages: string[] = [];\n\n  private _languagesAutoLoaded(): boolean {\n    return this._loadedLanguages === this._languages;\n  }\n\n  static styles = SelectStyles;\n\n  async connectedCallback(): Promise<void> {\n    super.connectedCallback();\n\n    if (this._languages) {\n      return;\n    }\n\n    await this._loadLanguages();\n  }\n\n  updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has(\"_region\") && this._languagesAutoLoaded()) {\n      this._loadLanguages();\n    }\n  }\n\n  private async _loadLanguages(): Promise<void> {\n    const { languages, defaultLanguage } = getLanguagesByRegion(this._region);\n    this._loadedLanguages = languages;\n\n    const selectedLanguage =\n      this._dictationConfig?.primaryLanguage ?? defaultLanguage;\n\n    this.dispatchEvent(languagesChangedEvent(languages, selectedLanguage));\n\n    // Dispatch backward compatible event\n    if (selectedLanguage) {\n      this.dispatchEvent(languageChangedEvent(selectedLanguage));\n    }\n  }\n\n  private _handleSelectLanguage(e: Event): void {\n    const language = (e.target as HTMLSelectElement).value;\n\n    this.dispatchEvent(languagesChangedEvent(this._languages || [], language));\n\n    // Dispatch backward compatible event\n    this.dispatchEvent(languageChangedEvent(language));\n  }\n\n  render() {\n    return html`\n      <div>\n        <label id=\"language-select-label\" for=\"language-select\">\n          Dictation Language\n        </label>\n        <select\n          id=\"language-select\"\n          aria-labelledby=\"language-select-label\"\n          @change=${this._handleSelectLanguage}\n          ?disabled=${this.disabled || !this._languages || this._languages.length === 0}\n        >\n          ${this._languages?.map(\n            (language) => html`\n              <option\n                value=${language}\n                ?selected=${this._dictationConfig?.primaryLanguage === language}\n              >\n                ${getLanguageName(language)}\n              </option>\n            `,\n          )}\n        </select>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"language-selector\": LanguageSelector;\n  }\n}\n"]}

package/dist/src/components/recording-button.d.ts

@@ -0,0 +1,33 @@
+import type { Corti } from "@corti/sdk";
+import { type CSSResultGroup, LitElement } from "lit";
+import "./audio-visualiser.js";
+import "../icons/icons.js";
+export declare class RecordingButton extends LitElement {
+    private _recordingState;
+    _selectedDevice?: MediaDeviceInfo;
+    _accessToken?: string;
+    _authConfig?: Corti.BearerOptions;
+    _region?: string;
+    _tenantName?: string;
+    _dictationConfig?: Corti.TranscribeConfig;
+    preventFocus: boolean;
+    private _mediaController;
+    private _dictationController;
+    static styles: CSSResultGroup;
+    private _handleMouseDown;
+    private _handleWebSocketMessage;
+    private _handleWebSocketError;
+    private _handleWebSocketClose;
+    private _handleStart;
+    private _handleStop;
+    private _handleClick;
+    startRecording(): void;
+    stopRecording(): void;
+    toggleRecording(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "recording-button": RecordingButton;
+    }
+}

package/dist/src/components/recording-button.js

@@ -0,0 +1,179 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { consume } from "@lit/context";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { accessTokenContext, authConfigContext, dictationConfigContext, recordingStateContext, regionContext, selectedDeviceContext, tenantNameContext, } from "../contexts/dictation-context.js";
+import { DictationController, } from "../controllers/DictationController.js";
+import { MediaController } from "../controllers/MediaController.js";
+import ButtonStyles from "../styles/buttons.js";
+import RecordingButtonStyles from "../styles/recording-button.js";
+import { audioLevelChangedEvent, commandEvent, errorEvent, networkActivityEvent, recordingStateChangedEvent, streamClosedEvent, transcriptEvent, usageEvent, } from "../utils/events.js";
+import "./audio-visualiser.js";
+import "../icons/icons.js";
+let RecordingButton = class RecordingButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._recordingState = "stopped";
+        this.preventFocus = false;
+        this._mediaController = new MediaController(this);
+        this._dictationController = new DictationController(this);
+        this._handleWebSocketMessage = (message) => {
+            if (message.type === "CONFIG_ACCEPTED") {
+                this._mediaController.mediaRecorder?.start(250);
+                this._mediaController.startAudioLevelMonitoring((level) => {
+                    this.dispatchEvent(audioLevelChangedEvent(level));
+                });
+                this.dispatchEvent(recordingStateChangedEvent("recording"));
+            }
+            switch (message.type) {
+                case "transcript":
+                    this.dispatchEvent(transcriptEvent(message));
+                    break;
+                case "command":
+                    this.dispatchEvent(commandEvent(message));
+                    break;
+                case "usage":
+                    this.dispatchEvent(usageEvent(message));
+                    break;
+            }
+        };
+        this._handleWebSocketError = (error) => {
+            this.dispatchEvent(errorEvent("Socket error: " + error.message));
+            this._handleStop();
+        };
+        this._handleWebSocketClose = (event) => {
+            this.dispatchEvent(streamClosedEvent(event));
+        };
+    }
+    _handleMouseDown(event) {
+        if (this.preventFocus) {
+            event.preventDefault();
+        }
+    }
+    async _handleStart() {
+        this.dispatchEvent(recordingStateChangedEvent("initializing"));
+        try {
+            await this._mediaController.initialize(() => {
+                if (this._recordingState === "recording") {
+                    this.dispatchEvent(errorEvent("Microphone access was lost."));
+                    this._handleStop();
+                }
+            });
+            await this._dictationController.connect(this._mediaController.mediaRecorder, this._dictationConfig, {
+                onClose: this._handleWebSocketClose,
+                onError: this._handleWebSocketError,
+                onMessage: this._handleWebSocketMessage,
+                onNetworkActivity: (direction, data) => {
+                    this.dispatchEvent(networkActivityEvent(direction, data));
+                },
+            });
+        }
+        catch (error) {
+            this.dispatchEvent(errorEvent(error));
+            await this._handleStop();
+        }
+    }
+    async _handleStop() {
+        this.dispatchEvent(recordingStateChangedEvent("stopping"));
+        try {
+            this._mediaController.stopAudioLevelMonitoring();
+            this._mediaController.mediaRecorder?.stop();
+            await this._mediaController.cleanup();
+            await this._dictationController.disconnect(this._handleWebSocketClose);
+        }
+        catch (error) {
+            this.dispatchEvent(errorEvent(error));
+        }
+        this.dispatchEvent(recordingStateChangedEvent("stopped"));
+    }
+    _handleClick() {
+        if (this._recordingState === "stopped") {
+            this._handleStart();
+        }
+        else if (this._recordingState === "recording") {
+            this._handleStop();
+        }
+    }
+    startRecording() {
+        if (this._recordingState !== "stopped") {
+            return;
+        }
+        this._handleStart();
+    }
+    stopRecording() {
+        if (this._recordingState !== "recording") {
+            return;
+        }
+        this._handleStop();
+    }
+    toggleRecording() {
+        this._handleClick();
+    }
+    render() {
+        const isLoading = this._recordingState === "initializing" ||
+            this._recordingState === "stopping";
+        const isRecording = this._recordingState === "recording";
+        return html `
+      <button
+        @mousedown=${this._handleMouseDown}
+        @click=${this._handleClick}
+        ?disabled=${isLoading}
+        class=${isRecording ? "red" : "accent"}
+        aria-label=${isRecording ? "Stop recording" : "Start recording"}
+        aria-pressed=${isRecording}
+      >
+        ${isLoading
+            ? html `<icon-loading-spinner></icon-loading-spinner>`
+            : isRecording
+                ? html `<icon-recording></icon-recording>`
+                : html `<icon-mic-on></icon-mic-on>`}
+        <audio-visualiser
+          .level=${this._mediaController.audioLevel}
+          ?active=${isRecording}
+        ></audio-visualiser>
+      </button>
+    `;
+    }
+};
+RecordingButton.styles = [RecordingButtonStyles, ButtonStyles];
+__decorate([
+    consume({ context: recordingStateContext, subscribe: true }),
+    state()
+], RecordingButton.prototype, "_recordingState", void 0);
+__decorate([
+    consume({ context: selectedDeviceContext, subscribe: true }),
+    state()
+], RecordingButton.prototype, "_selectedDevice", void 0);
+__decorate([
+    consume({ context: accessTokenContext, subscribe: true }),
+    state()
+], RecordingButton.prototype, "_accessToken", void 0);
+__decorate([
+    consume({ context: authConfigContext, subscribe: true }),
+    state()
+], RecordingButton.prototype, "_authConfig", void 0);
+__decorate([
+    consume({ context: regionContext, subscribe: true }),
+    state()
+], RecordingButton.prototype, "_region", void 0);
+__decorate([
+    consume({ context: tenantNameContext, subscribe: true }),
+    state()
+], RecordingButton.prototype, "_tenantName", void 0);
+__decorate([
+    consume({ context: dictationConfigContext, subscribe: true }),
+    state()
+], RecordingButton.prototype, "_dictationConfig", void 0);
+__decorate([
+    property({ type: Boolean })
+], RecordingButton.prototype, "preventFocus", void 0);
+RecordingButton = __decorate([
+    customElement("recording-button")
+], RecordingButton);
+export { RecordingButton };
+//# sourceMappingURL=recording-button.js.map

package/dist/src/components/recording-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recording-button.js","sourceRoot":"","sources":["../../../src/components/recording-button.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Corti } from \"@corti/sdk\";\nimport { consume } from \"@lit/context\";\nimport { type CSSResultGroup, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport {\n  accessTokenContext,\n  authConfigContext,\n  dictationConfigContext,\n  recordingStateContext,\n  regionContext,\n  selectedDeviceContext,\n  tenantNameContext,\n} from \"../contexts/dictation-context.js\";\nimport {\n  DictationController,\n  type TranscribeMessage,\n} from \"../controllers/DictationController.js\";\nimport { MediaController } from \"../controllers/MediaController.js\";\nimport ButtonStyles from \"../styles/buttons.js\";\nimport RecordingButtonStyles from \"../styles/recording-button.js\";\nimport type { RecordingState } from \"../types.js\";\nimport {\n  audioLevelChangedEvent,\n  commandEvent,\n  errorEvent,\n  networkActivityEvent,\n  recordingStateChangedEvent,\n  streamClosedEvent,\n  transcriptEvent,\n  usageEvent,\n} from \"../utils/events.js\";\n\nimport \"./audio-visualiser.js\";\nimport \"../icons/icons.js\";\n\n@customElement(\"recording-button\")\nexport class RecordingButton extends LitElement {\n  @consume({ context: recordingStateContext, subscribe: true })\n  @state()\n  private _recordingState: RecordingState = \"stopped\";\n\n  @consume({ context: selectedDeviceContext, subscribe: true })\n  @state()\n  _selectedDevice?: MediaDeviceInfo;\n\n  @consume({ context: accessTokenContext, subscribe: true })\n  @state()\n  _accessToken?: string;\n\n  @consume({ context: authConfigContext, subscribe: true })\n  @state()\n  _authConfig?: Corti.BearerOptions;\n\n  @consume({ context: regionContext, subscribe: true })\n  @state()\n  _region?: string;\n\n  @consume({ context: tenantNameContext, subscribe: true })\n  @state()\n  _tenantName?: string;\n\n  @consume({ context: dictationConfigContext, subscribe: true })\n  @state()\n  _dictationConfig?: Corti.TranscribeConfig;\n\n  @property({ type: Boolean })\n  preventFocus: boolean = false;\n\n  private _mediaController = new MediaController(this);\n  private _dictationController = new DictationController(this);\n\n  static styles: CSSResultGroup = [RecordingButtonStyles, ButtonStyles];\n\n  private _handleMouseDown(event: MouseEvent): void {\n    if (this.preventFocus) {\n      event.preventDefault();\n    }\n  }\n\n  private _handleWebSocketMessage = (message: TranscribeMessage): void => {\n    if (message.type === \"CONFIG_ACCEPTED\") {\n      this._mediaController.mediaRecorder?.start(250);\n      this._mediaController.startAudioLevelMonitoring((level) => {\n        this.dispatchEvent(audioLevelChangedEvent(level));\n      });\n\n      this.dispatchEvent(recordingStateChangedEvent(\"recording\"));\n    }\n\n    switch (message.type) {\n      case \"transcript\":\n        this.dispatchEvent(transcriptEvent(message));\n        break;\n      case \"command\":\n        this.dispatchEvent(commandEvent(message));\n        break;\n      case \"usage\":\n        this.dispatchEvent(usageEvent(message));\n        break;\n    }\n  };\n\n  private _handleWebSocketError = (error: Error): void => {\n    this.dispatchEvent(errorEvent(\"Socket error: \" + error.message));\n    this._handleStop();\n  };\n\n  private _handleWebSocketClose = (event: unknown): void => {\n    this.dispatchEvent(streamClosedEvent(event));\n  };\n\n  private async _handleStart(): Promise<void> {\n    this.dispatchEvent(recordingStateChangedEvent(\"initializing\"));\n\n    try {\n      await this._mediaController.initialize(() => {\n        if (this._recordingState === \"recording\") {\n          this.dispatchEvent(errorEvent(\"Microphone access was lost.\"));\n          this._handleStop();\n        }\n      });\n\n      await this._dictationController.connect(\n        this._mediaController.mediaRecorder,\n        this._dictationConfig,\n        {\n          onClose: this._handleWebSocketClose,\n          onError: this._handleWebSocketError,\n          onMessage: this._handleWebSocketMessage,\n          onNetworkActivity: (direction, data) => {\n            this.dispatchEvent(networkActivityEvent(direction, data));\n          },\n        },\n      );\n    } catch (error) {\n      this.dispatchEvent(errorEvent(error));\n      await this._handleStop();\n    }\n  }\n\n  private async _handleStop(): Promise<void> {\n    this.dispatchEvent(recordingStateChangedEvent(\"stopping\"));\n\n    try {\n      this._mediaController.stopAudioLevelMonitoring();\n      this._mediaController.mediaRecorder?.stop();\n      await this._mediaController.cleanup();\n\n      await this._dictationController.disconnect(this._handleWebSocketClose);\n    } catch (error) {\n      this.dispatchEvent(errorEvent(error));\n    }\n\n    this.dispatchEvent(recordingStateChangedEvent(\"stopped\"));\n  }\n\n  private _handleClick(): void {\n    if (this._recordingState === \"stopped\") {\n      this._handleStart();\n    } else if (this._recordingState === \"recording\") {\n      this._handleStop();\n    }\n  }\n\n  public startRecording(): void {\n    if (this._recordingState !== \"stopped\") {\n      return;\n    }\n\n    this._handleStart();\n  }\n\n  public stopRecording(): void {\n    if (this._recordingState !== \"recording\") {\n      return;\n    }\n\n    this._handleStop();\n  }\n\n  public toggleRecording(): void {\n    this._handleClick();\n  }\n\n  render() {\n    const isLoading =\n      this._recordingState === \"initializing\" ||\n      this._recordingState === \"stopping\";\n    const isRecording = this._recordingState === \"recording\";\n\n    return html`\n      <button\n        @mousedown=${this._handleMouseDown}\n        @click=${this._handleClick}\n        ?disabled=${isLoading}\n        class=${isRecording ? \"red\" : \"accent\"}\n        aria-label=${isRecording ? \"Stop recording\" : \"Start recording\"}\n        aria-pressed=${isRecording}\n      >\n        ${\n          isLoading\n            ? html`<icon-loading-spinner></icon-loading-spinner>`\n            : isRecording\n              ? html`<icon-recording></icon-recording>`\n              : html`<icon-mic-on></icon-mic-on>`\n        }\n        <audio-visualiser\n          .level=${this._mediaController.audioLevel}\n          ?active=${isRecording}\n        ></audio-visualiser>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"recording-button\": RecordingButton;\n  }\n}\n"]}

package/dist/src/components/settings-menu.d.ts

@@ -0,0 +1,16 @@
+import { type CSSResultGroup, LitElement, nothing } from "lit";
+import type { ConfigurableSettings, RecordingState } from "../types.js";
+import "./device-selector.js";
+import "./language-selector.js";
+import "../icons/icons.js";
+export declare class SettingsMenu extends LitElement {
+    _recordingState: RecordingState;
+    settingsEnabled: ConfigurableSettings[];
+    static styles: CSSResultGroup;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "settings-menu": SettingsMenu;
+    }
+}

package/dist/src/components/settings-menu.js

@@ -0,0 +1,80 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { consume } from "@lit/context";
+import { html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { recordingStateContext } from "../contexts/dictation-context.js";
+import ButtonStyles from "../styles/buttons.js";
+import CalloutStyles from "../styles/callout.js";
+import SettingsMenuStyles from "../styles/settings-menu.js";
+import { commaSeparatedConverter } from "../utils/converters.js";
+import "./device-selector.js";
+import "./language-selector.js";
+import "../icons/icons.js";
+let SettingsMenu = class SettingsMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._recordingState = "stopped";
+        this.settingsEnabled = ["device", "language"];
+    }
+    render() {
+        if (this.settingsEnabled?.length === 0) {
+            return nothing;
+        }
+        const isRecording = this._recordingState === "recording";
+        const showDeviceSelector = this.settingsEnabled.includes("device");
+        const showLanguageSelector = this.settingsEnabled.includes("language");
+        return html `
+      <div class="mic-selector">
+        <button id="settings-popover-button" popovertarget="settings-popover">
+          <icon-settings></icon-settings>
+        </button>
+        <div id="settings-popover" popover>
+          <div class="settings-wrapper">
+            ${isRecording
+            ? html `
+                  <div class="callout warn">
+                    Recording is in progress. Stop recording to change settings.
+                  </div>
+                `
+            : nothing}
+            ${showDeviceSelector
+            ? html `<device-selector
+                  ?disabled=${isRecording}
+                ></device-selector>`
+            : nothing}
+            ${showLanguageSelector
+            ? html `<language-selector
+                  ?disabled=${isRecording}
+                ></language-selector>`
+            : nothing}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+SettingsMenu.styles = [
+    SettingsMenuStyles,
+    ButtonStyles,
+    CalloutStyles,
+];
+__decorate([
+    consume({ context: recordingStateContext, subscribe: true }),
+    state()
+], SettingsMenu.prototype, "_recordingState", void 0);
+__decorate([
+    property({
+        converter: commaSeparatedConverter,
+        type: Array,
+    })
+], SettingsMenu.prototype, "settingsEnabled", void 0);
+SettingsMenu = __decorate([
+    customElement("settings-menu")
+], SettingsMenu);
+export { SettingsMenu };
+//# sourceMappingURL=settings-menu.js.map

package/dist/src/components/settings-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-menu.js","sourceRoot":"","sources":["../../../src/components/settings-menu.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAuB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAChD,OAAO,aAAa,MAAM,sBAAsB,CAAC;AACjD,OAAO,kBAAkB,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEjE,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,mBAAmB,CAAC;AAGpB,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAGL,oBAAe,GAAmB,SAAS,CAAC;QAM5C,oBAAe,GAA2B,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IAoDnE,CAAC;IA5CC,MAAM;QACJ,IAAI,IAAI,CAAC,eAAe,EAAE,MAAM,KAAK,CAAC,EAAE,CAAC;YACvC,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,KAAK,WAAW,CAAC;QACzD,MAAM,kBAAkB,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnE,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;QAEvE,OAAO,IAAI,CAAA;;;;;;;cAQD,WAAW;YACT,CAAC,CAAC,IAAI,CAAA;;;;iBAIL;YACD,CAAC,CAAC,OACN;cAEE,kBAAkB;YAChB,CAAC,CAAC,IAAI,CAAA;8BACQ,WAAW;oCACL;YACpB,CAAC,CAAC,OACN;cAEE,oBAAoB;YAClB,CAAC,CAAC,IAAI,CAAA;8BACQ,WAAW;sCACH;YACtB,CAAC,CAAC,OACN;;;;KAIP,CAAC;IACJ,CAAC;;AAjDM,mBAAM,GAAmB;IAC9B,kBAAkB;IAClB,YAAY;IACZ,aAAa;CACd,AAJY,CAIX;AAZF;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IAC5D,KAAK,EAAE;qDACoC;AAM5C;IAJC,QAAQ,CAAC;QACR,SAAS,EAAE,uBAAuB;QAClC,IAAI,EAAE,KAAK;KACZ,CAAC;qDAC+D;AATtD,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CA6DxB","sourcesContent":["import { consume } from \"@lit/context\";\nimport { type CSSResultGroup, html, LitElement, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { recordingStateContext } from \"../contexts/dictation-context.js\";\nimport ButtonStyles from \"../styles/buttons.js\";\nimport CalloutStyles from \"../styles/callout.js\";\nimport SettingsMenuStyles from \"../styles/settings-menu.js\";\nimport type { ConfigurableSettings, RecordingState } from \"../types.js\";\nimport { commaSeparatedConverter } from \"../utils/converters.js\";\n\nimport \"./device-selector.js\";\nimport \"./language-selector.js\";\nimport \"../icons/icons.js\";\n\n@customElement(\"settings-menu\")\nexport class SettingsMenu extends LitElement {\n  @consume({ context: recordingStateContext, subscribe: true })\n  @state()\n  _recordingState: RecordingState = \"stopped\";\n\n  @property({\n    converter: commaSeparatedConverter,\n    type: Array,\n  })\n  settingsEnabled: ConfigurableSettings[] = [\"device\", \"language\"];\n\n  static styles: CSSResultGroup = [\n    SettingsMenuStyles,\n    ButtonStyles,\n    CalloutStyles,\n  ];\n\n  render() {\n    if (this.settingsEnabled?.length === 0) {\n      return nothing;\n    }\n\n    const isRecording = this._recordingState === \"recording\";\n    const showDeviceSelector = this.settingsEnabled.includes(\"device\");\n    const showLanguageSelector = this.settingsEnabled.includes(\"language\");\n\n    return html`\n      <div class=\"mic-selector\">\n        <button id=\"settings-popover-button\" popovertarget=\"settings-popover\">\n          <icon-settings></icon-settings>\n        </button>\n        <div id=\"settings-popover\" popover>\n          <div class=\"settings-wrapper\">\n            ${\n              isRecording\n                ? html`\n                  <div class=\"callout warn\">\n                    Recording is in progress. Stop recording to change settings.\n                  </div>\n                `\n                : nothing\n            }\n            ${\n              showDeviceSelector\n                ? html`<device-selector\n                  ?disabled=${isRecording}\n                ></device-selector>`\n                : nothing\n            }\n            ${\n              showLanguageSelector\n                ? html`<language-selector\n                  ?disabled=${isRecording}\n                ></language-selector>`\n                : nothing\n            }\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"settings-menu\": SettingsMenu;\n  }\n}\n"]}

package/dist/src/constants.d.ts

@@ -0,0 +1,4 @@
+import type { Corti } from "@corti/sdk";
+export declare const LANGUAGES_SUPPORTED_EU: Corti.TranscribeSupportedLanguage[];
+export declare const LANGUAGES_SUPPORTED_US: Corti.TranscribeSupportedLanguage[];
+export declare const DEFAULT_DICTATION_CONFIG: Corti.TranscribeConfig;