@corti/dictation-web 0.4.0-rc.2 → 0.5.0-rc

package/dist/components/corti-dictation.d.ts

@@ -1,6 +1,6 @@
 import type { Corti } from "@corti/sdk";
 import { LitElement } from "lit";
-import type { ConfigurableSettings, ProxyOptions, RecordingState } from "../types.js";
+import type { ConfigurableSettings, DictationMode, ProxyOptions, RecordingState } from "../types.js";
 import "../contexts/dictation-context.js";
 import "./recording-button.js";
 import "./settings-menu.js";
@@ -69,6 +69,20 @@ export declare class CortiDictation extends LitElement {
      * Current state of recording (stopped, recording, initializing and stopping, ).
      */
     get recordingState(): RecordingState;
+    /**
+     * Dictation mode: "toggle-to-talk" or "push-to-talk"
+     */
+    set mode(value: DictationMode);
+    get mode(): DictationMode;
+    _mode?: DictationMode;
+    /**
+     * Keybinding for keyboard shortcut. Single key only (e.g., "`", "k", "meta", "ctrl").
+     * Combinations with "+" are not supported.
+     * Defaults to "`" if keybinding is in settingsEnabled, otherwise undefined
+     */
+    set keybinding(value: string | null | undefined);
+    get keybinding(): string | null | undefined;
+    _keybinding?: string | null;
     /**
      * Set the latest access token.
      * @returns ServerConfig with environment, tenant, and accessToken

package/dist/components/corti-dictation.js

@@ -45,6 +45,7 @@ let CortiDictation = class CortiDictation extends LitElement {
          */
         this.debug_displayAudio = false;
         this._dictationConfig = DEFAULT_DICTATION_CONFIG;
+        this._mode = "toggle-to-talk";
     }
     /**
      * List of all language codes available for use with the Web Component.
@@ -91,6 +92,26 @@ let CortiDictation = class CortiDictation extends LitElement {
     get recordingState() {
         return __classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.recordingState || "stopped";
     }
+    /**
+     * Dictation mode: "toggle-to-talk" or "push-to-talk"
+     */
+    set mode(value) {
+        this._mode = value;
+    }
+    get mode() {
+        return (__classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.mode || this._mode || "toggle-to-talk");
+    }
+    /**
+     * Keybinding for keyboard shortcut. Single key only (e.g., "`", "k", "meta", "ctrl").
+     * Combinations with "+" are not supported.
+     * Defaults to "`" if keybinding is in settingsEnabled, otherwise undefined
+     */
+    set keybinding(value) {
+        this._keybinding = value;
+    }
+    get keybinding() {
+        return __classPrivateFieldGet(this, _CortiDictation_contextProviderRef, "f").value?.keybinding || this._keybinding;
+    }
     // ─────────────────────────────────────────────────────────────────────────────
     // Public methods
     // ─────────────────────────────────────────────────────────────────────────────
