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

package/README.md

@@ -1,156 +1,217 @@
 # Corti Dictation Web Component
 
+[![Published on npm](https://img.shields.io/npm/v/@corti/dictation-web.svg?logo=npm)](https://www.npmjs.com/package/@corti/dictation-web)
+[![License: MIT](https://img.shields.io/npm/l/%40corti%2Fdictation-web)](https://opensource.org/licenses/MIT)
+[![Get Support on Discord](https://img.shields.io/badge/Discord-Get%20Support-5865F2.svg?logo=discord&logoColor=fff)](https://discord.com/invite/zXeXHgnZXX)
+[![Live Demo](https://img.shields.io/badge/Live%20Demo-blue.svg?logo=rocket&logoColor=fff)](https://codepen.io/hccullen/pen/OPJmxQR)
+
 ## Overview
 
 The **Corti Dictation Web Component** is a web component that enables real-time speech-to-text dictation using Corti's Dictation API. It provides a simple interface for capturing audio, streaming it to the API, and handling transcripts.
 
-> **Note:** OAuth 2.0 authentication is not handled by this library. The client must provide an API key or authorization token before using the component.
+This library offers two approaches:
+- **Opinionated Component**: Use `<corti-dictation>` for a complete, ready-to-use solution with built-in UI
+- **Modular Components**: Use individual components for maximum flexibility and custom UI implementations
+
+> **Note:** OAuth 2.0 authentication is not handled by this library. The client must provide an authorization token or token refresh function while using the component.
+
+## Component Architecture
+
+### Opinionated Component
+
+**`<corti-dictation>`** - A complete, ready-to-use component that includes:
+- Recording button with visual feedback
+- Settings menu for device, language, mode, and keybinding selection
+- Automatic state management
+- Built-in styling and theming
+- Support for toggle-to-talk and push-to-talk modes
+- Keyboard shortcut (keybinding) support
+
+This is the easiest way to get started and works out of the box.
+
+### Modular Components
+
+For more control and flexibility, you can use individual components:
+
+- **`<dictation-root>`** - Context provider that manages authentication, configuration, and shared state
+- **`<dictation-recording-button>`** - Standalone recording button with audio visualization
+- **`<dictation-settings-menu>`** - Settings menu with device, language, mode, and keybinding selectors
+- **`<dictation-device-selector>`** - Device selection dropdown
+- **`<dictation-language-selector>`** - Language selection dropdown
+- **`<dictation-mode-selector>`** - Mode selection component (toggle-to-talk or push-to-talk)
+- **`<dictation-keybinding-selector>`** - Keybinding configuration component for keyboard shortcuts
+
+These components share state through a context system, allowing you to build custom UIs while leveraging the same underlying functionality.
 
 ## Installation
 
-Include the Web Component in your project by importing the JavaScript module:
+Install the package using your preferred package manager:
 
-```html
+```bash
+# npm
 npm i @corti/dictation-web
+
+# yarn
+yarn add @corti/dictation-web
+
+# pnpm
+pnpm add @corti/dictation-web
+
+# bun
+bun add @corti/dictation-web
 ```
 
-Then import the module like so:
+Then import the module in your code. You can either use a side-effect import to auto-register the component:
 
 ```js
-// Import the Corti Dictation Web Component
+// Side-effect import - automatically registers the component
 import '@corti/dictation-web';
 ```
 
-Alternatively, use a CDN to start quickly (not recommended).
+Or import the component class directly:
+
+```js
+// Named import - register the component manually if needed
+import { CortiDictation } from '@corti/dictation-web';
+```
+
+Alternatively, use a CDN to start quickly (not recommended for production):
 
 ```html
 <script
-  src="https://cdn.jsdelivr.net/npm/@corti/dictation-web/dist/bundle.min.js"
-  preload
+  src="https://cdn.jsdelivr.net/npm/@corti/dictation-web/dist/bundle.js"
   type="module"
 ></script>
 ```
 
-## Usage
-
-### Demo
+## Demo
 
 🚀 [Hosted Demo](https://codepen.io/hccullen/pen/OPJmxQR)
 
-### Basic Example
+## Quick Start
+
+Here's a simple example to get you started:
 
 ```html
 <!DOCTYPE html>
 <html lang="en">
-  <body>
-    <corti-dictation id="dictation"></corti-dictation>
-    <textarea
-      id="transcript"
-      placeholder="Transcript will appear here..."
-    ></textarea>
-
-    <script>
-      import '@corti/dictation-web';
-      const dictationEl = document.getElementById('dictation');
-      dictationEl.addEventListener('ready', () => {
-        dictationEl.setAccessToken('YOUR_AUTH_TOKEN'); // Note: Never hardcode tokens
-      });
-      dictationEl.addEventListener('transcript', e => {
-        document.getElementById('transcript').value += e.detail.data.text + ' ';
-      });
-    </script>
-  </body>
+<body>
+<corti-dictation id="dictation"></corti-dictation>
+<textarea
+  id="transcript"
+  placeholder="Transcript will appear here..."
+></textarea>
+
+<script type="module">
+  import '@corti/dictation-web';
+
+  const dictationEl = document.getElementById('dictation');
+  const transcriptEl = document.getElementById('transcript');
+
+  dictationEl.addEventListener('ready', () => {
+    dictationEl.accessToken = 'YOUR_AUTH_TOKEN'; // Note: Never hardcode tokens
+  });
+
+  dictationEl.addEventListener('transcript', (e) => {
+    if (e.detail.data.isFinal) {
+      transcriptEl.value += e.detail.data.text + ' ';
+    }
+  });
+</script>
+</body>
 </html>
 ```
 
-## API Reference
-
-### Properties
+### Modular Example
 
-| Property             | Type    | Description                                                                                                               |
-| -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- |
-| `devices`            | Array   | List of available recording devices.                                                                                      |
-| `selectedDevice`     | Object  | The selected device used for recording (MediaDeviceInfo).                                                                 |
-| `recordingState`     | String  | Current state of recording (`stopped`, `recording`, `initializing` and `stopping`, ).                                     |
-| `dictationConfig`    | Object  | Configuration settings for dictation.                                                                                     |
-| `languagesSupported`    | String[]  | List of all language codes available for use with the Web Component.                                                                                     |
-| `debug_displayAudio` | Boolean | Overrides any device selection and instead uses getDisplayMedia to stream system audio. Should only be used for debugging |
+For more control, use individual components to build a custom UI:
 
-### Methods
-
-| Method                                 | Description                                                      |
-| -------------------------------------- | ---------------------------------------------------------------- |
-| `toggleRecording()`                    | Starts or stops recording.                                       |
-| `setAccessToken(access_token: string)` | Set the latest access token. This will return the server config. |
-| `setAuthConfig(config: AuthConfig)`    | Set authentication configuration with optional refresh mechanism. |
-
-### Events
+```html
+<!DOCTYPE html>
+<html lang="en">
+<body>
+<dictation-root id="dictationRoot">
+  <dictation-recording-button></dictation-recording-button>
+  <dictation-settings-menu settingsEnabled="device,language,mode,keybinding"></dictation-settings-menu>
+</dictation-root>
+
+<textarea
+  id="transcript"
+  placeholder="Transcript will appear here..."
+></textarea>
+
+<script type="module">
+  import '@corti/dictation-web';
+
+  const root = document.getElementById('dictationRoot');
+  const transcriptEl = document.getElementById('transcript');
+
+  root.addEventListener('ready', () => {
+    root.accessToken = 'YOUR_AUTH_TOKEN'; // Note: Never hardcode tokens
+  });
+
+  root.addEventListener('transcript', (e) => {
+    if (e.detail.data.isFinal) {
+      transcriptEl.value += e.detail.data.text + ' ';
+    }
+  });
+</script>
+</body>
+</html>
+```
 
-| Event                       | Description                                                                                                                                                                                             |
-| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ready`                     | Fired once the component is ready.                                                                                                                                                                      |
-| `recording-state-changed`   | Fired when the recording state changes. `detail.state` contains the new state.                                                                                                                          |
-| `recording-devices-changed` | Fired when the user switches recording devices or the list of recording devices changes. `detail.devices` contains the full devices list. `detail.selectedDevice` contains the current selected device. |
-| `transcript`                | Fired when a new transcript is received. `detail.data.text` contains the transcribed text.                                                                                                              |
-| `command`                   | Fired whenever a new command is detected.                                                                                                                                                               |
-| `audio-level-changed`       | Fired when the input audio level changes. `detail.audioLevel` contains the new level.                                                                                                                   |
-| `usage`                     | Fired when usage information is received from the server. `detail.credits` contains the usage data.                                                                                                             |
-| `stream-closed`             | Fired when the WebSocket stream is closed. `detail` contains the close event data.                                                                                                                     |
-| `error`                     | Fired on error. `detail` contains the full error.                                                                                                                                                       |
+### Dictation Modes
 
-## Authentication
+The component supports two dictation modes:
 
-This library supports multiple authentication methods:
+**Toggle-to-Talk (default):**
+- Click or tap the recording button to start recording
+- Click or tap again to stop recording
+- Press the keybinding to toggle recording state
 
-### Basic Bearer Token
-```javascript
-dictation.setAccessToken('YOUR_JWT_TOKEN');
+```html
+<corti-dictation mode="toggle-to-talk"></corti-dictation>
 ```
 
-### With Refresh Token Support
-
-The library can automatically refresh tokens when they expire:
-
-```javascript
-dictation.setAuthConfig({
-  // This function runs before any API call when the access_token is near expiration
-  refreshAccessToken: async (refreshToken?: string) => {
-      // Custom refresh logic -- get new access_token from server
-      // if accessToken is not passed to AuthConfig, refreshToken will be `undefined` for the first call,
-      //   then it will be the refreshToken returned from the previous token request
-      const response = await fetch("https://your-auth-server/token", {
-          method: "POST", 
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ refreshToken }),
-      });
-      
-      const result = await response.json();
-      
-      // Return in the expected format
-      return {
-        accessToken: result.accessToken,
-        refreshToken: result.refreshToken,
-      };
-  }
-});
+**Push-to-Talk:**
+- Press and hold the recording button to record
+- Release to stop recording
+- Press and hold the keybinding to record (keydown starts, keyup stops)
+
+```html
+<corti-dictation mode="push-to-talk"></corti-dictation>
 ```
 
-The refresh mechanism automatically handles token renewal when the access token is near expiration, ensuring uninterrupted dictation sessions.
+### Keyboard Shortcuts (Keybindings)
 
-## Usage Examples
+Configure keyboard shortcuts to start/stop recording. You can use either key names (from `event.key`) or key codes (from `event.code`):
 
-Explore practical implementations and usage examples in the [Demo Folder](https://github.com/corticph/dictation-web-sdk/tree/main/demo). These demos can also be run locally.
+```html
+<!-- Use backtick key (default) - key name -->
+<corti-dictation keybinding="`"></corti-dictation>
 
-## Styling
+<!-- Use 'k' key - key name -->
+<corti-dictation keybinding="k"></corti-dictation>
 
-![UI Overview](https://github.com/corticph/dictation-web-sdk/blob/main/docs/ui.png)
+<!-- Use Meta key (Cmd on Mac, Meta elsewhere) - key name -->
+<corti-dictation keybinding="meta"></corti-dictation>
 
-The default UI is designed to be slotted into existing applications seamlessly, however, it also supports custom styling as well as theming. The UI can be fully customized using CSS properties. Refer to our [Styling Guide](https://github.com/corticph/dictation-web-sdk/blob/main/docs/styling.md) for detailed instructions.
+<!-- Use key codes instead of key names -->
+<corti-dictation keybinding="Backquote"></corti-dictation> <!-- backtick -->
+<corti-dictation keybinding="KeyK"></corti-dictation> <!-- 'k' key -->
+<corti-dictation keybinding="MetaLeft"></corti-dictation> <!-- Meta key -->
+```
 
-## License
+Keybindings are platform-aware:
+- Keybindings are automatically ignored when typing in input fields, textareas, or contenteditable elements
+- Both key names (e.g., `"k"`, `"Meta"`) and key codes (e.g., `"KeyK"`, `"MetaLeft"`) are supported
 
-This Web Component library is licensed under MIT.
+## Documentation
 
-## Support
+For more detailed information, see:
 
-For issues or questions, contact **Corti Support** at [support@corti.ai](mailto:help@corti.ai).
+- **[API Reference](docs/API_REFERENCE.md)** - Complete API documentation for properties, methods, and events
+- **[Authentication Guide](docs/AUTHENTICATION.md)** - How to set up authentication with tokens and refresh mechanisms
+- **[Styling Guide](docs/styling.md)** - Customize the component's appearance with CSS variables and themes
+- **[Examples](demo/README.md)** - Practical usage examples and demos
+- **[Development Guide](docs/DEV_README.md)** - Information for contributors and developers

package/dist/CortiDictation.d.ts

@@ -3,12 +3,14 @@ import { LitElement } from 'lit';
 import './components/settings-menu.js';
 import './components/audio-visualiser.js';
 import './icons/icons.js';
-import type { RecordingState, ServerConfig } from './types.js';
+import type { ConfigurableSettings, RecordingState, ServerConfig } from './types.js';
 export declare class CortiDictation extends LitElement {
     static styles: import("lit").CSSResult[];
     dictationConfig: Corti.TranscribeConfig;
     languagesSupported: Corti.TranscribeSupportedLanguage[];
     debug_displayAudio: boolean;
+    settingsEnabled: ConfigurableSettings[];
+    preventButtonFocus: boolean;
     private _serverConfig;
     private _audioLevel;
     private _recordingState;
@@ -16,6 +18,8 @@ export declare class CortiDictation extends LitElement {
     private _devices;
     private recorderManager;
     connectedCallback(): Promise<void>;
+    startRecording(): void;
+    stopRecording(): void;
     toggleRecording(): void;
     /**
      * Sets the access token and returns the server configuration.
@@ -43,7 +47,7 @@ export declare class CortiDictation extends LitElement {
     get devices(): MediaDeviceInfo[];
     setRecordingDevice(device: MediaDeviceInfo): Promise<void>;
     setPrimaryLanguage(language: string): void;
-    _toggleRecording(): void;
+    _onButtonMouseDown(event: MouseEvent): void;
     _onRecordingDevicesChanged(event: Event): Promise<void>;
     _onLanguageChanged(event: Event): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist/CortiDictation.js

@@ -23,6 +23,8 @@ export class CortiDictation extends LitElement {
         this.dictationConfig = DEFAULT_DICTATION_CONFIG;
         this.languagesSupported = LANGUAGES_SUPPORTED;
         this.debug_displayAudio = false;
+        this.settingsEnabled = ["device", "language"];
+        this.preventButtonFocus = true;
         this._audioLevel = 0;
         this._recordingState = 'stopped';
         this._devices = [];
@@ -77,8 +79,25 @@ export class CortiDictation extends LitElement {
             });
         });
     }
+    startRecording() {
+        if (!this._serverConfig)
+            return;
+        this.recorderManager.startRecording({
+            dictationConfig: this.dictationConfig,
+            serverConfig: this._serverConfig,
+            debug_displayAudio: this.debug_displayAudio,
+        });
+    }
+    stopRecording() {
+        this.recorderManager.stopRecording();
+    }
     toggleRecording() {
-        this._toggleRecording();
+        if (this._recordingState === 'recording') {
+            this.stopRecording();
+        }
+        else if (this._recordingState === 'stopped') {
+            this.startRecording();
+        }
     }
     /**
      * Sets the access token and returns the server configuration.
@@ -190,18 +209,11 @@ export class CortiDictation extends LitElement {
             }
         }
     }
-    _toggleRecording() {
-        if (!this._serverConfig)
-            return;
-        if (this._recordingState === 'recording') {
-            this.recorderManager.stopRecording();
-        }
-        else if (this._recordingState === 'stopped') {
-            this.recorderManager.startRecording({
-                dictationConfig: this.dictationConfig,
-                serverConfig: this._serverConfig,
-                debug_displayAudio: this.debug_displayAudio,
-            });
+    _onButtonMouseDown(event) {
+        // Prevent button from taking focus on mouse click
+        // This keeps focus on the textarea
+        if (this.preventButtonFocus) {
+            event.preventDefault();
         }
     }
     // Handle device change events if needed
@@ -227,7 +239,8 @@ export class CortiDictation extends LitElement {
         return html `
       <div class="wrapper">
         <button
-          @click=${this._toggleRecording}
+          @click=${this.toggleRecording}
+          @mousedown=${this._onButtonMouseDown}
           class=${isRecording ? 'red' : 'accent'}
         >
           ${isLoading
@@ -241,13 +254,16 @@ export class CortiDictation extends LitElement {
           ></audio-visualiser>
         </button>
 
+        ${this.settingsEnabled.length > 0 ? html `
         <settings-menu
           .selectedDevice=${this._selectedDevice}
           .selectedLanguage=${this.dictationConfig.primaryLanguage}
           ?settingsDisabled=${this._recordingState !== 'stopped'}
           @recording-devices-changed=${this._onRecordingDevicesChanged}
           @language-changed=${this._onLanguageChanged}
+          .settingsEnabled=${this.settingsEnabled}
         ></settings-menu>
+        ` : ''}
       </div>
     `;
     }
@@ -262,6 +278,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], CortiDictation.prototype, "debug_displayAudio", void 0);
+__decorate([
+    property({ type: Array })
+], CortiDictation.prototype, "settingsEnabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], CortiDictation.prototype, "preventButtonFocus", void 0);
 __decorate([
     state()
 ], CortiDictation.prototype, "_serverConfig", void 0);

package/dist/CortiDictation.js.map

@@ -1 +1 @@
-{"version":3,"file":"CortiDictation.js","sourceRoot":"","sources":["../src/CortiDictation.ts"],"names":[],"mappings":"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","sourcesContent":["import { type Corti } from '@corti/sdk';\n\n// corti-dictation.ts\nimport { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { RecorderManager } from './RecorderManager.js';\nimport './components/settings-menu.js';\nimport './components/audio-visualiser.js';\nimport './icons/icons.js';\nimport ThemeStyles from './styles/theme.js';\nimport ButtonStyles from './styles/buttons.js';\nimport ComponentStyles from './styles/ComponentStyles.js';\n\nimport type { RecordingState, ServerConfig } from './types.js';\nimport { DEFAULT_DICTATION_CONFIG, LANGUAGES_SUPPORTED } from './constants.js';\nimport CalloutStyles from './styles/callout.js';\nimport { decodeToken } from './utils.js';\n\nexport class CortiDictation extends LitElement {\n  static styles = [ButtonStyles, ThemeStyles, ComponentStyles, CalloutStyles];\n\n  @property({ type: Object })\n  dictationConfig: Corti.TranscribeConfig = DEFAULT_DICTATION_CONFIG;\n\n  @property({ type: Array })\n  languagesSupported: Corti.TranscribeSupportedLanguage[] = LANGUAGES_SUPPORTED;\n\n  @property({ type: Boolean })\n  debug_displayAudio: boolean = false;\n\n  @state()\n  private _serverConfig: ServerConfig | undefined;\n\n  @state()\n  private _audioLevel: number = 0;\n\n  @state()\n  private _recordingState: RecordingState = 'stopped';\n\n  @state()\n  private _selectedDevice: MediaDeviceInfo | undefined;\n\n  @state()\n  private _devices: MediaDeviceInfo[] = [];\n\n  private recorderManager = new RecorderManager();\n\n  async connectedCallback() {\n    super.connectedCallback();\n    const devices = await this.recorderManager.initialize();\n    if (devices.selectedDevice) {\n      this._selectedDevice = this.recorderManager.selectedDevice;\n      this._devices = this.recorderManager.devices;\n      this.dispatchEvent(new CustomEvent('ready'));\n    }\n\n    // Map event names to any extra handling logic\n    const eventHandlers: Record<string, (e: CustomEvent) => void> = {\n      'recording-state-changed': e => {\n        this._recordingState = e.detail.state;\n      },\n      'devices-changed': () => {\n        this._devices = [...this.recorderManager.devices];\n        this.requestUpdate();\n      },\n      'audio-level-changed': e => {\n        this._audioLevel = e.detail.audioLevel;\n        this.requestUpdate();\n      },\n    };\n\n    const eventsToRelay = [\n      'recording-state-changed',\n      'recording-devices-changed',\n      'audio-level-changed',\n      'error',\n      'transcript',\n      'command',\n      'ready',\n      'usage',\n      'stream-closed',\n    ];\n\n    eventsToRelay.forEach(eventName => {\n      this.recorderManager.addEventListener(eventName, (e: Event) => {\n        const customEvent = e as CustomEvent;\n        // Perform any additional handling if defined\n        if (eventHandlers[eventName]) {\n          eventHandlers[eventName](customEvent);\n        }\n        // Re-dispatch the event from the component\n        this.dispatchEvent(\n          new CustomEvent(eventName, {\n            detail: customEvent.detail,\n            bubbles: eventName !== 'error',\n            composed: true,\n          }),\n        );\n      });\n    });\n  }\n\n  public toggleRecording() {\n    this._toggleRecording();\n  }\n\n  /**\n   * Sets the access token and returns the server configuration.\n   *\n   * NOTE: We decode the token here only for backward compatibility in return values.\n   * The SDK now handles token parsing internally, so this return value should be\n   * reduced in the future to only include necessary fields.\n   */\n  public setAccessToken(token: string) {\n    try {\n      const decoded = decodeToken(token);\n      this._serverConfig = decoded;\n      return decoded;\n    } catch (e) {\n      throw new Error('Invalid token');\n    }\n  }\n\n  /**\n   * Sets the authentication configuration and returns the server configuration.\n   *\n   * NOTE: We decode tokens here only for backward compatibility in return values.\n   * The SDK now handles token parsing internally, so this return value should be\n   * reduced in the future to only include necessary fields.\n   */\n  public async setAuthConfig(\n    config: Corti.BearerOptions,\n  ): Promise<ServerConfig> {\n    try {\n      const initialToken =\n        'accessToken' in config\n          ? { accessToken: config.accessToken, refreshToken: config.refreshToken }\n          : await config.refreshAccessToken();\n\n      if (\n        !initialToken?.accessToken ||\n        typeof initialToken.accessToken !== 'string'\n      ) {\n        throw new Error('Access token is required and must be a string');\n      }\n\n      // Decode tokens only for return value compatibility\n      // The SDK handles its own token parsing internally\n      const decoded = decodeToken(initialToken.accessToken);\n\n      if (!decoded) {\n        throw new Error('Invalid token format');\n      }\n\n      this._serverConfig = {\n        environment: decoded.environment,\n        tenant: decoded.tenant,\n        accessToken: initialToken.accessToken,\n        refreshToken: config.refreshToken,\n        refreshAccessToken: async (refreshToken?: string) => {\n          try {\n            if (!config.refreshAccessToken) {\n              return {\n                accessToken: this._serverConfig?.accessToken || 'no_token',\n                expiresIn: Infinity,\n                refreshToken,\n              };\n            }\n\n            const response = await config.refreshAccessToken(refreshToken);\n\n            if (this._serverConfig) {\n              this._serverConfig.accessToken = response.accessToken;\n              this._serverConfig.refreshToken = response.refreshToken;\n            }\n\n            return response;\n          } catch (e) {\n            throw new Error('Error when refreshing access token');\n          }\n        },\n      };\n\n      return this._serverConfig;\n    } catch (e) {\n      throw new Error('Invalid config');\n    }\n  }\n\n  public get selectedDevice(): MediaDeviceInfo | null {\n    return this.recorderManager.selectedDevice || null;\n  }\n\n  public get recordingState(): RecordingState {\n    return this._recordingState;\n  }\n\n  public get devices(): MediaDeviceInfo[] {\n    return this._devices;\n  }\n\n  public async setRecordingDevice(device: MediaDeviceInfo) {\n    this.recorderManager.selectedDevice = device;\n    this._selectedDevice = device;\n    if (!this._serverConfig) return;\n    if (this._recordingState === 'recording') {\n      await this.recorderManager.stopRecording();\n      await this.recorderManager.startRecording({\n        dictationConfig: this.dictationConfig,\n        serverConfig: this._serverConfig,\n      });\n    }\n  }\n\n  public setPrimaryLanguage(language: string) {\n    if (LANGUAGES_SUPPORTED.includes(language)) {\n      this.dictationConfig = {\n        ...this.dictationConfig,\n        primaryLanguage: language,\n      };\n\n      // If recording is in progress, restart to apply the language change\n      if (this._serverConfig && this._recordingState === 'recording') {\n        this.recorderManager.stopRecording();\n        this.recorderManager.startRecording({\n          dictationConfig: this.dictationConfig,\n          serverConfig: this._serverConfig,\n          debug_displayAudio: this.debug_displayAudio,\n        });\n      }\n    }\n  }\n\n  _toggleRecording() {\n    if (!this._serverConfig) return;\n    if (this._recordingState === 'recording') {\n      this.recorderManager.stopRecording();\n    } else if (this._recordingState === 'stopped') {\n      this.recorderManager.startRecording({\n        dictationConfig: this.dictationConfig,\n        serverConfig: this._serverConfig,\n        debug_displayAudio: this.debug_displayAudio,\n      });\n    }\n  }\n\n  // Handle device change events if needed\n  async _onRecordingDevicesChanged(event: Event) {\n    const customEvent = event as CustomEvent;\n    this.setRecordingDevice(customEvent.detail.selectedDevice);\n  }\n\n  // Handle language change events\n  _onLanguageChanged(event: Event) {\n    const customEvent = event as CustomEvent;\n    const language = customEvent.detail.language;\n    if (language) {\n      this.setPrimaryLanguage(language);\n    }\n  }\n\n  render() {\n    if (!this._serverConfig) {\n      return html` <div style=\"display: none\"></div> `;\n    }\n\n    const isLoading =\n      this._recordingState === 'initializing' ||\n      this._recordingState === 'stopping';\n    const isRecording = this._recordingState === 'recording';\n    return html`\n      <div class=\"wrapper\">\n        <button\n          @click=${this._toggleRecording}\n          class=${isRecording ? 'red' : 'accent'}\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          <audio-visualiser\n            .level=${this._audioLevel}\n            .active=${isRecording}\n          ></audio-visualiser>\n        </button>\n\n        <settings-menu\n          .selectedDevice=${this._selectedDevice}\n          .selectedLanguage=${this.dictationConfig.primaryLanguage}\n          ?settingsDisabled=${this._recordingState !== 'stopped'}\n          @recording-devices-changed=${this._onRecordingDevicesChanged}\n          @language-changed=${this._onLanguageChanged}\n        ></settings-menu>\n      </div>\n    `;\n  }\n}\n\nexport default CortiDictation;\n"]}
+{"version":3,"file":"CortiDictation.js","sourceRoot":"","sources":["../src/CortiDictation.ts"],"names":[],"mappings":"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","sourcesContent":["import { type Corti } from '@corti/sdk';\n\n// corti-dictation.ts\nimport { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { RecorderManager } from './RecorderManager.js';\nimport './components/settings-menu.js';\nimport './components/audio-visualiser.js';\nimport './icons/icons.js';\nimport ThemeStyles from './styles/theme.js';\nimport ButtonStyles from './styles/buttons.js';\nimport ComponentStyles from './styles/ComponentStyles.js';\n\nimport type { ConfigurableSettings, RecordingState, ServerConfig } from './types.js';\nimport { DEFAULT_DICTATION_CONFIG, LANGUAGES_SUPPORTED } from './constants.js';\nimport CalloutStyles from './styles/callout.js';\nimport { decodeToken } from './utils.js';\n\nexport class CortiDictation extends LitElement {\n  static styles = [ButtonStyles, ThemeStyles, ComponentStyles, CalloutStyles];\n\n  @property({ type: Object })\n  dictationConfig: Corti.TranscribeConfig = DEFAULT_DICTATION_CONFIG;\n\n  @property({ type: Array })\n  languagesSupported: Corti.TranscribeSupportedLanguage[] = LANGUAGES_SUPPORTED;\n\n  @property({ type: Boolean })\n  debug_displayAudio: boolean = false;\n\n  @property({ type: Array })\n  settingsEnabled: ConfigurableSettings[] = [\"device\", \"language\"];\n  \n  @property({ type: Boolean })\n  preventButtonFocus: boolean = true;\n\n  @state()\n  private _serverConfig: ServerConfig | undefined;\n\n  @state()\n  private _audioLevel: number = 0;\n\n  @state()\n  private _recordingState: RecordingState = 'stopped';\n\n  @state()\n  private _selectedDevice: MediaDeviceInfo | undefined;\n\n  @state()\n  private _devices: MediaDeviceInfo[] = [];\n\n  private recorderManager = new RecorderManager();\n\n  async connectedCallback() {\n    super.connectedCallback();\n    const devices = await this.recorderManager.initialize();\n    if (devices.selectedDevice) {\n      this._selectedDevice = this.recorderManager.selectedDevice;\n      this._devices = this.recorderManager.devices;\n      this.dispatchEvent(new CustomEvent('ready'));\n    }\n\n    // Map event names to any extra handling logic\n    const eventHandlers: Record<string, (e: CustomEvent) => void> = {\n      'recording-state-changed': e => {\n        this._recordingState = e.detail.state;\n      },\n      'devices-changed': () => {\n        this._devices = [...this.recorderManager.devices];\n        this.requestUpdate();\n      },\n      'audio-level-changed': e => {\n        this._audioLevel = e.detail.audioLevel;\n        this.requestUpdate();\n      },\n    };\n\n    const eventsToRelay = [\n      'recording-state-changed',\n      'recording-devices-changed',\n      'audio-level-changed',\n      'error',\n      'transcript',\n      'command',\n      'ready',\n      'usage',\n      'stream-closed',\n    ];\n\n    eventsToRelay.forEach(eventName => {\n      this.recorderManager.addEventListener(eventName, (e: Event) => {\n        const customEvent = e as CustomEvent;\n        // Perform any additional handling if defined\n        if (eventHandlers[eventName]) {\n          eventHandlers[eventName](customEvent);\n        }\n        // Re-dispatch the event from the component\n        this.dispatchEvent(\n          new CustomEvent(eventName, {\n            detail: customEvent.detail,\n            bubbles: eventName !== 'error',\n            composed: true,\n          }),\n        );\n      });\n    });\n  }\n\n  public startRecording() {\n    if (!this._serverConfig) return;\n    this.recorderManager.startRecording({\n      dictationConfig: this.dictationConfig,\n      serverConfig: this._serverConfig!,\n      debug_displayAudio: this.debug_displayAudio,\n    });\n  }\n\n  public stopRecording() {\n    this.recorderManager.stopRecording();\n  }\n\n  public toggleRecording() {\n    if (this._recordingState === 'recording') {\n      this.stopRecording();\n    } else if (this._recordingState === 'stopped') {\n      this.startRecording();\n    }\n  }\n\n  /**\n   * Sets the access token and returns the server configuration.\n   *\n   * NOTE: We decode the token here only for backward compatibility in return values.\n   * The SDK now handles token parsing internally, so this return value should be\n   * reduced in the future to only include necessary fields.\n   */\n  public setAccessToken(token: string) {\n    try {\n      const decoded = decodeToken(token);\n      this._serverConfig = decoded;\n      return decoded;\n    } catch (e) {\n      throw new Error('Invalid token');\n    }\n  }\n\n  /**\n   * Sets the authentication configuration and returns the server configuration.\n   *\n   * NOTE: We decode tokens here only for backward compatibility in return values.\n   * The SDK now handles token parsing internally, so this return value should be\n   * reduced in the future to only include necessary fields.\n   */\n  public async setAuthConfig(\n    config: Corti.BearerOptions,\n  ): Promise<ServerConfig> {\n    try {\n      const initialToken =\n        'accessToken' in config\n          ? { accessToken: config.accessToken, refreshToken: config.refreshToken }\n          : await config.refreshAccessToken();\n\n      if (\n        !initialToken?.accessToken ||\n        typeof initialToken.accessToken !== 'string'\n      ) {\n        throw new Error('Access token is required and must be a string');\n      }\n\n      // Decode tokens only for return value compatibility\n      // The SDK handles its own token parsing internally\n      const decoded = decodeToken(initialToken.accessToken);\n\n      if (!decoded) {\n        throw new Error('Invalid token format');\n      }\n\n      this._serverConfig = {\n        environment: decoded.environment,\n        tenant: decoded.tenant,\n        accessToken: initialToken.accessToken,\n        refreshToken: config.refreshToken,\n        refreshAccessToken: async (refreshToken?: string) => {\n          try {\n            if (!config.refreshAccessToken) {\n              return {\n                accessToken: this._serverConfig?.accessToken || 'no_token',\n                expiresIn: Infinity,\n                refreshToken,\n              };\n            }\n\n            const response = await config.refreshAccessToken(refreshToken);\n\n            if (this._serverConfig) {\n              this._serverConfig.accessToken = response.accessToken;\n              this._serverConfig.refreshToken = response.refreshToken;\n            }\n\n            return response;\n          } catch (e) {\n            throw new Error('Error when refreshing access token');\n          }\n        },\n      };\n\n      return this._serverConfig;\n    } catch (e) {\n      throw new Error('Invalid config');\n    }\n  }\n\n  public get selectedDevice(): MediaDeviceInfo | null {\n    return this.recorderManager.selectedDevice || null;\n  }\n\n  public get recordingState(): RecordingState {\n    return this._recordingState;\n  }\n\n  public get devices(): MediaDeviceInfo[] {\n    return this._devices;\n  }\n\n  public async setRecordingDevice(device: MediaDeviceInfo) {\n    this.recorderManager.selectedDevice = device;\n    this._selectedDevice = device;\n    if (!this._serverConfig) return;\n    if (this._recordingState === 'recording') {\n      await this.recorderManager.stopRecording();\n      await this.recorderManager.startRecording({\n        dictationConfig: this.dictationConfig,\n        serverConfig: this._serverConfig,\n      });\n    }\n  }\n\n  public setPrimaryLanguage(language: string) {\n    if (LANGUAGES_SUPPORTED.includes(language)) {\n      this.dictationConfig = {\n        ...this.dictationConfig,\n        primaryLanguage: language,\n      };\n\n      // If recording is in progress, restart to apply the language change\n      if (this._serverConfig && this._recordingState === 'recording') {\n        this.recorderManager.stopRecording();\n        this.recorderManager.startRecording({\n          dictationConfig: this.dictationConfig,\n          serverConfig: this._serverConfig,\n          debug_displayAudio: this.debug_displayAudio,\n        });\n      }\n    }\n  }\n\n  _onButtonMouseDown(event: MouseEvent) {\n    // Prevent button from taking focus on mouse click\n    // This keeps focus on the textarea\n    if (this.preventButtonFocus) {\n      event.preventDefault();\n    }\n  }\n\n  // Handle device change events if needed\n  async _onRecordingDevicesChanged(event: Event) {\n    const customEvent = event as CustomEvent;\n    this.setRecordingDevice(customEvent.detail.selectedDevice);\n  }\n\n  // Handle language change events\n  _onLanguageChanged(event: Event) {\n    const customEvent = event as CustomEvent;\n    const language = customEvent.detail.language;\n    if (language) {\n      this.setPrimaryLanguage(language);\n    }\n  }\n\n  render() {\n    if (!this._serverConfig) {\n      return html` <div style=\"display: none\"></div> `;\n    }\n\n    const isLoading =\n      this._recordingState === 'initializing' ||\n      this._recordingState === 'stopping';\n    const isRecording = this._recordingState === 'recording';\n    return html`\n      <div class=\"wrapper\">\n        <button\n          @click=${this.toggleRecording}\n          @mousedown=${this._onButtonMouseDown}\n          class=${isRecording ? 'red' : 'accent'}\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          <audio-visualiser\n            .level=${this._audioLevel}\n            .active=${isRecording}\n          ></audio-visualiser>\n        </button>\n\n        ${this.settingsEnabled.length > 0 ? html`\n        <settings-menu\n          .selectedDevice=${this._selectedDevice}\n          .selectedLanguage=${this.dictationConfig.primaryLanguage}\n          ?settingsDisabled=${this._recordingState !== 'stopped'}\n          @recording-devices-changed=${this._onRecordingDevicesChanged}\n          @language-changed=${this._onLanguageChanged}\n          .settingsEnabled=${this.settingsEnabled}\n        ></settings-menu>\n        ` : ''}\n      </div>\n    `;\n  }\n}\n\nexport default CortiDictation;\n"]}