@@ -159,6 +180,8 @@ let CortiDictation = class CortiDictation extends LitElement {
         .devices=${this._devices}
         .selectedDevice=${this._selectedDevice}
         .debug_displayAudio=${this.debug_displayAudio}
+        .mode=${this._mode}
+        .keybinding=${this._keybinding}
       >
         <dictation-recording-button
           ${ref(__classPrivateFieldGet(this, _CortiDictation_recordingButtonRef, "f"))}
@@ -231,6 +254,18 @@ __decorate([
 __decorate([
     state()
 ], CortiDictation.prototype, "_selectedDevice", void 0);
+__decorate([
+    property({ type: String })
+], CortiDictation.prototype, "mode", null);
+__decorate([
+    state()
+], CortiDictation.prototype, "_mode", void 0);
+__decorate([
+    property({ type: String })
+], CortiDictation.prototype, "keybinding", null);
+__decorate([
+    state()
+], CortiDictation.prototype, "_keybinding", void 0);
 CortiDictation = __decorate([
     customElement("corti-dictation")
 ], CortiDictation);

package/dist/components/corti-dictation.js.map

@@ -1 +1 @@
-{"version":3,"file":"corti-dictation.js","sourceRoot":"","sources":["../../src/components/corti-dictation.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Corti } from \"@corti/sdk\";\nimport { css, html, LitElement, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { createRef, type Ref, ref } from \"lit/directives/ref.js\";\nimport { DEFAULT_DICTATION_CONFIG } from \"../constants.js\";\nimport type { DictationRoot } from \"../contexts/dictation-context.js\";\nimport type {\n  ConfigurableSettings,\n  ProxyOptions,\n  RecordingState,\n} from \"../types.js\";\nimport { commaSeparatedConverter } from \"../utils/converters.js\";\nimport type { DictationRecordingButton } from \"./recording-button.js\";\n\nimport \"../contexts/dictation-context.js\";\nimport \"./recording-button.js\";\nimport \"./settings-menu.js\";\n\n@customElement(\"corti-dictation\")\nexport class CortiDictation extends LitElement {\n  static styles = css`\n    .hidden {\n      display: none;\n    }\n  `;\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Private refs\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  #recordingButtonRef: Ref<DictationRecordingButton> = createRef();\n  #contextProviderRef: Ref<DictationRoot> = createRef();\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Properties\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Latest access token\n   */\n  @property({ type: String })\n  accessToken?: string;\n\n  /**\n   * Authentication configuration with optional refresh mechanism.\n   */\n  @property({ attribute: false, type: Object })\n  authConfig?: Corti.BearerOptions;\n\n  /**\n   * WebSocket URL for proxy connection. When provided, uses CortiWebSocketProxyClient instead of CortiClient.\n   */\n  @property({ type: String })\n  socketUrl?: string;\n\n  /**\n   * Socket proxy configuration object. When provided, uses CortiWebSocketProxyClient instead of CortiClient.\n   */\n  @property({ attribute: false, type: Object })\n  socketProxy?: ProxyOptions;\n\n  /**\n   * List of all language codes available for use with the Web Component.\n   *  Default list depends on the accessToken\n   */\n  @property({\n    converter: commaSeparatedConverter,\n    type: Array,\n  })\n  set languagesSupported(value:\n    | Corti.TranscribeSupportedLanguage[]\n    | undefined) {\n    this._languagesSupported = value;\n  }\n\n  get languagesSupported(): Corti.TranscribeSupportedLanguage[] {\n    return (\n      this.#contextProviderRef.value?.languages ||\n      this._languagesSupported ||\n      []\n    );\n  }\n\n  @state()\n  _languagesSupported?: Corti.TranscribeSupportedLanguage[];\n\n  /**\n   * Which settings should be available in the UI.\n   *  If an empty array is passed, the settings will be disabled entirely.\n   *  Options are language and devices\n   */\n  @property({\n    converter: commaSeparatedConverter,\n    type: Array,\n  })\n  settingsEnabled: ConfigurableSettings[] = [\"device\", \"language\"];\n\n  /**\n   * When false (default), allows the start/stop button from taking focus when clicked,\n   *  disabling textareas or other input elements to maintain focus.\n   *  Set to \"true\" to allow the button to receive focus on click.\n   */\n  @property({ type: Boolean })\n  allowButtonFocus: boolean = false;\n\n  /**\n   * Overrides any device selection and instead uses getDisplayMedia to stream system audio.\n   * Should only be used for debugging.\n   */\n  @property({ attribute: \"debug-display-audio\", type: Boolean })\n  debug_displayAudio: boolean = false;\n\n  /**\n   * Configuration settings for dictation\n   */\n  @property({ attribute: false, type: Object })\n  set dictationConfig(value: Corti.TranscribeConfig) {\n    this._dictationConfig = value;\n  }\n\n  get dictationConfig(): Corti.TranscribeConfig {\n    return (\n      this.#contextProviderRef.value?.dictationConfig || this._dictationConfig\n    );\n  }\n\n  @state()\n  _dictationConfig: Corti.TranscribeConfig = DEFAULT_DICTATION_CONFIG;\n\n  /**\n   * List of available recording devices\n   */\n  @property({ attribute: false, type: Array })\n  set devices(value: MediaDeviceInfo[] | undefined) {\n    this._devices = value;\n  }\n\n  get devices(): MediaDeviceInfo[] {\n    return this.#contextProviderRef.value?.devices || this._devices || [];\n  }\n\n  @state()\n  _devices?: MediaDeviceInfo[];\n\n  /**\n   * The selected device used for recording (MediaDeviceInfo).\n   */\n  @property({ attribute: false, type: Object })\n  set selectedDevice(value: MediaDeviceInfo | undefined) {\n    this._selectedDevice = value;\n  }\n\n  get selectedDevice(): MediaDeviceInfo | undefined {\n    return (\n      this.#contextProviderRef.value?.selectedDevice || this._selectedDevice\n    );\n  }\n\n  @state()\n  _selectedDevice?: MediaDeviceInfo;\n\n  /**\n   * Current state of recording (stopped, recording, initializing and stopping, ).\n   */\n  get recordingState(): RecordingState {\n    return this.#contextProviderRef.value?.recordingState || \"stopped\";\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Public methods\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Set the latest access token.\n   * @returns ServerConfig with environment, tenant, and accessToken\n   * @deprecated Use 'accessToken' property instead.\n   */\n  public setAccessToken(token: string) {\n    this.accessToken = token;\n\n    return (\n      this.#contextProviderRef.value?.setAccessToken(token) ?? {\n        accessToken: token,\n        environment: undefined,\n        tenant: undefined,\n      }\n    );\n  }\n\n  /**\n   * Set the auth configuration for OAuth flows.\n   * @returns Promise with ServerConfig containing environment, tenant, and accessToken\n   * @deprecated Use 'authConfig' property instead.\n   */\n  public async setAuthConfig(config: Corti.BearerOptions) {\n    this.authConfig = config;\n\n    return (\n      this.#contextProviderRef.value?.setAuthConfig(config) ?? {\n        accessToken: undefined,\n        environment: undefined,\n        tenant: undefined,\n      }\n    );\n  }\n\n  /**\n   * Starts a recording.\n   */\n  public startRecording(): void {\n    this.#recordingButtonRef.value?.startRecording();\n  }\n\n  /**\n   * Stops a recording.\n   */\n  public stopRecording(): void {\n    this.#recordingButtonRef.value?.stopRecording();\n  }\n\n  /**\n   * Starts or stops recording. Convenience layer on top of the start/stop methods.\n   */\n  public toggleRecording(): void {\n    this.#recordingButtonRef.value?.toggleRecording();\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Render\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  render() {\n    const isHidden =\n      !this.accessToken &&\n      !this.authConfig &&\n      !this.socketUrl &&\n      !this.socketProxy;\n\n    return html`\n      <dictation-root\n        ${ref(this.#contextProviderRef)}\n        class=${classMap({ hidden: isHidden })}\n        .accessToken=${this.accessToken}\n        .authConfig=${this.authConfig}\n        .socketUrl=${this.socketUrl}\n        .socketProxy=${this.socketProxy}\n        .dictationConfig=${this._dictationConfig}\n        .languages=${this._languagesSupported}\n        .devices=${this._devices}\n        .selectedDevice=${this._selectedDevice}\n        .debug_displayAudio=${this.debug_displayAudio}\n      >\n        <dictation-recording-button\n          ${ref(this.#recordingButtonRef)}\n          ?allowButtonFocus=${this.allowButtonFocus}\n        ></dictation-recording-button>\n        ${\n          this.settingsEnabled?.length > 0\n            ? html`<dictation-settings-menu\n                .settingsEnabled=${this.settingsEnabled}\n              ></dictation-settings-menu>`\n            : nothing\n        }\n      </dictation-root>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"corti-dictation\": CortiDictation;\n  }\n}\n"]}
+{"version":3,"file":"corti-dictation.js","sourceRoot":"","sources":["../../src/components/corti-dictation.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Corti } from \"@corti/sdk\";\nimport { css, html, LitElement, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { createRef, type Ref, ref } from \"lit/directives/ref.js\";\nimport { DEFAULT_DICTATION_CONFIG } from \"../constants.js\";\nimport type { DictationRoot } from \"../contexts/dictation-context.js\";\nimport type {\n  ConfigurableSettings,\n  DictationMode,\n  ProxyOptions,\n  RecordingState,\n} from \"../types.js\";\nimport { commaSeparatedConverter } from \"../utils/converters.js\";\nimport type { DictationRecordingButton } from \"./recording-button.js\";\n\nimport \"../contexts/dictation-context.js\";\nimport \"./recording-button.js\";\nimport \"./settings-menu.js\";\n\n@customElement(\"corti-dictation\")\nexport class CortiDictation extends LitElement {\n  static styles = css`\n    .hidden {\n      display: none;\n    }\n  `;\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Private refs\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  #recordingButtonRef: Ref<DictationRecordingButton> = createRef();\n  #contextProviderRef: Ref<DictationRoot> = createRef();\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Properties\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Latest access token\n   */\n  @property({ type: String })\n  accessToken?: string;\n\n  /**\n   * Authentication configuration with optional refresh mechanism.\n   */\n  @property({ attribute: false, type: Object })\n  authConfig?: Corti.BearerOptions;\n\n  /**\n   * WebSocket URL for proxy connection. When provided, uses CortiWebSocketProxyClient instead of CortiClient.\n   */\n  @property({ type: String })\n  socketUrl?: string;\n\n  /**\n   * Socket proxy configuration object. When provided, uses CortiWebSocketProxyClient instead of CortiClient.\n   */\n  @property({ attribute: false, type: Object })\n  socketProxy?: ProxyOptions;\n\n  /**\n   * List of all language codes available for use with the Web Component.\n   *  Default list depends on the accessToken\n   */\n  @property({\n    converter: commaSeparatedConverter,\n    type: Array,\n  })\n  set languagesSupported(value:\n    | Corti.TranscribeSupportedLanguage[]\n    | undefined) {\n    this._languagesSupported = value;\n  }\n\n  get languagesSupported(): Corti.TranscribeSupportedLanguage[] {\n    return (\n      this.#contextProviderRef.value?.languages ||\n      this._languagesSupported ||\n      []\n    );\n  }\n\n  @state()\n  _languagesSupported?: Corti.TranscribeSupportedLanguage[];\n\n  /**\n   * Which settings should be available in the UI.\n   *  If an empty array is passed, the settings will be disabled entirely.\n   *  Options are language and devices\n   */\n  @property({\n    converter: commaSeparatedConverter,\n    type: Array,\n  })\n  settingsEnabled: ConfigurableSettings[] = [\"device\", \"language\"];\n\n  /**\n   * When false (default), allows the start/stop button from taking focus when clicked,\n   *  disabling textareas or other input elements to maintain focus.\n   *  Set to \"true\" to allow the button to receive focus on click.\n   */\n  @property({ type: Boolean })\n  allowButtonFocus: boolean = false;\n\n  /**\n   * Overrides any device selection and instead uses getDisplayMedia to stream system audio.\n   * Should only be used for debugging.\n   */\n  @property({ attribute: \"debug-display-audio\", type: Boolean })\n  debug_displayAudio: boolean = false;\n\n  /**\n   * Configuration settings for dictation\n   */\n  @property({ attribute: false, type: Object })\n  set dictationConfig(value: Corti.TranscribeConfig) {\n    this._dictationConfig = value;\n  }\n\n  get dictationConfig(): Corti.TranscribeConfig {\n    return (\n      this.#contextProviderRef.value?.dictationConfig || this._dictationConfig\n    );\n  }\n\n  @state()\n  _dictationConfig: Corti.TranscribeConfig = DEFAULT_DICTATION_CONFIG;\n\n  /**\n   * List of available recording devices\n   */\n  @property({ attribute: false, type: Array })\n  set devices(value: MediaDeviceInfo[] | undefined) {\n    this._devices = value;\n  }\n\n  get devices(): MediaDeviceInfo[] {\n    return this.#contextProviderRef.value?.devices || this._devices || [];\n  }\n\n  @state()\n  _devices?: MediaDeviceInfo[];\n\n  /**\n   * The selected device used for recording (MediaDeviceInfo).\n   */\n  @property({ attribute: false, type: Object })\n  set selectedDevice(value: MediaDeviceInfo | undefined) {\n    this._selectedDevice = value;\n  }\n\n  get selectedDevice(): MediaDeviceInfo | undefined {\n    return (\n      this.#contextProviderRef.value?.selectedDevice || this._selectedDevice\n    );\n  }\n\n  @state()\n  _selectedDevice?: MediaDeviceInfo;\n\n  /**\n   * Current state of recording (stopped, recording, initializing and stopping, ).\n   */\n  get recordingState(): RecordingState {\n    return this.#contextProviderRef.value?.recordingState || \"stopped\";\n  }\n\n  /**\n   * Dictation mode: \"toggle-to-talk\" or \"push-to-talk\"\n   */\n  @property({ type: String })\n  set mode(value: DictationMode) {\n    this._mode = value;\n  }\n\n  get mode(): DictationMode {\n    return (\n      this.#contextProviderRef.value?.mode || this._mode || \"toggle-to-talk\"\n    );\n  }\n\n  @state()\n  _mode?: DictationMode = \"toggle-to-talk\";\n\n  /**\n   * Keybinding for keyboard shortcut. Single key only (e.g., \"`\", \"k\", \"meta\", \"ctrl\").\n   * Combinations with \"+\" are not supported.\n   * Defaults to \"`\" if keybinding is in settingsEnabled, otherwise undefined\n   */\n  @property({ type: String })\n  set keybinding(value: string | null | undefined) {\n    this._keybinding = value;\n  }\n\n  get keybinding(): string | null | undefined {\n    return this.#contextProviderRef.value?.keybinding || this._keybinding;\n  }\n\n  @state()\n  _keybinding?: string | null;\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Public methods\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  /**\n   * Set the latest access token.\n   * @returns ServerConfig with environment, tenant, and accessToken\n   * @deprecated Use 'accessToken' property instead.\n   */\n  public setAccessToken(token: string) {\n    this.accessToken = token;\n\n    return (\n      this.#contextProviderRef.value?.setAccessToken(token) ?? {\n        accessToken: token,\n        environment: undefined,\n        tenant: undefined,\n      }\n    );\n  }\n\n  /**\n   * Set the auth configuration for OAuth flows.\n   * @returns Promise with ServerConfig containing environment, tenant, and accessToken\n   * @deprecated Use 'authConfig' property instead.\n   */\n  public async setAuthConfig(config: Corti.BearerOptions) {\n    this.authConfig = config;\n\n    return (\n      this.#contextProviderRef.value?.setAuthConfig(config) ?? {\n        accessToken: undefined,\n        environment: undefined,\n        tenant: undefined,\n      }\n    );\n  }\n\n  /**\n   * Starts a recording.\n   */\n  public startRecording(): void {\n    this.#recordingButtonRef.value?.startRecording();\n  }\n\n  /**\n   * Stops a recording.\n   */\n  public stopRecording(): void {\n    this.#recordingButtonRef.value?.stopRecording();\n  }\n\n  /**\n   * Starts or stops recording. Convenience layer on top of the start/stop methods.\n   */\n  public toggleRecording(): void {\n    this.#recordingButtonRef.value?.toggleRecording();\n  }\n\n  // ─────────────────────────────────────────────────────────────────────────────\n  // Render\n  // ─────────────────────────────────────────────────────────────────────────────\n\n  render() {\n    const isHidden =\n      !this.accessToken &&\n      !this.authConfig &&\n      !this.socketUrl &&\n      !this.socketProxy;\n\n    return html`\n      <dictation-root\n        ${ref(this.#contextProviderRef)}\n        class=${classMap({ hidden: isHidden })}\n        .accessToken=${this.accessToken}\n        .authConfig=${this.authConfig}\n        .socketUrl=${this.socketUrl}\n        .socketProxy=${this.socketProxy}\n        .dictationConfig=${this._dictationConfig}\n        .languages=${this._languagesSupported}\n        .devices=${this._devices}\n        .selectedDevice=${this._selectedDevice}\n        .debug_displayAudio=${this.debug_displayAudio}\n        .mode=${this._mode}\n        .keybinding=${this._keybinding}\n      >\n        <dictation-recording-button\n          ${ref(this.#recordingButtonRef)}\n          ?allowButtonFocus=${this.allowButtonFocus}\n        ></dictation-recording-button>\n        ${\n          this.settingsEnabled?.length > 0\n            ? html`<dictation-settings-menu\n                .settingsEnabled=${this.settingsEnabled}\n              ></dictation-settings-menu>`\n            : nothing\n        }\n      </dictation-root>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"corti-dictation\": CortiDictation;\n  }\n}\n"]}

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

@@ -4,7 +4,7 @@ export declare class DictationDeviceSelector extends LitElement {
     _devices?: MediaDeviceInfo[];
     _selectedDevice?: MediaDeviceInfo;
     disabled: boolean;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/components/keybinding-selector.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from "lit";
+export declare class DictationKeybindingSelector extends LitElement {
+    #private;
+    _keybinding?: string | null;
+    disabled: boolean;
+    _isCapturingKeybinding: boolean;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "dictation-keybinding-selector": DictationKeybindingSelector;
+    }
+}

package/dist/components/keybinding-selector.js

@@ -0,0 +1,82 @@
+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;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _DictationKeybindingSelector_instances, _DictationKeybindingSelector_handleKeybindingInputFocus, _DictationKeybindingSelector_handleKeybindingInputBlur, _DictationKeybindingSelector_handleKeybindingKeyDown;
+import { consume } from "@lit/context";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { keybindingContext } from "../contexts/dictation-context.js";
+import KeybindingSelectorStyles from "../styles/keybinding-selector.js";
+import { keybindingChangedEvent } from "../utils/events.js";
+let DictationKeybindingSelector = class DictationKeybindingSelector extends LitElement {
+    constructor() {
+        super(...arguments);
+        _DictationKeybindingSelector_instances.add(this);
+        this.disabled = false;
+        this._isCapturingKeybinding = false;
+    }
+    render() {
+        return html `
+      <div>
+        <label>Keybinding</label>
+        <div class="keybinding-selector-wrapper">
+          ${this._keybinding && html `<div class="keybinding-key">${this._keybinding}</div>`}
+          <input
+            type="text"
+            class="keybinding-selector-input"
+            .value=""
+            placeholder="Click and press a key..."
+            readonly
+            @focusin=${__classPrivateFieldGet(this, _DictationKeybindingSelector_instances, "m", _DictationKeybindingSelector_handleKeybindingInputFocus)}
+            @focusout=${__classPrivateFieldGet(this, _DictationKeybindingSelector_instances, "m", _DictationKeybindingSelector_handleKeybindingInputBlur)}
+            @keydown=${__classPrivateFieldGet(this, _DictationKeybindingSelector_instances, "m", _DictationKeybindingSelector_handleKeybindingKeyDown)}
+            ?disabled=${this.disabled}
+          />
+        </div>
+        ${this._keybinding &&
+            html `<p class="keybinding-help">
+            Press ${this._keybinding} to start/stop recording
+          </p>`}
+      </div>
+    `;
+    }
+};
+_DictationKeybindingSelector_instances = new WeakSet();
+_DictationKeybindingSelector_handleKeybindingInputFocus = function _DictationKeybindingSelector_handleKeybindingInputFocus() {
+    this._isCapturingKeybinding = true;
+};
+_DictationKeybindingSelector_handleKeybindingInputBlur = function _DictationKeybindingSelector_handleKeybindingInputBlur() {
+    this._isCapturingKeybinding = false;
+};
+_DictationKeybindingSelector_handleKeybindingKeyDown = function _DictationKeybindingSelector_handleKeybindingKeyDown(event) {
+    if (!this._isCapturingKeybinding) {
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    this.dispatchEvent(keybindingChangedEvent(event.key, event.code));
+};
+DictationKeybindingSelector.styles = KeybindingSelectorStyles;
+__decorate([
+    consume({ context: keybindingContext, subscribe: true }),
+    state()
+], DictationKeybindingSelector.prototype, "_keybinding", void 0);
+__decorate([
+    property({ type: Boolean })
+], DictationKeybindingSelector.prototype, "disabled", void 0);
+__decorate([
+    state()
+], DictationKeybindingSelector.prototype, "_isCapturingKeybinding", void 0);
+DictationKeybindingSelector = __decorate([
+    customElement("dictation-keybinding-selector")
+], DictationKeybindingSelector);
+export { DictationKeybindingSelector };
+//# sourceMappingURL=keybinding-selector.js.map

package/dist/components/keybinding-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keybinding-selector.js","sourceRoot":"","sources":["../../src/components/keybinding-selector.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,wBAAwB,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAGrD,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,UAAU;IAApD;;;QAML,aAAQ,GAAY,KAAK,CAAC;QAG1B,2BAAsB,GAAY,KAAK,CAAC;IAkD1C,CAAC;IA3BC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;YAIH,IAAI,CAAC,WAAW,IAAI,IAAI,CAAA,+BAA+B,IAAI,CAAC,WAAW,QAAQ;;;;;;;uBAOpE,uBAAA,IAAI,uGAA4B;wBAC/B,uBAAA,IAAI,sGAA2B;uBAChC,uBAAA,IAAI,oGAAyB;wBAC5B,IAAI,CAAC,QAAQ;;;UAI3B,IAAI,CAAC,WAAW;YAChB,IAAI,CAAA;oBACM,IAAI,CAAC,WAAW;eAE5B;;KAEH,CAAC;IACJ,CAAC;;;;IA5CC,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;AACrC,CAAC;;IAGC,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;AACtC,CAAC;qHAEwB,KAAoB;IAC3C,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACjC,OAAO;IACT,CAAC;IAED,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IAExB,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;AACpE,CAAC;AAnBM,kCAAM,GAAG,wBAAwB,AAA3B,CAA4B;AARzC;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACxD,KAAK,EAAE;gEACoB;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6DACF;AAG1B;IADC,KAAK,EAAE;2EACgC;AAT7B,2BAA2B;IADvC,aAAa,CAAC,+BAA+B,CAAC;GAClC,2BAA2B,CA2DvC","sourcesContent":["import { consume } from \"@lit/context\";\nimport { html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { keybindingContext } from \"../contexts/dictation-context.js\";\nimport KeybindingSelectorStyles from \"../styles/keybinding-selector.js\";\nimport { keybindingChangedEvent } from \"../utils/events.js\";\n\n@customElement(\"dictation-keybinding-selector\")\nexport class DictationKeybindingSelector extends LitElement {\n  @consume({ context: keybindingContext, subscribe: true })\n  @state()\n  _keybinding?: string | null;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @state()\n  _isCapturingKeybinding: boolean = false;\n\n  static styles = KeybindingSelectorStyles;\n\n  #handleKeybindingInputFocus(): void {\n    this._isCapturingKeybinding = true;\n  }\n\n  #handleKeybindingInputBlur(): void {\n    this._isCapturingKeybinding = false;\n  }\n\n  #handleKeybindingKeyDown(event: KeyboardEvent): void {\n    if (!this._isCapturingKeybinding) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    this.dispatchEvent(keybindingChangedEvent(event.key, event.code));\n  }\n\n  render() {\n    return html`\n      <div>\n        <label>Keybinding</label>\n        <div class=\"keybinding-selector-wrapper\">\n          ${this._keybinding && html`<div class=\"keybinding-key\">${this._keybinding}</div>`}\n          <input\n            type=\"text\"\n            class=\"keybinding-selector-input\"\n            .value=\"\"\n            placeholder=\"Click and press a key...\"\n            readonly\n            @focusin=${this.#handleKeybindingInputFocus}\n            @focusout=${this.#handleKeybindingInputBlur}\n            @keydown=${this.#handleKeybindingKeyDown}\n            ?disabled=${this.disabled}\n          />\n        </div>\n        ${\n          this._keybinding &&\n          html`<p class=\"keybinding-help\">\n            Press ${this._keybinding} to start/stop recording\n          </p>`\n        }\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"dictation-keybinding-selector\": DictationKeybindingSelector;\n  }\n}\n"]}

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

@@ -5,7 +5,7 @@ export declare class DictationLanguageSelector extends LitElement {
     _languages?: Corti.TranscribeSupportedLanguage[];
     _dictationConfig?: Corti.TranscribeConfig;
     disabled: boolean;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/components/mode-selector.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from "lit";
+import type { DictationMode } from "../types.js";
+export declare class DictationModeSelector extends LitElement {
+    #private;
+    _mode: DictationMode;
+    disabled: boolean;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "dictation-mode-selector": DictationModeSelector;
+    }
+}

package/dist/components/mode-selector.js

@@ -0,0 +1,73 @@
+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;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _DictationModeSelector_instances, _DictationModeSelector_handleModeChange;
+import { consume } from "@lit/context";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { modeContext } from "../contexts/dictation-context.js";
+import ModeSelectorStyles from "../styles/mode-selector.js";
+import { modeChangedEvent } from "../utils/events.js";
+let DictationModeSelector = class DictationModeSelector extends LitElement {
+    constructor() {
+        super(...arguments);
+        _DictationModeSelector_instances.add(this);
+        this._mode = "toggle-to-talk";
+        this.disabled = false;
+    }
+    render() {
+        return html `
+      <div>
+        <label>Dictation Mode</label>
+        <div class="mode-selector-tabs">
+          <button
+            class=${classMap({
+            active: this._mode === "toggle-to-talk",
+            "mode-selector-tab": true,
+        })}
+            @click=${() => __classPrivateFieldGet(this, _DictationModeSelector_instances, "m", _DictationModeSelector_handleModeChange).call(this, "toggle-to-talk")}
+            ?disabled=${this.disabled}
+          >
+            Toggle-to-Talk
+          </button>
+          <button
+            class=${classMap({
+            active: this._mode === "push-to-talk",
+            "mode-selector-tab": true,
+        })}
+            @click=${() => __classPrivateFieldGet(this, _DictationModeSelector_instances, "m", _DictationModeSelector_handleModeChange).call(this, "push-to-talk")}
+            ?disabled=${this.disabled}
+          >
+            Push-to-Talk
+          </button>
+        </div>
+      </div>
+    `;
+    }
+};
+_DictationModeSelector_instances = new WeakSet();
+_DictationModeSelector_handleModeChange = function _DictationModeSelector_handleModeChange(mode) {
+    this.dispatchEvent(modeChangedEvent(mode));
+};
+DictationModeSelector.styles = ModeSelectorStyles;
+__decorate([
+    consume({ context: modeContext, subscribe: true }),
+    state()
+], DictationModeSelector.prototype, "_mode", void 0);
+__decorate([
+    property({ type: Boolean })
+], DictationModeSelector.prototype, "disabled", void 0);
+DictationModeSelector = __decorate([
+    customElement("dictation-mode-selector")
+], DictationModeSelector);
+export { DictationModeSelector };
+//# sourceMappingURL=mode-selector.js.map

package/dist/components/mode-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-selector.js","sourceRoot":"","sources":["../../src/components/mode-selector.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,kBAAkB,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAG/C,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;;QAGL,UAAK,GAAkB,gBAAgB,CAAC;QAGxC,aAAQ,GAAY,KAAK,CAAC;IAqC5B,CAAC;IA7BC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;oBAKK,QAAQ,CAAC;YACf,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK,gBAAgB;YACvC,mBAAmB,EAAE,IAAI;SAC1B,CAAC;qBACO,GAAG,EAAE,CAAC,uBAAA,IAAI,iFAAkB,MAAtB,IAAI,EAAmB,gBAAgB,CAAC;wBAC3C,IAAI,CAAC,QAAQ;;;;;oBAKjB,QAAQ,CAAC;YACf,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK,cAAc;YACrC,mBAAmB,EAAE,IAAI;SAC1B,CAAC;qBACO,GAAG,EAAE,CAAC,uBAAA,IAAI,iFAAkB,MAAtB,IAAI,EAAmB,cAAc,CAAC;wBACzC,IAAI,CAAC,QAAQ;;;;;;KAMhC,CAAC;IACJ,CAAC;;;2FAhCiB,IAAmB;IACnC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;AAC7C,CAAC;AAJM,4BAAM,GAAG,kBAAkB,AAArB,CAAsB;AALnC;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IAClD,KAAK,EAAE;oDACgC;AAGxC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDACF;AANf,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CA2CjC","sourcesContent":["import { consume } from \"@lit/context\";\nimport { html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { modeContext } from \"../contexts/dictation-context.js\";\nimport ModeSelectorStyles from \"../styles/mode-selector.js\";\nimport type { DictationMode } from \"../types.js\";\nimport { modeChangedEvent } from \"../utils/events.js\";\n\n@customElement(\"dictation-mode-selector\")\nexport class DictationModeSelector extends LitElement {\n  @consume({ context: modeContext, subscribe: true })\n  @state()\n  _mode: DictationMode = \"toggle-to-talk\";\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  static styles = ModeSelectorStyles;\n\n  #handleModeChange(mode: DictationMode): void {\n    this.dispatchEvent(modeChangedEvent(mode));\n  }\n\n  render() {\n    return html`\n      <div>\n        <label>Dictation Mode</label>\n        <div class=\"mode-selector-tabs\">\n          <button\n            class=${classMap({\n              active: this._mode === \"toggle-to-talk\",\n              \"mode-selector-tab\": true,\n            })}\n            @click=${() => this.#handleModeChange(\"toggle-to-talk\")}\n            ?disabled=${this.disabled}\n          >\n            Toggle-to-Talk\n          </button>\n          <button\n            class=${classMap({\n              active: this._mode === \"push-to-talk\",\n              \"mode-selector-tab\": true,\n            })}\n            @click=${() => this.#handleModeChange(\"push-to-talk\")}\n            ?disabled=${this.disabled}\n          >\n            Push-to-Talk\n          </button>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"dictation-mode-selector\": DictationModeSelector;\n  }\n}\n"]}

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

@@ -1,6 +1,6 @@
 import type { Corti } from "@corti/sdk";
-import { type CSSResultGroup, LitElement } from "lit";
-import type { ProxyOptions, RecordingState } from "../types.js";
+import { type CSSResultGroup, LitElement, type PropertyValues } from "lit";
+import type { DictationMode, ProxyOptions, RecordingState } from "../types.js";
 import "./audio-visualiser.js";
 import "../icons/icons.js";
 export declare class DictationRecordingButton extends LitElement {
@@ -15,8 +15,11 @@ export declare class DictationRecordingButton extends LitElement {
     _socketUrl?: string;
     _socketProxy?: ProxyOptions;
     _debug_displayAudio?: boolean;
+    _keybinding?: string | null;
+    _mode?: DictationMode;
     allowButtonFocus: boolean;
     static styles: CSSResultGroup;
+    protected update(changedProperties: PropertyValues): void;
     startRecording(): void;
     stopRecording(): void;
     toggleRecording(): void;

package/dist/components/recording-button.js

@@ -9,13 +9,20 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _DictationRecordingButton_instances, _DictationRecordingButton_mediaController, _DictationRecordingButton_dictationController, _DictationRecordingButton_handleMouseDown, _DictationRecordingButton_handleWebSocketMessage, _DictationRecordingButton_handleWebSocketError, _DictationRecordingButton_handleWebSocketClose, _DictationRecordingButton_handleStart, _DictationRecordingButton_handleStop, _DictationRecordingButton_handleClick;
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _DictationRecordingButton_instances, _DictationRecordingButton_mediaController, _DictationRecordingButton_dictationController, _DictationRecordingButton_keybindingController, _DictationRecordingButton_closeConnectionOnInit, _DictationRecordingButton_handlePointerDown, _DictationRecordingButton_handlePointerUp, _DictationRecordingButton_handlePointerLeave, _DictationRecordingButton_handleWebSocketMessage, _DictationRecordingButton_handleWebSocketError, _DictationRecordingButton_handleWebSocketClose, _DictationRecordingButton_handleStart, _DictationRecordingButton_handleStop;
 import { consume } from "@lit/context";
-import { html, LitElement } from "lit";
+import { html, LitElement, } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { AUDIO_CHUNK_INTERVAL_MS } from "../constants.js";
-import { accessTokenContext, authConfigContext, debugDisplayAudioContext, dictationConfigContext, recordingStateContext, regionContext, selectedDeviceContext, socketProxyContext, socketUrlContext, tenantNameContext, } from "../contexts/dictation-context.js";
+import { accessTokenContext, authConfigContext, debugDisplayAudioContext, dictationConfigContext, keybindingContext, modeContext, recordingStateContext, regionContext, selectedDeviceContext, socketProxyContext, socketUrlContext, tenantNameContext, } from "../contexts/dictation-context.js";
 import { DictationController, } from "../controllers/dictation-controller.js";
+import { KeybindingController } from "../controllers/keybinding-controller.js";
 import { MediaController } from "../controllers/media-controller.js";
 import ButtonStyles from "../styles/buttons.js";
 import RecordingButtonStyles from "../styles/recording-button.js";
@@ -30,6 +37,8 @@ let DictationRecordingButton = class DictationRecordingButton extends LitElement
         this.allowButtonFocus = false;
         _DictationRecordingButton_mediaController.set(this, new MediaController(this));
         _DictationRecordingButton_dictationController.set(this, new DictationController(this));
+        _DictationRecordingButton_keybindingController.set(this, new KeybindingController(this));
+        _DictationRecordingButton_closeConnectionOnInit.set(this, false);
         _DictationRecordingButton_handleWebSocketMessage.set(this, (message) => {
             switch (message.type) {
                 case "CONFIG_ACCEPTED":
@@ -70,6 +79,15 @@ let DictationRecordingButton = class DictationRecordingButton extends LitElement
             this.dispatchEvent(streamClosedEvent(event));
         });
     }
+    update(changedProperties) {
+        if (changedProperties.has("_recordingState") &&
+            this._recordingState === "recording" &&
+            __classPrivateFieldGet(this, _DictationRecordingButton_closeConnectionOnInit, "f")) {
+            __classPrivateFieldSet(this, _DictationRecordingButton_closeConnectionOnInit, false, "f");
+            __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
+        }
+        super.update(changedProperties);
+    }
     startRecording() {
         if (this._recordingState !== "stopped") {
             return;
@@ -77,13 +95,23 @@ let DictationRecordingButton = class DictationRecordingButton extends LitElement
         __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStart).call(this);
     }
     stopRecording() {
-        if (this._recordingState !== "recording") {
+        if (this._recordingState === "stopped" ||
+            this._recordingState === "stopping") {
+            return;
+        }
+        if (this._recordingState === "initializing") {
+            __classPrivateFieldSet(this, _DictationRecordingButton_closeConnectionOnInit, true, "f");
             return;
         }
         __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
     }
     toggleRecording() {
-        __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleClick).call(this);
+        if (this._recordingState === "stopped") {
+            this.startRecording();
+        }
+        else if (this._recordingState === "recording") {
+            this.stopRecording();
+        }
     }
     render() {
         const isLoading = this._recordingState === "initializing" ||
@@ -91,8 +119,10 @@ let DictationRecordingButton = class DictationRecordingButton extends LitElement
         const isRecording = this._recordingState === "recording";
         return html `
       <button
-        @mousedown=${__classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleMouseDown)}
-        @click=${__classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleClick)}
+        @pointerdown=${__classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handlePointerDown)}
+        @pointerup=${__classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handlePointerUp)}
+        @pointerleave=${__classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handlePointerLeave)}
+        @pointercancel=${__classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handlePointerLeave)}
         ?disabled=${isLoading}
         class=${isRecording ? "red" : "accent"}
         aria-label=${isRecording ? "Stop recording" : "Start recording"}
@@ -113,14 +143,42 @@ let DictationRecordingButton = class DictationRecordingButton extends LitElement
 };
 _DictationRecordingButton_mediaController = new WeakMap();
 _DictationRecordingButton_dictationController = new WeakMap();
+_DictationRecordingButton_keybindingController = new WeakMap();
+_DictationRecordingButton_closeConnectionOnInit = new WeakMap();
 _DictationRecordingButton_handleWebSocketMessage = new WeakMap();
 _DictationRecordingButton_handleWebSocketError = new WeakMap();
 _DictationRecordingButton_handleWebSocketClose = new WeakMap();
 _DictationRecordingButton_instances = new WeakSet();
-_DictationRecordingButton_handleMouseDown = function _DictationRecordingButton_handleMouseDown(event) {
+_DictationRecordingButton_handlePointerDown = function _DictationRecordingButton_handlePointerDown(event) {
     if (!this.allowButtonFocus) {
         event.preventDefault();
     }
+    if (this._mode === "push-to-talk") {
+        this.startRecording();
+        event.currentTarget.setPointerCapture(event.pointerId);
+    }
+};
+_DictationRecordingButton_handlePointerUp = function _DictationRecordingButton_handlePointerUp(event) {
+    if (this._mode === "push-to-talk") {
+        this.stopRecording();
+        const button = event.currentTarget;
+        if (button.hasPointerCapture(event.pointerId)) {
+            button.releasePointerCapture(event.pointerId);
+        }
+        return;
+    }
+    if (this._mode === "toggle-to-talk") {
+        this.toggleRecording();
+    }
+};
+_DictationRecordingButton_handlePointerLeave = function _DictationRecordingButton_handlePointerLeave(event) {
+    if (this._mode === "push-to-talk") {
+        this.stopRecording();
+        const button = event.currentTarget;
+        if (button.hasPointerCapture(event.pointerId)) {
+            button.releasePointerCapture(event.pointerId);
+        }
+    }
 };
 _DictationRecordingButton_handleStart = async function _DictationRecordingButton_handleStart() {
     this.dispatchEvent(recordingStateChangedEvent("initializing"));
@@ -131,7 +189,7 @@ _DictationRecordingButton_handleStart = async function _DictationRecordingButton
                 __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
             }
         });
-        await __classPrivateFieldGet(this, _DictationRecordingButton_dictationController, "f").connect(__classPrivateFieldGet(this, _DictationRecordingButton_mediaController, "f").mediaRecorder, this._dictationConfig, {
+        const isNewConnection = await __classPrivateFieldGet(this, _DictationRecordingButton_dictationController, "f").connect(__classPrivateFieldGet(this, _DictationRecordingButton_mediaController, "f").mediaRecorder, this._dictationConfig, {
             onClose: __classPrivateFieldGet(this, _DictationRecordingButton_handleWebSocketClose, "f"),
             onError: __classPrivateFieldGet(this, _DictationRecordingButton_handleWebSocketError, "f"),
             onMessage: __classPrivateFieldGet(this, _DictationRecordingButton_handleWebSocketMessage, "f"),
@@ -139,6 +197,14 @@ _DictationRecordingButton_handleStart = async function _DictationRecordingButton
                 this.dispatchEvent(networkActivityEvent(direction, data));
             },
         });
+        // configuration has been accepted before
+        if (!isNewConnection) {
+            __classPrivateFieldGet(this, _DictationRecordingButton_mediaController, "f").mediaRecorder?.start(AUDIO_CHUNK_INTERVAL_MS);
+            __classPrivateFieldGet(this, _DictationRecordingButton_mediaController, "f").startAudioLevelMonitoring((level) => {
+                this.dispatchEvent(audioLevelChangedEvent(level));
+            });
+            this.dispatchEvent(recordingStateChangedEvent("recording"));
+        }
     }
     catch (error) {
         this.dispatchEvent(errorEvent(error));
@@ -158,14 +224,6 @@ _DictationRecordingButton_handleStop = async function _DictationRecordingButton_
     }
     this.dispatchEvent(recordingStateChangedEvent("stopped"));
 };
-_DictationRecordingButton_handleClick = function _DictationRecordingButton_handleClick() {
-    if (this._recordingState === "stopped") {
-        __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStart).call(this);
-    }
-    else if (this._recordingState === "recording") {
-        __classPrivateFieldGet(this, _DictationRecordingButton_instances, "m", _DictationRecordingButton_handleStop).call(this);
-    }
-};
 DictationRecordingButton.styles = [RecordingButtonStyles, ButtonStyles];
 __decorate([
     consume({ context: recordingStateContext, subscribe: true }),
@@ -207,6 +265,14 @@ __decorate([
     consume({ context: debugDisplayAudioContext, subscribe: true }),
     state()
 ], DictationRecordingButton.prototype, "_debug_displayAudio", void 0);
+__decorate([
+    consume({ context: keybindingContext, subscribe: true }),
+    state()
+], DictationRecordingButton.prototype, "_keybinding", void 0);
+__decorate([
+    consume({ context: modeContext, subscribe: true }),
+    state()
+], DictationRecordingButton.prototype, "_mode", void 0);
 __decorate([
     property({ type: Boolean })
 ], DictationRecordingButton.prototype, "allowButtonFocus", void 0);