npm - @corti/dictation-web - Versions diffs - 0.1.4 → 0.1.6 - Mend

@corti/dictation-web 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/README.md +54 -39
package/dist/CortiDictation.d.ts +9 -4
package/dist/CortiDictation.js +58 -33
package/dist/CortiDictation.js.map +1 -1
package/dist/DictationService.js +1 -1
package/dist/DictationService.js.map +1 -1
package/dist/RecorderManager.d.ts +4 -2
package/dist/RecorderManager.js +31 -7
package/dist/RecorderManager.js.map +1 -1
package/dist/bundle.js +124 -54
package/dist/components/settings-menu.d.ts +5 -2
package/dist/components/settings-menu.js +30 -14
package/dist/components/settings-menu.js.map +1 -1
package/dist/constants.js +1 -1
package/dist/constants.js.map +1 -1
package/dist/styles/ComponentStyles.js +1 -0
package/dist/styles/ComponentStyles.js.map +1 -1
package/dist/styles/callout.js +7 -0
package/dist/styles/callout.js.map +1 -1
package/dist/utils.d.ts +1 -1
package/dist/utils.js +2 -2
package/dist/utils.js.map +1 -1
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -1,11 +1,11 @@
 # Corti Dictation SDK
 ## Overview
 The **Corti Dictation SDK** 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 SDK. The client must provide an API key or authorization token before using the component.
 ## Installation
 Include the SDK in your project by importing the JavaScript module:
@@ -14,6 +14,15 @@ Include the SDK in your project by importing the JavaScript module:
 npm i @corti/dictation-web
 ```
+Alternatively, use a CDN to start quickly (not recommended).
+```html
+<script
+  src="https://cdn.jsdelivr.net/npm/@corti/dictation-web/dist/bundle.min.js"
+  preload
+  type="module"
+></script>
+```
 ## Usage
@@ -21,74 +30,80 @@ npm i @corti/dictation-web
 🚀 [Hosted Demo](https://codepen.io/hccullen/pen/OPJmxQR)
 ### Basic Example
 ```html
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-</head>
-<body>
-  <script src="https://cdn.jsdelivr.net/npm/@corti/dictation-web/dist/index.min.js"></script>
-  <corti-dictation authToken="xyz"></corti-dictation>
-  <textarea id="transcript" placeholder="Transcript will appear here..."></textarea>
-  <script>
-    const dictationEl = document.getElementById('transcript')
-    // Listen for events
-    dictationEl.addEventListener('transcript', (e) => {
-      document.getElementById('transcript').value += e.detail.data.text + ' ';
-    });
-  </script>
-</body>
+  <body>
+    <script
+      src="https://cdn.jsdelivr.net/npm/@corti/dictation-web/dist/bundle.min.js"
+      preload
+      type="module"
+    ></script>
+    <corti-dictation></corti-dictation>
+    <textarea
+      id="transcript"
+      placeholder="Transcript will appear here..."
+    ></textarea>
+    <script>
+      const dictationEl = document.getElementById('transcript');
+      // Set properties
+      dictationEl.authToken = "abc"
+      // Listen for events
+      dictationEl.addEventListener('transcript', e => {
+        document.getElementById('transcript').value += e.detail.data.text + ' ';
+      });
+    </script>
+  </body>
 </html>
 ```
 ## API Reference
 ### Properties
-| Property         | Type    | Description |
-|-----------------|---------|-------------|
-| `devices`       | Array   | List of available recording devices. |
-| `recordingState` | String  | Current state of recording (`stopped`, `recording`). |
-| `dictationConfig` | Object | Configuration settings for dictation. |
-| `authToken`  | String  | Authentication token from OAuth server |
+| 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.                |
+| `authToken`       | String | Authentication token from OAuth server               |
 ### Methods
-| Method              | Description |
-|---------------------|-------------|
+| Method              | Description                |
+| ------------------- | -------------------------- |
 | `toggleRecording()` | Starts or stops recording. |
 ### Events
-| Event                      | Description |
-|----------------------------|-------------|
-| `recording-state-changed`  | Fired when the recording state changes. `detail.state` contains the new state. |
-| `recording-device-changed` | Fired when the user switches recording devices. `detail.deviceId` contains the new device ID. |
-| `transcript`               | Fired when a new transcript is received. `detail.data.text` contains the transcribed text. |
-| `audio-level-changed`      | Fired when the input audio level changes. `detail.audioLevel` contains the new level. |
+| 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.    |
+| `audio-level-changed`      | Fired when the input audio level changes. `detail.audioLevel` contains the new level.         |
+| `error`      | Fired on error. `detail` contains the full error.         |
 ## Authentication
 This SDK does not handle OAuth 2.0 authentication. The client must provide an API key or access token as a string in `authToken`.
 ## Notes
 - Works in modern browsers that support Web Components and MediaRecorder API.
 - Supports dark and light mode based on browser preference.
 ## License
-This SDK is not licensed.
+This SDK is not licensed.
 ## Support
-For issues or questions, contact **Corti Support** at [support@corti.ai](mailto:support@corti.ai).
+For issues or questions, contact **Corti Support** at [support@corti.ai](mailto:support@corti.ai).

package/dist/CortiDictation.d.ts CHANGED Viewed

@@ -2,19 +2,24 @@ import { LitElement } from 'lit';
 import './components/settings-menu.js';
 import './components/audio-visualiser.js';
 import './icons/icons.js';
-import type { DictationConfig } from './types.js';
+import type { DictationConfig, RecordingState } from './types.js';
 export declare class CortiDictation extends LitElement {
     static styles: import("lit").CSSResult[];
-    devices: MediaDeviceInfo[];
-    recordingState: string;
     dictationConfig: DictationConfig;
     authToken: string | undefined;
     private _audioLevel;
+    private _recordingState;
+    private _selectedDevice;
+    private _devices;
     private recorderManager;
     connectedCallback(): Promise<void>;
     toggleRecording(): void;
+    get selectedDevice(): MediaDeviceInfo | null;
+    get recordingState(): RecordingState;
+    get devices(): MediaDeviceInfo[];
+    setRecordingDevice(device: MediaDeviceInfo): Promise<void>;
     _toggleRecording(): void;
-    _onRecordingDeviceChanged(event: Event): Promise<void>;
+    _onRecordingDevicesChanged(event: Event): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default CortiDictation;

package/dist/CortiDictation.js CHANGED Viewed

@@ -19,20 +19,28 @@ import CalloutStyles from './styles/callout.js';
 export class CortiDictation extends LitElement {
     constructor() {
         super(...arguments);
-        this.devices = [];
-        this.recordingState = 'stopped';
         this.dictationConfig = DEFAULT_DICTATION_CONFIG;
         this._audioLevel = 0;
+        this._recordingState = 'stopped';
+        this._devices = [];
         this.recorderManager = new RecorderManager();
     }
     async connectedCallback() {
         super.connectedCallback();
-        await this.recorderManager.initialize();
-        this.devices = this.recorderManager.devices;
+        const devices = await this.recorderManager.initialize();
+        if (devices.selectedDevice) {
+            this._selectedDevice = this.recorderManager.selectedDevice;
+            this._devices = this.recorderManager.devices;
+            this.dispatchEvent(new CustomEvent('ready'));
+        }
         // Map event names to any extra handling logic
         const eventHandlers = {
             'recording-state-changed': e => {
-                this.recordingState = e.detail.state;
+                this._recordingState = e.detail.state;
+            },
+            'devices-changed': () => {
+                this._devices = [...this.recorderManager.devices];
+                this.requestUpdate();
             },
             'audio-level-changed': e => {
                 this._audioLevel = e.detail.audioLevel;
@@ -41,9 +49,11 @@ export class CortiDictation extends LitElement {
         };
         const eventsToRelay = [
             'recording-state-changed',
+            'recording-devices-changed',
             'audio-level-changed',
             'error',
             'transcript',
+            'ready',
         ];
         eventsToRelay.forEach(eventName => {
             this.recorderManager.addEventListener(eventName, (e) => {
@@ -64,47 +74,60 @@ export class CortiDictation extends LitElement {
     toggleRecording() {
         this._toggleRecording();
     }
-    _toggleRecording() {
+    get selectedDevice() {
+        return this.recorderManager.selectedDevice || null;
+    }
+    get recordingState() {
+        return this._recordingState;
+    }
+    get devices() {
+        return this._devices;
+    }
+    async setRecordingDevice(device) {
+        this.recorderManager.selectedDevice = device;
+        this._selectedDevice = device;
         if (!this.authToken)
             return;
-        if (this.recordingState === 'recording') {
-            this.recorderManager.stopRecording();
-        }
-        else if (this.recordingState === 'stopped') {
-            this.recorderManager.startRecording({
+        if (this._recordingState === 'recording') {
+            await this.recorderManager.stopRecording();
+            await this.recorderManager.startRecording({
                 dictationConfig: this.dictationConfig,
                 authToken: this.authToken,
             });
         }
     }
-    // Handle device change events if needed
-    async _onRecordingDeviceChanged(event) {
-        const customEvent = event;
+    _toggleRecording() {
         if (!this.authToken)
             return;
-        this.recorderManager.selectedDevice = customEvent.detail.deviceId;
-        if (this.recordingState === 'recording') {
-            await this.recorderManager.stopRecording();
-            await this.recorderManager.startRecording({
+        if (this._recordingState === 'recording') {
+            this.recorderManager.stopRecording();
+        }
+        else if (this._recordingState === 'stopped') {
+            this.recorderManager.startRecording({
                 dictationConfig: this.dictationConfig,
                 authToken: this.authToken,
             });
         }
     }
+    // Handle device change events if needed
+    async _onRecordingDevicesChanged(event) {
+        const customEvent = event;
+        this.setRecordingDevice(customEvent.detail.selectedDevice);
+    }
     render() {
         const isConfigured = this.authToken;
         if (!isConfigured) {
             return html `
         <div class="wrapper">
-          <div class="callout red tiny">
-            Please configure the server settings in the parent component.
+          <div class="callout red small">
+            No Auth Token
           </div>
         </div>
       `;
         }
-        const isLoading = this.recordingState === 'initializing' ||
-            this.recordingState === 'stopping';
-        const isRecording = this.recordingState === 'recording';
+        const isLoading = this._recordingState === 'initializing' ||
+            this._recordingState === 'stopping';
+        const isRecording = this._recordingState === 'recording';
         return html `
       <div class="wrapper">
         <button
@@ -123,22 +146,15 @@ export class CortiDictation extends LitElement {
         </button>
         <settings-menu
-          .devices=${this.devices}
-          .selectedDevice=${this.recorderManager.selectedDevice}
-          ?settingsDisabled=${this.recordingState !== 'stopped'}
-          @recording-device-changed=${this._onRecordingDeviceChanged}
+          .selectedDevice=${this._selectedDevice}
+          ?settingsDisabled=${this._recordingState !== 'stopped'}
+          @recording-devices-changed=${this._onRecordingDevicesChanged}
         ></settings-menu>
       </div>
     `;
     }
 }
 CortiDictation.styles = [ButtonStyles, ThemeStyles, ComponentStyles, CalloutStyles];
-__decorate([
-    property({ type: Array })
-], CortiDictation.prototype, "devices", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], CortiDictation.prototype, "recordingState", void 0);
 __decorate([
     property({ type: Object })
 ], CortiDictation.prototype, "dictationConfig", void 0);
@@ -148,5 +164,14 @@ __decorate([
 __decorate([
     state()
 ], CortiDictation.prototype, "_audioLevel", void 0);
+__decorate([
+    state()
+], CortiDictation.prototype, "_recordingState", void 0);
+__decorate([
+    state()
+], CortiDictation.prototype, "_selectedDevice", void 0);
+__decorate([
+    state()
+], CortiDictation.prototype, "_devices", void 0);
 export default CortiDictation;
 //# sourceMappingURL=CortiDictation.js.map

package/dist/CortiDictation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CortiDictation.js","sourceRoot":"","sources":["../src/CortiDictation.ts"],"names":[],"mappings":";;;;;;AAAA,qBAAqB;AACrB,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,+BAA+B,CAAC;AACvC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,WAAW,MAAM,mBAAmB,CAAC;AAC5C,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,eAAe,MAAM,6BAA6B,CAAC;AAG1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAEhD,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QAIE,~~YAAO~~,~~GAAsB~~,~~EAAE~~,CAAC;~~QAGhC~~,~~mBAAc~~,~~GAAG~~,~~SAAS~~,CAAC;~~QAG3B~~,oBAAe,~~GAAoB~~,~~wBAAwB~~,CAAC;~~QAMpD~~,~~gBAAW~~,~~GAAG~~,~~CAAC~~,CAAC;~~QAEhB~~,oBAAe,GAAG,IAAI,eAAe,EAAE,CAAC;~~IAoHlD~~,CAAC;~~IAlHC~~,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,MAAM,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;~~QACxC~~,IAAI,CAAC,~~OAAO~~,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC;~~QAE5C~~,8CAA8C;QAC9C,MAAM,aAAa,GAA6C;YAC9D,yBAAyB,EAAE,CAAC,CAAC,EAAE;gBAC7B,IAAI,CAAC,~~cAAc~~,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;~~YACvC~~,CAAC;YACD,qBAAqB,EAAE,CAAC,CAAC,EAAE;gBACzB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC;gBACvC,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,CAAC;SACF,CAAC;QAEF,MAAM,aAAa,GAAG;YACpB,yBAAyB;YACzB,qBAAqB;YACrB,OAAO;YACP,YAAY;~~SACb~~,CAAC;QAEF,aAAa,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;YAChC,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAQ,EAAE,EAAE;gBAC5D,MAAM,WAAW,GAAG,CAAgB,CAAC;gBACrC,6CAA6C;gBAC7C,IAAI,aAAa,CAAC,SAAS,CAAC,EAAE,CAAC;oBAC7B,aAAa,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;gBACxC,CAAC;gBACD,2CAA2C;gBAC3C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,SAAS,EAAE;oBACzB,MAAM,EAAE,WAAW,CAAC,MAAM;oBAC1B,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACf,CAAC,CACH,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,eAAe;QACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,~~gBAAgB~~;~~QACd~~,IAAI,CAAC,IAAI,CAAC,~~SAAS~~;~~YAAE~~,~~OAAO~~;~~QAC5B~~,IAAI,IAAI,CAAC,~~cAAc~~,KAAK,~~WAAW~~,~~EAAE~~,CAAC;~~YACxC~~,IAAI,CAAC,eAAe,CAAC,~~aAAa~~,~~EAAE~~,CAAC;~~QACvC~~,CAAC;~~aAAM~~,IAAI,IAAI,CAAC,~~cAAc~~,KAAK,~~SAAS~~,EAAE,CAAC;~~YAC7C~~,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC;~~gBAClC~~,eAAe,EAAE,IAAI,CAAC,eAAe;gBACrC,SAAS,EAAE,IAAI,CAAC,SAAS;aAC1B,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,~~wCAAwC~~;~~IACxC~~,~~KAAK,CAAC,yBAAyB,CAAC,KAAY;QAC1C,MAAM,WAAW,GAAG,KAAoB,CAAC;QACzC,~~IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAC5B,IAAI,CAAC,eAAe,~~CAAC~~,~~cAAc,GAAG,~~WAAW,~~CAAC~~,~~MAAM,~~CAAC~~,QAAQ,CAAC~~;~~QAClE~~,IAAI,~~IAAI,~~CAAC,~~cAAc~~,~~KAAK~~,~~WAAW~~,EAAE,CAAC;~~YACxC~~,~~MAAM~~,IAAI,CAAC,eAAe,~~CAAC~~,~~aAAa~~,EAAE,CAAC;~~YAC3C~~,~~MAAM,~~IAAI,CAAC,eAAe,CAAC,cAAc,CAAC;~~gBACxC~~,eAAe,EAAE,IAAI,CAAC,eAAe;gBACrC,SAAS,EAAE,IAAI,CAAC,SAAS;aAC1B,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC;QACpC,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAO,IAAI,CAAA;;;;;;OAMV,CAAC;QACJ,CAAC;QAED,MAAM,SAAS,GACb,IAAI,CAAC,~~cAAc~~,KAAK,cAAc;~~YACtC~~,IAAI,CAAC,~~cAAc~~,KAAK,UAAU,CAAC;~~QACrC~~,MAAM,WAAW,GAAG,IAAI,CAAC,~~cAAc~~,KAAK,WAAW,CAAC;~~QACxD~~,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,gBAAgB;kBACtB,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;;YAEpC,SAAS;YACT,CAAC,CAAC,IAAI,CAAA,+CAA+C;YACrD,CAAC,CAAC,WAAW;gBACX,CAAC,CAAC,IAAI,CAAA,mCAAmC;gBACzC,CAAC,CAAC,IAAI,CAAA,6BAA6B;;qBAE5B,IAAI,CAAC,WAAW;sBACf,WAAW;;;;;~~qBAKZ~~,IAAI,CAAC,~~OAAO~~;~~4BACL~~,IAAI,CAAC,eAAe,~~CAAC,cAAc;8BACjC,IAAI,CAAC,cAAc,~~KAAK,SAAS;~~sCACzB~~,IAAI,CAAC,~~yBAAyB~~;;;~~KAG/D~~,CAAC;IACJ,CAAC;;~~AApIM~~,qBAAM,GAAG,CAAC,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,CAAC,AAA9D,CAA+D;AAG5E;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,~~KAAK~~,EAAE,CAAC~~;+CACM~~;~~AAGhC~~;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,~~OAAO,EAAE,IAAI,EAAE,~~CAAC;~~sDACf~~;~~AAG3B~~;~~IADC~~,~~QAAQ~~,~~CAAC,~~EAAE,~~IAAI~~,EAAE~~,MAAM,EAAE,CAAC~~;~~uDACiC~~;~~AAG5D~~;~~IADC~~,~~QAAQ~~,~~CAAC,~~EAAE~~,IAAI,EAAE,MAAM,EAAE,CAAC~~;~~iDACG~~;~~AAGtB~~;IADP,KAAK,EAAE;~~mDACgB~~;~~AAwH1B~~,eAAe,cAAc,CAAC","sourcesContent":["// 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 { DictationConfig } from './types.js';\nimport { DEFAULT_DICTATION_CONFIG } from './constants.js';\nimport CalloutStyles from './styles/callout.js';\n\nexport class CortiDictation extends LitElement {\n static styles = [ButtonStyles, ThemeStyles, ComponentStyles, CalloutStyles];\n\n @property({ type: ~~Array~~ })\n ~~devices~~: ~~MediaDeviceInfo[]~~ = [];\n\n @property({ type: String, ~~reflect: true~~ })\n ~~recordingState~~ = ~~'stopped'~~;\n\n @~~property~~({ ~~type~~: ~~Object~~ })\n ~~dictationConfig~~: ~~DictationConfig~~ = ~~DEFAULT_DICTATION_CONFIG~~;\n\n @~~property~~(~~{ type: String }~~)\n ~~authToken~~: ~~string~~ \| undefined;\n\n @state()\n private ~~_audioLevel~~ = 0;\n\n private recorderManager = new RecorderManager();\n\n async connectedCallback() {\n super.connectedCallback();\n await this.recorderManager.initialize();\n this.~~devices~~ = this.recorderManager.devices;\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 'audio-level-changed': e => {\n this._audioLevel = e.detail.audioLevel;\n this.requestUpdate();\n },\n };\n\n const eventsToRelay = [\n 'recording-state-changed',\n 'audio-level-changed',\n 'error',\n 'transcript',\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: true,\n composed: true,\n }),\n );\n });\n });\n }\n\n public toggleRecording() {\n this._toggleRecording();\n }\n\n ~~_toggleRecording~~() {\n if (!this.~~authToken~~) 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 authToken: this.authToken,\n });\n }\n }\n\n ~~// Handle device change events if needed\n async _onRecordingDeviceChanged~~(~~event: Event~~) {\n ~~const customEvent = event as CustomEvent;\n~~ if (!this.authToken) return;\n ~~this.recorderManager.selectedDevice = customEvent.detail.deviceId;\n~~ if (this.~~recordingState~~ === 'recording') {\n ~~await~~ this.recorderManager.stopRecording();\n ~~await~~ this.recorderManager.startRecording({\n dictationConfig: this.dictationConfig,\n authToken: this.authToken,\n });\n }\n }\n\n render() {\n const isConfigured = this.authToken;\n if (!isConfigured) {\n return html`\n <div class=\"wrapper\">\n <div class=\"callout red ~~tiny~~\">\n ~~Please~~ ~~configure~~ ~~the server settings in the parent component.\~~n </div>\n </div>\n `;\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 .~~devices=${this.devices}\n .~~selectedDevice=${this.~~recorderManager.selectedDevice~~}\n ?settingsDisabled=${this.~~recordingState~~ !== 'stopped'}\n @recording-~~device~~-changed=${this.~~_onRecordingDeviceChanged~~}\n ></settings-menu>\n </div>\n `;\n }\n}\n\nexport default CortiDictation;\n"]}
1	+ {"version":3,"file":"CortiDictation.js","sourceRoot":"","sources":["../src/CortiDictation.ts"],"names":[],"mappings":"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","sourcesContent":["// 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 { DictationConfig, RecordingState } from './types.js';\nimport { DEFAULT_DICTATION_CONFIG } from './constants.js';\nimport CalloutStyles from './styles/callout.js';\n\nexport class CortiDictation extends LitElement {\n static styles = [ButtonStyles, ThemeStyles, ComponentStyles, CalloutStyles];\n\n @property({ type: Object })\n dictationConfig: DictationConfig = DEFAULT_DICTATION_CONFIG;\n \n @property({ type: String })\n authToken: string \| 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\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 'ready',\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: true,\n composed: true,\n }),\n );\n });\n });\n }\n\n public toggleRecording() {\n this._toggleRecording();\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.authToken) return;\n if (this._recordingState === 'recording') {\n await this.recorderManager.stopRecording();\n await this.recorderManager.startRecording({\n dictationConfig: this.dictationConfig,\n authToken: this.authToken,\n });\n }\n }\n\n _toggleRecording() {\n if (!this.authToken) 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 authToken: this.authToken,\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 render() {\n const isConfigured = this.authToken;\n if (!isConfigured) {\n return html`\n <div class=\"wrapper\">\n <div class=\"callout red small\">\n No Auth Token\n </div>\n </div>\n `;\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 ?settingsDisabled=${this._recordingState !== 'stopped'}\n @recording-devices-changed=${this._onRecordingDevicesChanged}\n ></settings-menu>\n </div>\n `;\n }\n}\n\nexport default CortiDictation;\n"]}

package/dist/DictationService.js CHANGED Viewed

@@ -35,7 +35,7 @@ export class DictationService extends EventTarget {
         };
         this.webSocket.onmessage = event => {
             const message = JSON.parse(event.data);
-            if (message.type === 'config') {
+            if (message.type === 'CONFIG_ACCEPTED') {
                 this.mediaRecorder.start(250);
             }
             else if (message.type === 'transcript') {

package/dist/DictationService.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DictationService.js","sourceRoot":"","sources":["../src/DictationService.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,MAAM,OAAO,gBAAiB,SAAQ,WAAW;IAO/C,YACE,WAAwB,EACxB,EACE,eAAe,EACf,SAAS,GAC+C;QAE1D,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,aAAa,GAAG,IAAI,aAAa,CAAC,WAAW,CAAC,CAAC;QACpD,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;QAEvC,oCAAoC;QACpC,MAAM,MAAM,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC3C,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC,CAAC;QACnC,CAAC;QACD,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAE3B,IAAI,CAAC,aAAa,CAAC,eAAe,GAAG,KAAK,CAAC,EAAE;YAC3C,IAAI,IAAI,CAAC,SAAS,EAAE,UAAU,KAAK,SAAS,CAAC,IAAI,EAAE,CAAC;gBAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YAClC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;IAEO,mBAAmB,CAAC,SAAiB,EAAE,MAAe;QAC5D,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,SAAS,EAAE;YACzB,MAAM;YACN,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEM,cAAc;QACnB,MAAM,GAAG,GAAG,aAAa,IAAI,CAAC,YAAY,CAAC,WAAW,qDAAqD,IAAI,CAAC,YAAY,CAAC,MAAM,mBAAmB,IAAI,CAAC,SAAS,EAAE,CAAC;QACvK,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC;QAEpC,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CACjB,IAAI,CAAC,SAAS,CAAC;gBACb,IAAI,EAAE,QAAQ;gBACd,aAAa,EAAE,IAAI,CAAC,eAAe;aACpC,CAAC,CACH,CAAC;QACJ,CAAC,CAAC;QAEF,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,KAAK,CAAC,EAAE;YACjC,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACvC,IAAI,OAAO,CAAC,IAAI,KAAK,~~QAAQ~~,EAAE,CAAC;~~gBAC9B~~,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAChC,CAAC;iBAAM,IAAI,OAAO,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;gBACzC,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;YAClD,CAAC;QACH,CAAC,CAAC;QAEF,IAAI,CAAC,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC,EAAE;YAC/B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAC3C,CAAC,CAAC;QAEF,IAAI,CAAC,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC,EAAE;YAC/B,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;QACnD,CAAC,CAAC;IACJ,CAAC;IAEM,KAAK,CAAC,aAAa;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAE1B,IAAI,IAAI,CAAC,SAAS,EAAE,UAAU,KAAK,SAAS,CAAC,IAAI,EAAE,CAAC;YAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACvD,CAAC;QAED,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC9B,IAAI,IAAI,CAAC,SAAS,EAAE,UAAU,KAAK,SAAS,CAAC,IAAI,EAAE,CAAC;gBAClD,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;YACzB,CAAC;QACH,CAAC,EAAE,KAAK,CAAC,CAAC;QAEV,IAAI,CAAC,SAAS,CAAC,OAAO,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;YACxB,YAAY,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { DictationConfig, ServerConfig } from './types.js';\nimport { decodeToken } from './utils.js';\n\nexport class DictationService extends EventTarget {\n private mediaRecorder: MediaRecorder;\n private webSocket!: WebSocket;\n private authToken: string;\n private dictationConfig: DictationConfig;\n private serverConfig: ServerConfig;\n\n constructor(\n mediaStream: MediaStream,\n {\n dictationConfig,\n authToken,\n }: { dictationConfig: DictationConfig; authToken: string },\n ) {\n super();\n this.mediaRecorder = new MediaRecorder(mediaStream);\n this.authToken = authToken;\n this.dictationConfig = dictationConfig;\n\n // Decode token during construction.\n const config = decodeToken(this.authToken);\n if (!config) {\n throw new Error('Invalid token');\n }\n this.serverConfig = config;\n\n this.mediaRecorder.ondataavailable = event => {\n if (this.webSocket?.readyState === WebSocket.OPEN) {\n this.webSocket.send(event.data);\n }\n };\n }\n\n private dispatchCustomEvent(eventName: string, detail: unknown): void {\n this.dispatchEvent(\n new CustomEvent(eventName, {\n detail,\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n public startRecording(): void {\n const url = `wss://api.${this.serverConfig.environment}.corti.app/audio-bridge/v2/transcribe?tenant-name=${this.serverConfig.tenant}&token=Bearer%20${this.authToken}`;\n this.webSocket = new WebSocket(url);\n\n this.webSocket.onopen = () => {\n this.webSocket.send(\n JSON.stringify({\n type: 'config',\n configuration: this.dictationConfig,\n }),\n );\n };\n\n this.webSocket.onmessage = event => {\n const message = JSON.parse(event.data);\n if (message.type === '~~config~~') {\n this.mediaRecorder.start(250);\n } else if (message.type === 'transcript') {\n this.dispatchCustomEvent('transcript', message);\n }\n };\n\n this.webSocket.onerror = event => {\n this.dispatchCustomEvent('error', event);\n };\n\n this.webSocket.onclose = event => {\n this.dispatchCustomEvent('stream-closed', event);\n };\n }\n\n public async stopRecording(): Promise<void> {\n this.mediaRecorder.stop();\n\n if (this.webSocket?.readyState === WebSocket.OPEN) {\n this.webSocket.send(JSON.stringify({ type: 'end' }));\n }\n\n const timeout = setTimeout(() => {\n if (this.webSocket?.readyState === WebSocket.OPEN) {\n this.webSocket.close();\n }\n }, 10000);\n\n this.webSocket.onclose = () => {\n this.webSocket?.close();\n clearTimeout(timeout);\n };\n }\n}\n"]}
1	+ {"version":3,"file":"DictationService.js","sourceRoot":"","sources":["../src/DictationService.ts"],"names":[],"mappings":"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","sourcesContent":["import type { DictationConfig, ServerConfig } from './types.js';\nimport { decodeToken } from './utils.js';\n\nexport class DictationService extends EventTarget {\n private mediaRecorder: MediaRecorder;\n private webSocket!: WebSocket;\n private authToken: string;\n private dictationConfig: DictationConfig;\n private serverConfig: ServerConfig;\n\n constructor(\n mediaStream: MediaStream,\n {\n dictationConfig,\n authToken,\n }: { dictationConfig: DictationConfig; authToken: string },\n ) {\n super();\n this.mediaRecorder = new MediaRecorder(mediaStream);\n this.authToken = authToken;\n this.dictationConfig = dictationConfig;\n\n // Decode token during construction.\n const config = decodeToken(this.authToken);\n if (!config) {\n throw new Error('Invalid token');\n }\n this.serverConfig = config;\n\n this.mediaRecorder.ondataavailable = event => {\n if (this.webSocket?.readyState === WebSocket.OPEN) {\n this.webSocket.send(event.data);\n }\n };\n }\n\n private dispatchCustomEvent(eventName: string, detail: unknown): void {\n this.dispatchEvent(\n new CustomEvent(eventName, {\n detail,\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n public startRecording(): void {\n const url = `wss://api.${this.serverConfig.environment}.corti.app/audio-bridge/v2/transcribe?tenant-name=${this.serverConfig.tenant}&token=Bearer%20${this.authToken}`;\n this.webSocket = new WebSocket(url);\n\n this.webSocket.onopen = () => {\n this.webSocket.send(\n JSON.stringify({\n type: 'config',\n configuration: this.dictationConfig,\n }),\n );\n };\n\n this.webSocket.onmessage = event => {\n const message = JSON.parse(event.data);\n if (message.type === 'CONFIG_ACCEPTED') {\n this.mediaRecorder.start(250);\n } else if (message.type === 'transcript') {\n this.dispatchCustomEvent('transcript', message);\n }\n };\n\n this.webSocket.onerror = event => {\n this.dispatchCustomEvent('error', event);\n };\n\n this.webSocket.onclose = event => {\n this.dispatchCustomEvent('stream-closed', event);\n };\n }\n\n public async stopRecording(): Promise<void> {\n this.mediaRecorder.stop();\n\n if (this.webSocket?.readyState === WebSocket.OPEN) {\n this.webSocket.send(JSON.stringify({ type: 'end' }));\n }\n\n const timeout = setTimeout(() => {\n if (this.webSocket?.readyState === WebSocket.OPEN) {\n this.webSocket.close();\n }\n }, 10000);\n\n this.webSocket.onclose = () => {\n this.webSocket?.close();\n clearTimeout(timeout);\n };\n }\n}\n"]}

package/dist/RecorderManager.d.ts CHANGED Viewed

@@ -1,17 +1,19 @@
 import type { DictationConfig, RecordingState } from './types.js';
 export declare class RecorderManager extends EventTarget {
     devices: MediaDeviceInfo[];
-    selectedDevice: string;
+    selectedDevice: MediaDeviceInfo | undefined;
     recordingState: RecordingState;
     private _mediaStream;
     private _audioService;
     private _dictationService;
     private _visualiserInterval?;
+    constructor();
     initialize(): Promise<{
         devices: MediaDeviceInfo[];
-        defaultDeviceId?: string;
+        selectedDevice: MediaDeviceInfo | undefined;
     }>;
     private dispatchCustomEvent;
+    private handleDevicesChange;
     startRecording(params: {
         dictationConfig: DictationConfig;
         authToken: string;

package/dist/RecorderManager.js CHANGED Viewed

@@ -3,19 +3,19 @@ import { AudioService } from './audioService.js';
 import { DictationService } from './DictationService.js';
 export class RecorderManager extends EventTarget {
     constructor() {
-        super(...arguments);
+        super();
         this.devices = [];
-        this.selectedDevice = '';
         this.recordingState = 'stopped';
         this._mediaStream = null;
         this._audioService = null;
         this._dictationService = null;
+        navigator.mediaDevices.addEventListener('devicechange', this.handleDevicesChange.bind(this));
     }
     async initialize() {
         const deviceResponse = await getAudioDevices();
         this.devices = deviceResponse.devices;
-        this.selectedDevice = deviceResponse.defaultDeviceId || '';
-        return deviceResponse;
+        this.selectedDevice = deviceResponse.defaultDevice;
+        return { devices: this.devices, selectedDevice: this.selectedDevice };
     }
     dispatchCustomEvent(eventName, detail) {
         this.dispatchEvent(new CustomEvent(eventName, {
@@ -24,12 +24,35 @@ export class RecorderManager extends EventTarget {
             composed: true,
         }));
     }
+    async handleDevicesChange() {
+        const deviceResponse = await getAudioDevices();
+        this.devices = deviceResponse.devices;
+        if (!this.devices.find(device => device.deviceId === this.selectedDevice?.deviceId)) {
+            this.selectedDevice = deviceResponse.defaultDevice;
+        }
+        this.dispatchCustomEvent('recording-devices-changed', {
+            devices: deviceResponse.devices,
+            selectedDevice: this.selectedDevice || deviceResponse.defaultDevice,
+        });
+    }
     async startRecording(params) {
         this._updateRecordingState('initializing');
-        // Get media stream and initialize audio service.
+        // Choose constraints based on whether the selected device is "default".
+        const constraints = this.selectedDevice?.deviceId === 'default'
+            ? { audio: true }
+            : { audio: { deviceId: this.selectedDevice?.deviceId } };
         try {
-            this._mediaStream = await navigator.mediaDevices.getUserMedia({
-                audio: { deviceId: this.selectedDevice },
+            this._mediaStream =
+                await navigator.mediaDevices.getUserMedia(constraints);
+            this._mediaStream.getTracks().forEach((track) => {
+                track.addEventListener('ended', () => {
+                    if (this.recordingState === 'recording') {
+                        this.dispatchCustomEvent('error', {
+                            message: 'Microphone access was lost.',
+                        });
+                        this.stopRecording();
+                    }
+                });
             });
             this._audioService = new AudioService(this._mediaStream);
         }
@@ -71,6 +94,7 @@ export class RecorderManager extends EventTarget {
             this._mediaStream.getTracks().forEach(track => track.stop());
             this._mediaStream = null;
         }
+        this.dispatchCustomEvent('audio-level-changed', { audioLevel: 0 });
         await this._dictationService?.stopRecording();
         this._updateRecordingState('stopped');
     }

package/dist/RecorderManager.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RecorderManager.js","sourceRoot":"","sources":["../src/RecorderManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGzD,MAAM,OAAO,eAAgB,SAAQ,WAAW;~~IAAhD;;QACS~~,~~YAAO~~,~~GAAsB,~~EAAE,CAAC;~~QAEhC~~,~~mBAAc~~,~~GAAW~~,EAAE,CAAC;~~QAE5B~~,mBAAc,GAAmB,SAAS,CAAC;QAE1C,iBAAY,GAAuB,IAAI,CAAC;QAExC,kBAAa,GAAwB,IAAI,CAAC;QAE1C,sBAAiB,GAA4B,IAAI,CAAC;~~IA8F5D~~,CAAC;~~IA1FC~~,KAAK,CAAC,UAAU;QACd,MAAM,cAAc,GAAG,MAAM,eAAe,EAAE,CAAC;QAC/C,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC;QACtC,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC,~~eAAe~~,~~IAAI~~,EAAE,CAAC~~;QAC3D~~,OAAO,cAAc,CAAC;~~IACxB~~,CAAC;~~IACO~~,mBAAmB,CAAC,SAAiB,EAAE,~~MAAe~~;~~QAC5D~~,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,SAAS,EAAE;YACzB,MAAM;YACN,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,KAAK,CAAC,cAAc,CAAC,MAGpB;QACC,IAAI,CAAC,qBAAqB,CAAC,cAAc,CAAC,CAAC;QAE3C,~~iDAAiD~~;~~QACjD~~,IAAI,CAAC;YACH,IAAI,CAAC,YAAY,~~GAAG,~~MAAM,SAAS,CAAC,YAAY,CAAC,YAAY,CAAC;~~gBAC5D~~,~~KAAK~~,EAAE,EAAE,~~QAAQ~~,EAAE,IAAI,CAAC,cAAc,EAAE;~~aACzC~~,CAAC,CAAC;YACH,IAAI,CAAC,aAAa,GAAG,IAAI,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC3D,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YACzC,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,CAAC;YACtC,OAAO;QACT,CAAC;QAED,gCAAgC;QAChC,IAAI,CAAC;YACH,IAAI,CAAC,iBAAiB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;QAC3E,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YACzC,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,oCAAoC;QACpC,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CACnD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAG,CAAiB,CAAC,MAAM,CAAC,CAC7D,CAAC;QACF,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE,CAC5D,IAAI,CAAC,aAAa,EAAE,CACrB,CAAC;QACF,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAC,EAAE,CACxD,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAG,CAAiB,CAAC,MAAM,CAAC,CAClE,CAAC;QAEF,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,CAAC;QACxC,IAAI,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC;QAExC,oCAAoC;QACpC,IAAI,CAAC,mBAAmB,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE;YACjD,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa;gBAC9B,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,EAAE,GAAG,CAAC;gBACxC,CAAC,CAAC,CAAC,CAAC;YACN,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC;QACzE,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAED,KAAK,CAAC,aAAa;QACjB,IAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;QACvC,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7B,aAAa,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;YACxC,IAAI,CAAC,mBAAmB,GAAG,SAAS,CAAC;QACvC,CAAC;QACD,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;YAC7D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;QACD,MAAM,IAAI,CAAC,iBAAiB,EAAE,aAAa,EAAE,CAAC;QAC9C,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC;IAEO,qBAAqB,CAAC,KAAqB;QACjD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,yBAAyB,EAAE;YACzC,MAAM,EAAE,EAAE,KAAK,EAAE;YACjB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { getAudioDevices } from './utils.js';\nimport { AudioService } from './audioService.js';\nimport { DictationService } from './DictationService.js';\nimport type { DictationConfig, RecordingState } from './types.js';\n\nexport class RecorderManager extends EventTarget {\n public devices: MediaDeviceInfo[] = [];\n\n public selectedDevice: ~~string~~ = '';\n\n public recordingState: RecordingState = 'stopped';\n\n private _mediaStream: MediaStream \| null = null;\n\n private _audioService: AudioService \| null = null;\n\n private _dictationService: DictationService \| null = null;\n\n private _visualiserInterval?: number;\n\n async initialize() {\n const deviceResponse = await getAudioDevices();\n this.devices = deviceResponse.devices;\n this.selectedDevice = deviceResponse.~~defaultDeviceId \|\| ''~~;\n return ~~deviceResponse~~;\n }\n private dispatchCustomEvent(eventName: string, detail: unknown): void {\n this.dispatchEvent(\n new CustomEvent(eventName, {\n detail,\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n async startRecording(params: {\n dictationConfig: DictationConfig;\n authToken: string;\n }): Promise<void> {\n this._updateRecordingState('initializing');\n\n // ~~Get~~ ~~media~~ ~~stream~~ ~~and~~ ~~initialize~~ ~~audio~~ ~~service~~.\n try {\n this._mediaStream = await navigator.mediaDevices.getUserMedia({\n ~~audio:~~ { ~~deviceId:~~ this.~~selectedDevice~~ },\n });\n this._audioService = new AudioService(this._mediaStream);\n } catch (error) {\n this.dispatchCustomEvent('error', error);\n this._updateRecordingState('stopped');\n return;\n }\n\n // Initialize dictation service.\n try {\n this._dictationService = new DictationService(this._mediaStream, params);\n } catch (error) {\n this.dispatchCustomEvent('error', error);\n this.stopRecording();\n return;\n }\n\n // Forward dictation service events.\n this._dictationService.addEventListener('error', e =>\n this.dispatchCustomEvent('error', (e as CustomEvent).detail),\n );\n this._dictationService.addEventListener('stream-closed', () =>\n this.stopRecording(),\n );\n this._dictationService.addEventListener('transcript', e =>\n this.dispatchCustomEvent('transcript', (e as CustomEvent).detail),\n );\n\n this._dictationService.startRecording();\n this._updateRecordingState('recording');\n\n // Update audio level visualization.\n this._visualiserInterval = window.setInterval(() => {\n const level = this._audioService\n ? this._audioService.getAudioLevel() * 3\n : 0;\n this.dispatchCustomEvent('audio-level-changed', { audioLevel: level });\n }, 150);\n }\n\n async stopRecording() {\n this._updateRecordingState('stopping');\n if (this._visualiserInterval) {\n clearInterval(this._visualiserInterval);\n this._visualiserInterval = undefined;\n }\n if (this._mediaStream) {\n this._mediaStream.getTracks().forEach(track => track.stop());\n this._mediaStream = null;\n }\n await this._dictationService?.stopRecording();\n this._updateRecordingState('stopped');\n }\n\n private _updateRecordingState(state: RecordingState) {\n this.recordingState = state;\n this.dispatchEvent(\n new CustomEvent('recording-state-changed', {\n detail: { state },\n bubbles: true,\n composed: true,\n }),\n );\n }\n}\n"]}
1	+ {"version":3,"file":"RecorderManager.js","sourceRoot":"","sources":["../src/RecorderManager.ts"],"names":[],"mappings":"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","sourcesContent":["import { getAudioDevices } from './utils.js';\nimport { AudioService } from './audioService.js';\nimport { DictationService } from './DictationService.js';\nimport type { DictationConfig, RecordingState } from './types.js';\n\nexport class RecorderManager extends EventTarget {\n public devices: MediaDeviceInfo[] = [];\n\n public selectedDevice: MediaDeviceInfo \| undefined;\n\n public recordingState: RecordingState = 'stopped';\n\n private _mediaStream: MediaStream \| null = null;\n\n private _audioService: AudioService \| null = null;\n\n private _dictationService: DictationService \| null = null;\n\n private _visualiserInterval?: number;\n\n constructor() {\n super();\n navigator.mediaDevices.addEventListener(\n 'devicechange',\n this.handleDevicesChange.bind(this),\n );\n }\n\n async initialize() {\n const deviceResponse = await getAudioDevices();\n this.devices = deviceResponse.devices;\n this.selectedDevice = deviceResponse.defaultDevice;\n return { devices: this.devices, selectedDevice: this.selectedDevice };\n }\n\n private dispatchCustomEvent(eventName: string, detail?: unknown): void {\n this.dispatchEvent(\n new CustomEvent(eventName, {\n detail,\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private async handleDevicesChange() {\n const deviceResponse = await getAudioDevices();\n this.devices = deviceResponse.devices;\n if (\n !this.devices.find(\n device => device.deviceId === this.selectedDevice?.deviceId,\n )\n ) {\n this.selectedDevice = deviceResponse.defaultDevice;\n }\n this.dispatchCustomEvent('recording-devices-changed', {\n devices: deviceResponse.devices,\n selectedDevice: this.selectedDevice \|\| deviceResponse.defaultDevice,\n });\n }\n\n async startRecording(params: {\n dictationConfig: DictationConfig;\n authToken: string;\n }): Promise<void> {\n this._updateRecordingState('initializing');\n\n // Choose constraints based on whether the selected device is \"default\".\n const constraints =\n this.selectedDevice?.deviceId === 'default'\n ? { audio: true }\n : { audio: { deviceId: this.selectedDevice?.deviceId } };\n\n try {\n this._mediaStream =\n await navigator.mediaDevices.getUserMedia(constraints);\n this._mediaStream.getTracks().forEach((track: MediaStreamTrack) => {\n track.addEventListener('ended', () => {\n if (this.recordingState === 'recording') {\n this.dispatchCustomEvent('error', {\n message: 'Microphone access was lost.',\n });\n this.stopRecording();\n }\n });\n });\n this._audioService = new AudioService(this._mediaStream);\n } catch (error) {\n this.dispatchCustomEvent('error', error);\n this._updateRecordingState('stopped');\n return;\n }\n\n // Initialize dictation service.\n try {\n this._dictationService = new DictationService(this._mediaStream, params);\n } catch (error) {\n this.dispatchCustomEvent('error', error);\n this.stopRecording();\n return;\n }\n\n // Forward dictation service events.\n this._dictationService.addEventListener('error', e =>\n this.dispatchCustomEvent('error', (e as CustomEvent).detail),\n );\n this._dictationService.addEventListener('stream-closed', () =>\n this.stopRecording(),\n );\n this._dictationService.addEventListener('transcript', e =>\n this.dispatchCustomEvent('transcript', (e as CustomEvent).detail),\n );\n\n this._dictationService.startRecording();\n this._updateRecordingState('recording');\n\n // Update audio level visualization.\n this._visualiserInterval = window.setInterval(() => {\n const level = this._audioService\n ? this._audioService.getAudioLevel() * 3\n : 0;\n this.dispatchCustomEvent('audio-level-changed', { audioLevel: level });\n }, 150);\n }\n\n async stopRecording() {\n this._updateRecordingState('stopping');\n if (this._visualiserInterval) {\n clearInterval(this._visualiserInterval);\n this._visualiserInterval = undefined;\n }\n if (this._mediaStream) {\n this._mediaStream.getTracks().forEach(track => track.stop());\n this._mediaStream = null;\n }\n this.dispatchCustomEvent('audio-level-changed', { audioLevel: 0 });\n await this._dictationService?.stopRecording();\n this._updateRecordingState('stopped');\n }\n\n private _updateRecordingState(state: RecordingState) {\n this.recordingState = state;\n this.dispatchEvent(\n new CustomEvent('recording-state-changed', {\n detail: { state },\n bubbles: true,\n composed: true,\n }),\n );\n }\n}\n"]}

package/dist/bundle.js CHANGED Viewed

@@ -623,8 +623,8 @@ async function getAudioDevices() {
   try {
     const devices = await navigator.mediaDevices.enumerateDevices();
     const audioDevices = devices.filter((device) => device.kind === "audioinput");
-    const defaultDeviceId = audioDevices.length > 0 ? audioDevices[0].deviceId : void 0;
-    return { devices: audioDevices, defaultDeviceId };
+    const defaultDevice = audioDevices.length > 0 ? audioDevices[0] : void 0;
+    return { devices: audioDevices, defaultDevice };
   } catch (error) {
     console.error("Error enumerating devices:", error);
     return { devices: [] };
@@ -722,7 +722,7 @@ var DictationService = class extends EventTarget {
     };
     this.webSocket.onmessage = (event) => {
       const message = JSON.parse(event.data);
-      if (message.type === "config") {
+      if (message.type === "CONFIG_ACCEPTED") {
         this.mediaRecorder.start(250);
       } else if (message.type === "transcript") {
         this.dispatchCustomEvent("transcript", message);
@@ -755,19 +755,19 @@ var DictationService = class extends EventTarget {
 // dist/RecorderManager.js
 var RecorderManager = class extends EventTarget {
   constructor() {
-    super(...arguments);
+    super();
     this.devices = [];
-    this.selectedDevice = "";
     this.recordingState = "stopped";
     this._mediaStream = null;
     this._audioService = null;
     this._dictationService = null;
+    navigator.mediaDevices.addEventListener("devicechange", this.handleDevicesChange.bind(this));
   }
   async initialize() {
     const deviceResponse = await getAudioDevices();
     this.devices = deviceResponse.devices;
-    this.selectedDevice = deviceResponse.defaultDeviceId || "";
-    return deviceResponse;
+    this.selectedDevice = deviceResponse.defaultDevice;
+    return { devices: this.devices, selectedDevice: this.selectedDevice };
   }
   dispatchCustomEvent(eventName, detail) {
     this.dispatchEvent(new CustomEvent(eventName, {
@@ -776,11 +776,31 @@ var RecorderManager = class extends EventTarget {
       composed: true
     }));
   }
+  async handleDevicesChange() {
+    const deviceResponse = await getAudioDevices();
+    this.devices = deviceResponse.devices;
+    if (!this.devices.find((device) => device.deviceId === this.selectedDevice?.deviceId)) {
+      this.selectedDevice = deviceResponse.defaultDevice;
+    }
+    this.dispatchCustomEvent("recording-devices-changed", {
+      devices: deviceResponse.devices,
+      selectedDevice: this.selectedDevice || deviceResponse.defaultDevice
+    });
+  }
   async startRecording(params) {
     this._updateRecordingState("initializing");
+    const constraints = this.selectedDevice?.deviceId === "default" ? { audio: true } : { audio: { deviceId: this.selectedDevice?.deviceId } };
     try {
-      this._mediaStream = await navigator.mediaDevices.getUserMedia({
-        audio: { deviceId: this.selectedDevice }
+      this._mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
+      this._mediaStream.getTracks().forEach((track) => {
+        track.addEventListener("ended", () => {
+          if (this.recordingState === "recording") {
+            this.dispatchCustomEvent("error", {
+              message: "Microphone access was lost."
+            });
+            this.stopRecording();
+          }
+        });
       });
       this._audioService = new AudioService(this._mediaStream);
     } catch (error) {
@@ -815,6 +835,7 @@ var RecorderManager = class extends EventTarget {
       this._mediaStream.getTracks().forEach((track) => track.stop());
       this._mediaStream = null;
     }
+    this.dispatchCustomEvent("audio-level-changed", { audioLevel: 0 });
     await this._dictationService?.stopRecording();
     this._updateRecordingState("stopped");
   }
@@ -928,7 +949,7 @@ var DEFAULT_DICTATION_CONFIG = {
   primaryLanguage: "en",
   interimResults: true,
   spokenPunctuation: true,
-  automaticPunctuation: true,
+  automaticPunctuation: false,
   model: "others"
 };
@@ -944,6 +965,8 @@ var CalloutStyles = i`
     font-size: 0.9rem;
     gap: 8px;
     align-items: flex-start;
+    max-width: 100%;
+    height: fit-content;
     &.red {
       background: var(--callout-red-background);
       border: 1px solid var(--callout-red-border);
@@ -954,6 +977,11 @@ var CalloutStyles = i`
       border: 1px solid var(--callout-orange-border);
       color: var(--callout-orange-text);
     }
+    &.small {
+      width: 100%;
+      padding: 6px;
+      font-size: 0.7rem;
+    }
   }
 `;
 var callout_default = CalloutStyles;
@@ -967,17 +995,33 @@ var __decorate = function(decorators, target, key, desc) {
 };
 var SettingsMenu = class SettingsMenu2 extends r4 {
   constructor() {
-    super(...arguments);
-    this.devices = [];
-    this.selectedDevice = "";
+    super();
     this.selectedLanguage = "";
     this.settingsDisabled = false;
+    this._devices = [];
+    navigator.mediaDevices.addEventListener("devicechange", this.handleDevicesChange.bind(this));
+  }
+  // on load, get the available devices
+  async connectedCallback() {
+    super.connectedCallback();
+    const deviceResponse = await getAudioDevices();
+    this._devices = deviceResponse.devices;
+  }
+  async handleDevicesChange() {
+    const deviceResponse = await getAudioDevices();
+    this._devices = deviceResponse.devices;
   }
   _selectDevice(deviceId) {
-    this.selectedDevice = deviceId;
-    const device = this.devices.find((d3) => d3.deviceId === deviceId);
-    this.dispatchEvent(new CustomEvent("recording-device-changed", {
-      detail: device,
+    const device = this._devices.find((d3) => d3.deviceId === deviceId);
+    if (!device) {
+      return;
+    }
+    this.selectedDevice = device;
+    this.dispatchEvent(new CustomEvent("recording-devices-changed", {
+      detail: {
+        devices: this._devices,
+        selectedDevice: device
+      },
       bubbles: true,
       composed: true
     }));
@@ -1007,10 +1051,10 @@ var SettingsMenu = class SettingsMenu2 extends r4 {
     }}
                 ?disabled=${this.settingsDisabled}
               >
-                ${this.devices.map((device) => x`
+                ${this._devices.map((device) => x`
                     <option
                       value=${device.deviceId}
-                      ?selected=${this.selectedDevice === device.deviceId}
+                      ?selected=${this.selectedDevice === device}
                     >
                       ${device.label || "Unknown Device"}
                     </option>
@@ -1084,9 +1128,6 @@ SettingsMenu.styles = [
   select_default,
   callout_default
 ];
-__decorate([
-  n4({ type: Array })
-], SettingsMenu.prototype, "devices", void 0);
 __decorate([
   n4({ type: String })
 ], SettingsMenu.prototype, "selectedDevice", void 0);
@@ -1096,6 +1137,9 @@ __decorate([
 __decorate([
   n4({ type: Boolean })
 ], SettingsMenu.prototype, "settingsDisabled", void 0);
+__decorate([
+  r6()
+], SettingsMenu.prototype, "_devices", void 0);
 SettingsMenu = __decorate([
   t3("settings-menu")
 ], SettingsMenu);
@@ -1399,6 +1443,7 @@ var ComponentStyles = i`
     width: min-content;
     gap: 4px;
     height: 46px;
+    width: 98px;
     box-sizing: border-box;
     overflow: hidden;
   }
@@ -1449,19 +1494,27 @@ var __decorate4 = function(decorators, target, key, desc) {
 var CortiDictation = class extends r4 {
   constructor() {
     super(...arguments);
-    this.devices = [];
-    this.recordingState = "stopped";
     this.dictationConfig = DEFAULT_DICTATION_CONFIG;
     this._audioLevel = 0;
+    this._recordingState = "stopped";
+    this._devices = [];
     this.recorderManager = new RecorderManager();
   }
   async connectedCallback() {
     super.connectedCallback();
-    await this.recorderManager.initialize();
-    this.devices = this.recorderManager.devices;
+    const devices = await this.recorderManager.initialize();
+    if (devices.selectedDevice) {
+      this._selectedDevice = this.recorderManager.selectedDevice;
+      this._devices = this.recorderManager.devices;
+      this.dispatchEvent(new CustomEvent("ready"));
+    }
     const eventHandlers = {
       "recording-state-changed": (e5) => {
-        this.recordingState = e5.detail.state;
+        this._recordingState = e5.detail.state;
+      },
+      "devices-changed": () => {
+        this._devices = [...this.recorderManager.devices];
+        this.requestUpdate();
       },
       "audio-level-changed": (e5) => {
         this._audioLevel = e5.detail.audioLevel;
@@ -1470,9 +1523,11 @@ var CortiDictation = class extends r4 {
     };
     const eventsToRelay = [
       "recording-state-changed",
+      "recording-devices-changed",
       "audio-level-changed",
       "error",
-      "transcript"
+      "transcript",
+      "ready"
     ];
     eventsToRelay.forEach((eventName) => {
       this.recorderManager.addEventListener(eventName, (e5) => {
@@ -1491,45 +1546,58 @@ var CortiDictation = class extends r4 {
   toggleRecording() {
     this._toggleRecording();
   }
-  _toggleRecording() {
+  get selectedDevice() {
+    return this.recorderManager.selectedDevice || null;
+  }
+  get recordingState() {
+    return this._recordingState;
+  }
+  get devices() {
+    return this._devices;
+  }
+  async setRecordingDevice(device) {
+    this.recorderManager.selectedDevice = device;
+    this._selectedDevice = device;
     if (!this.authToken)
       return;
-    if (this.recordingState === "recording") {
-      this.recorderManager.stopRecording();
-    } else if (this.recordingState === "stopped") {
-      this.recorderManager.startRecording({
+    if (this._recordingState === "recording") {
+      await this.recorderManager.stopRecording();
+      await this.recorderManager.startRecording({
         dictationConfig: this.dictationConfig,
         authToken: this.authToken
       });
     }
   }
-  // Handle device change events if needed
-  async _onRecordingDeviceChanged(event) {
-    const customEvent = event;
+  _toggleRecording() {
     if (!this.authToken)
       return;
-    this.recorderManager.selectedDevice = customEvent.detail.deviceId;
-    if (this.recordingState === "recording") {
-      await this.recorderManager.stopRecording();
-      await this.recorderManager.startRecording({
+    if (this._recordingState === "recording") {
+      this.recorderManager.stopRecording();
+    } else if (this._recordingState === "stopped") {
+      this.recorderManager.startRecording({
         dictationConfig: this.dictationConfig,
         authToken: this.authToken
       });
     }
   }
+  // Handle device change events if needed
+  async _onRecordingDevicesChanged(event) {
+    const customEvent = event;
+    this.setRecordingDevice(customEvent.detail.selectedDevice);
+  }
   render() {
     const isConfigured = this.authToken;
     if (!isConfigured) {
       return x`
         <div class="wrapper">
-          <div class="callout red tiny">
-            Please configure the server settings in the parent component.
+          <div class="callout red small">
+            No Auth Token
           </div>
         </div>
       `;
     }
-    const isLoading = this.recordingState === "initializing" || this.recordingState === "stopping";
-    const isRecording = this.recordingState === "recording";
+    const isLoading = this._recordingState === "initializing" || this._recordingState === "stopping";
+    const isRecording = this._recordingState === "recording";
     return x`
       <div class="wrapper">
         <button
@@ -1544,22 +1612,15 @@ var CortiDictation = class extends r4 {
         </button>
         <settings-menu
-          .devices=${this.devices}
-          .selectedDevice=${this.recorderManager.selectedDevice}
-          ?settingsDisabled=${this.recordingState !== "stopped"}
-          @recording-device-changed=${this._onRecordingDeviceChanged}
+          .selectedDevice=${this._selectedDevice}
+          ?settingsDisabled=${this._recordingState !== "stopped"}
+          @recording-devices-changed=${this._onRecordingDevicesChanged}
         ></settings-menu>
       </div>
     `;
   }
 };
 CortiDictation.styles = [buttons_default, theme_default, ComponentStyles_default, callout_default];
-__decorate4([
-  n4({ type: Array })
-], CortiDictation.prototype, "devices", void 0);
-__decorate4([
-  n4({ type: String, reflect: true })
-], CortiDictation.prototype, "recordingState", void 0);
 __decorate4([
   n4({ type: Object })
 ], CortiDictation.prototype, "dictationConfig", void 0);
@@ -1569,6 +1630,15 @@ __decorate4([
 __decorate4([
   r6()
 ], CortiDictation.prototype, "_audioLevel", void 0);
+__decorate4([
+  r6()
+], CortiDictation.prototype, "_recordingState", void 0);
+__decorate4([
+  r6()
+], CortiDictation.prototype, "_selectedDevice", void 0);
+__decorate4([
+  r6()
+], CortiDictation.prototype, "_devices", void 0);
 var CortiDictation_default = CortiDictation;
 // dist/index.js

package/dist/components/settings-menu.d.ts CHANGED Viewed

@@ -1,9 +1,12 @@
 import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
 export declare class SettingsMenu extends LitElement {
-    devices: MediaDeviceInfo[];
-    selectedDevice: string;
+    selectedDevice: MediaDeviceInfo | undefined;
     selectedLanguage: string;
     settingsDisabled: boolean;
+    private _devices;
+    constructor();
+    connectedCallback(): Promise<void>;
+    private handleDevicesChange;
     static styles: CSSResultGroup;
     private _selectDevice;
     render(): TemplateResult;

package/dist/components/settings-menu.js CHANGED Viewed

@@ -6,26 +6,42 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 // mic-selector.ts
 import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import ButtonStyles from '../styles/buttons.js';
 import SelectStyles from '../styles/select.js';
 import { LANGUAGES_SUPPORTED } from '../constants.js';
-import { getLanguageName } from '../utils.js';
+import { getAudioDevices, getLanguageName } from '../utils.js';
 import CalloutStyles from '../styles/callout.js';
 let SettingsMenu = class SettingsMenu extends LitElement {
     constructor() {
-        super(...arguments);
-        this.devices = [];
-        this.selectedDevice = '';
+        super();
         this.selectedLanguage = '';
         this.settingsDisabled = false;
+        this._devices = [];
+        navigator.mediaDevices.addEventListener('devicechange', this.handleDevicesChange.bind(this));
+    }
+    // on load, get the available devices
+    async connectedCallback() {
+        super.connectedCallback();
+        const deviceResponse = await getAudioDevices();
+        this._devices = deviceResponse.devices;
+    }
+    async handleDevicesChange() {
+        const deviceResponse = await getAudioDevices();
+        this._devices = deviceResponse.devices;
     }
     _selectDevice(deviceId) {
-        this.selectedDevice = deviceId;
         // Find the device object
-        const device = this.devices.find(d => d.deviceId === deviceId);
-        this.dispatchEvent(new CustomEvent('recording-device-changed', {
-            detail: device,
+        const device = this._devices.find(d => d.deviceId === deviceId);
+        if (!device) {
+            return;
+        }
+        this.selectedDevice = device;
+        this.dispatchEvent(new CustomEvent('recording-devices-changed', {
+            detail: {
+                devices: this._devices,
+                selectedDevice: device,
+            },
             bubbles: true,
             composed: true,
         }));
@@ -57,10 +73,10 @@ let SettingsMenu = class SettingsMenu extends LitElement {
         }}
                 ?disabled=${this.settingsDisabled}
               >
-                ${this.devices.map(device => html `
+                ${this._devices.map(device => html `
                     <option
                       value=${device.deviceId}
-                      ?selected=${this.selectedDevice === device.deviceId}
+                      ?selected=${this.selectedDevice === device}
                     >
                       ${device.label || 'Unknown Device'}
                     </option>
@@ -134,9 +150,6 @@ SettingsMenu.styles = [
     SelectStyles,
     CalloutStyles,
 ];
-__decorate([
-    property({ type: Array })
-], SettingsMenu.prototype, "devices", void 0);
 __decorate([
     property({ type: String })
 ], SettingsMenu.prototype, "selectedDevice", void 0);
@@ -146,6 +159,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], SettingsMenu.prototype, "settingsDisabled", void 0);
+__decorate([
+    state()
+], SettingsMenu.prototype, "_devices", void 0);
 SettingsMenu = __decorate([
     customElement('settings-menu')
 ], SettingsMenu);

package/dist/components/settings-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"settings-menu.js","sourceRoot":"","sources":["../../src/components/settings-menu.ts"],"names":[],"mappings":";;;;;;AAAA,kBAAkB;AAClB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;~~AAE5D~~,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAChD,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;~~AAC9C~~,OAAO,aAAa,MAAM,sBAAsB,CAAC;AAG1C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;~~IAArC;;QAEL~~,~~YAAO~~,~~GAAsB,~~EAAE,CAAC;~~QAGhC~~,~~mBAAc~~,GAAW,EAAE,CAAC;~~QAG5B~~,qBAAgB,~~GAAW~~,EAAE,CAAC;~~QAG9B~~,~~qBAAgB~~,~~GAAY~~,~~KAAK~~,CAAC;~~IA2HpC~~,CAAC;~~IAjFS~~,~~aAAa~~,CAAC,~~QAAgB~~;~~QACpC~~,~~IAAI~~,CAAC,cAAc,GAAG,QAAQ,CAAC;QAC/B,yBAAyB;QACzB,MAAM,MAAM,GAAG,IAAI,CAAC,~~OAAO~~,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC;~~QAC/D~~,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,~~0BAA0B~~,EAAE;~~YAC1C~~,MAAM,EAAE,MAAM;~~YACd~~,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;cAOD,IAAI,CAAC,gBAAgB;YACrB,CAAC,CAAC,IAAI,CAAA;;;;iBAIH;YACH,CAAC,CAAC,EAAE;;;;;;;;0BAQQ,CAAC,CAAQ,EAAE,EAAE;YACrB,IAAI,CAAC,aAAa,CAAE,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC,CAAC;QAC5D,CAAC;4BACW,IAAI,CAAC,gBAAgB;;kBAE/B,IAAI,CAAC,~~OAAO~~,CAAC,GAAG,~~CAChB~~,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;8BAEF,MAAM,CAAC,QAAQ;kCACX,IAAI,CAAC,cAAc,KAAK,MAAM~~,CAAC,QAAQ~~;;~~wBAEjD~~,MAAM,CAAC,KAAK,IAAI,gBAAgB;;mBAErC,CACF;;;;;;;;;;0BAUS,CAAC,CAAQ,EAAE,EAAE;YACrB,IAAI,CAAC,aAAa,CAAE,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC,CAAC;QAC5D,CAAC;4BACW,IAAI,CAAC,gBAAgB;;kBAE/B,mBAAmB,CAAC,GAAG,CACvB,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA;;8BAEJ,QAAQ;kCACJ,IAAI,CAAC,gBAAgB,KAAK,QAAQ;;wBAE5C,eAAe,CAAC,QAAQ,CAAC;;mBAE9B,CACF;;;;;;KAMZ,CAAC;IACJ,CAAC;;~~AAxHM~~,mBAAM,GAAmB;IAC9B,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiCF;IACD,YAAY;IACZ,YAAY;IACZ,aAAa;CACd,AAtCY,CAsCX;~~AAjDF~~;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,~~KAAK~~,EAAE,CAAC;~~6CACM~~;~~AAGhC~~;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;~~oDACC~~;~~AAG5B~~;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,~~MAAM~~,EAAE,CAAC;~~sDACG~~;~~AAG9B~~;~~IADC~~,~~QAAQ~~,~~CAAC,~~EAAE~~,IAAI,EAAE,OAAO,EAAE,CAAC~~;~~sDACM~~;~~AAXvB~~,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,~~CAsIxB~~","sourcesContent":["// mic-selector.ts\nimport { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport ButtonStyles from '../styles/buttons.js';\nimport SelectStyles from '../styles/select.js';\nimport { LANGUAGES_SUPPORTED } from '../constants.js';\nimport { getLanguageName } from '../utils.js';\nimport CalloutStyles from '../styles/callout.js';\n\n@customElement('settings-menu')\nexport class SettingsMenu extends LitElement {\n @property({ type: ~~Array~~ })\n ~~devices~~: MediaDeviceInfo[] = [];\n\n @property({ type: String })\n ~~selectedDevice~~: string = '';\n\n @property({ type: ~~String~~ })\n ~~selectedLanguage~~: ~~string~~ = '';\n\n @~~property~~({ ~~type~~: ~~Boolean~~ })\n ~~settingsDisabled~~: ~~boolean~~ = ~~false~~;\n\n static styles: CSSResultGroup = [\n css`\n :host {\n display: block;\n font-family: var(--component-font-family);\n }\n /* Retain the anchor-name styling for this component /\n #settings-popover-button {\n anchor-name: --settings_popover_btn;\n }\n [popover] {\n margin: 0;\n padding: 16px;\n border: 0;\n background: var(--card-background);\n border: 1px solid var(--card-border-color);\n border-radius: var(--card-border-radius);\n box-shadow: var(--card-box-shadow);\n z-index: 1000;\n max-width: 260px;\n width: 100%;\n min-width: 200px;\n position-anchor: --settings_popover_btn;\n position-area: bottom;\n position-visibility: always;\n / inset: unset; */\n transform: translateX(40%);\n overflow-x: hidden;\n }\n .settings-wrapper {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n `,\n ButtonStyles,\n SelectStyles,\n CalloutStyles,\n ];\n\n private _selectDevice(deviceId: string): void {\n ~~this.selectedDevice = deviceId;\n~~ // Find the device object\n const device = this.~~devices~~.find(d => d.deviceId === deviceId);\n this.dispatchEvent(\n new CustomEvent('recording-~~device~~-changed', {\n detail: device,\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n render(): TemplateResult {\n return html`\n <div class=\"mic-selector\">\n <button id=\"settings-popover-button\" popovertarget=\"settings-popover\">\n <icon-settings></icon-settings>\n </button>\n <div id=\"settings-popover\" popover>\n <div class=\"settings-wrapper\">\n ${this.settingsDisabled\n ? html`\n <div class=\"callout orange\">\n Recording is in progress. Stop recording to change settings.\n </div>\n `\n : ''}\n <div class=\"form-group\">\n <label id=\"device-select-label\" for=\"device-select\">\n Recording Device\n </label>\n <select\n id=\"device-select\"\n aria-labelledby=\"device-select-label\"\n @change=${(e: Event) => {\n this._selectDevice((e.target as HTMLSelectElement).value);\n }}\n ?disabled=${this.settingsDisabled}\n >\n ${this.~~devices~~.map(\n device => html`\n <option\n value=${device.deviceId}\n ?selected=${this.selectedDevice === device~~.deviceId~~}\n >\n ${device.label \|\| 'Unknown Device'}\n </option>\n `,\n )}\n </select>\n </div>\n <div class=\"form-group\">\n <label id=\"language-select-label\" for=\"language-select\">\n Dictation Language\n </label>\n <select\n id=\"language-select\"\n aria-labelledby=\"language-select-label\"\n @change=${(e: Event) => {\n this._selectDevice((e.target as HTMLSelectElement).value);\n }}\n ?disabled=${this.settingsDisabled}\n >\n ${LANGUAGES_SUPPORTED.map(\n language => html`\n <option\n value=${language}\n ?selected=${this.selectedLanguage === language}\n >\n ${getLanguageName(language)}\n </option>\n `,\n )}\n </select>\n </div>\n </div>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'settings-menu': SettingsMenu;\n }\n}\n"]}
1	+ {"version":3,"file":"settings-menu.js","sourceRoot":"","sources":["../../src/components/settings-menu.ts"],"names":[],"mappings":"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","sourcesContent":["// mic-selector.ts\nimport { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport ButtonStyles from '../styles/buttons.js';\nimport SelectStyles from '../styles/select.js';\nimport { LANGUAGES_SUPPORTED } from '../constants.js';\nimport { getAudioDevices, getLanguageName } from '../utils.js';\nimport CalloutStyles from '../styles/callout.js';\n\n@customElement('settings-menu')\nexport class SettingsMenu extends LitElement {\n @property({ type: String })\n selectedDevice: MediaDeviceInfo \| undefined;\n\n @property({ type: String })\n selectedLanguage: string = '';\n\n @property({ type: Boolean })\n settingsDisabled: boolean = false;\n\n @state()\n private _devices: MediaDeviceInfo[] = [];\n\n constructor() {\n super();\n navigator.mediaDevices.addEventListener(\n 'devicechange',\n this.handleDevicesChange.bind(this),\n );\n }\n\n // on load, get the available devices\n async connectedCallback(): Promise<void> {\n super.connectedCallback();\n const deviceResponse = await getAudioDevices();\n this._devices = deviceResponse.devices;\n }\n\n private async handleDevicesChange() {\n const deviceResponse = await getAudioDevices();\n this._devices = deviceResponse.devices;\n }\n\n static styles: CSSResultGroup = [\n css`\n :host {\n display: block;\n font-family: var(--component-font-family);\n }\n /* Retain the anchor-name styling for this component /\n #settings-popover-button {\n anchor-name: --settings_popover_btn;\n }\n [popover] {\n margin: 0;\n padding: 16px;\n border: 0;\n background: var(--card-background);\n border: 1px solid var(--card-border-color);\n border-radius: var(--card-border-radius);\n box-shadow: var(--card-box-shadow);\n z-index: 1000;\n max-width: 260px;\n width: 100%;\n min-width: 200px;\n position-anchor: --settings_popover_btn;\n position-area: bottom;\n position-visibility: always;\n / inset: unset; */\n transform: translateX(40%);\n overflow-x: hidden;\n }\n .settings-wrapper {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n `,\n ButtonStyles,\n SelectStyles,\n CalloutStyles,\n ];\n\n private _selectDevice(deviceId: string): void {\n // Find the device object\n const device = this._devices.find(d => d.deviceId === deviceId);\n if(!device) {\n return;\n }\n this.selectedDevice = device;\n this.dispatchEvent(\n new CustomEvent('recording-devices-changed', {\n detail: {\n devices: this._devices,\n selectedDevice: device,\n },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n render(): TemplateResult {\n return html`\n <div class=\"mic-selector\">\n <button id=\"settings-popover-button\" popovertarget=\"settings-popover\">\n <icon-settings></icon-settings>\n </button>\n <div id=\"settings-popover\" popover>\n <div class=\"settings-wrapper\">\n ${this.settingsDisabled\n ? html`\n <div class=\"callout orange\">\n Recording is in progress. Stop recording to change settings.\n </div>\n `\n : ''}\n <div class=\"form-group\">\n <label id=\"device-select-label\" for=\"device-select\">\n Recording Device\n </label>\n <select\n id=\"device-select\"\n aria-labelledby=\"device-select-label\"\n @change=${(e: Event) => {\n this._selectDevice((e.target as HTMLSelectElement).value);\n }}\n ?disabled=${this.settingsDisabled}\n >\n ${this._devices.map(\n device => html`\n <option\n value=${device.deviceId}\n ?selected=${this.selectedDevice === device}\n >\n ${device.label \|\| 'Unknown Device'}\n </option>\n `,\n )}\n </select>\n </div>\n <div class=\"form-group\">\n <label id=\"language-select-label\" for=\"language-select\">\n Dictation Language\n </label>\n <select\n id=\"language-select\"\n aria-labelledby=\"language-select-label\"\n @change=${(e: Event) => {\n this._selectDevice((e.target as HTMLSelectElement).value);\n }}\n ?disabled=${this.settingsDisabled}\n >\n ${LANGUAGES_SUPPORTED.map(\n language => html`\n <option\n value=${language}\n ?selected=${this.selectedLanguage === language}\n >\n ${getLanguageName(language)}\n </option>\n `,\n )}\n </select>\n </div>\n </div>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'settings-menu': SettingsMenu;\n }\n}\n"]}

package/dist/constants.js CHANGED Viewed

@@ -3,7 +3,7 @@ export const DEFAULT_DICTATION_CONFIG = {
     primaryLanguage: 'en',
     interimResults: true,
     spokenPunctuation: true,
-    automaticPunctuation: true,
+    automaticPunctuation: false,
     model: 'others',
 };
 //# sourceMappingURL=constants.js.map

package/dist/constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAChD,MAAM,CAAC,MAAM,wBAAwB,GAAoB;IACvD,eAAe,EAAE,IAAI;IACrB,cAAc,EAAE,IAAI;IACpB,iBAAiB,EAAE,IAAI;IACvB,oBAAoB,EAAE,~~IAAI~~;~~IAC1B~~,KAAK,EAAE,QAAQ;CAChB,CAAC","sourcesContent":["import { DictationConfig } from './types.js';\n\nexport const LANGUAGES_SUPPORTED = ['en', 'da'];\nexport const DEFAULT_DICTATION_CONFIG: DictationConfig = {\n primaryLanguage: 'en',\n interimResults: true,\n spokenPunctuation: true,\n automaticPunctuation: ~~true~~,\n model: 'others',\n};\n"]}
1	+ {"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAChD,MAAM,CAAC,MAAM,wBAAwB,GAAoB;IACvD,eAAe,EAAE,IAAI;IACrB,cAAc,EAAE,IAAI;IACpB,iBAAiB,EAAE,IAAI;IACvB,oBAAoB,EAAE,KAAK;IAC3B,KAAK,EAAE,QAAQ;CAChB,CAAC","sourcesContent":["import { DictationConfig } from './types.js';\n\nexport const LANGUAGES_SUPPORTED = ['en', 'da'];\nexport const DEFAULT_DICTATION_CONFIG: DictationConfig = {\n primaryLanguage: 'en',\n interimResults: true,\n spokenPunctuation: true,\n automaticPunctuation: false,\n model: 'others',\n};\n"]}

package/dist/styles/ComponentStyles.js CHANGED Viewed

@@ -10,6 +10,7 @@ const ComponentStyles = css `
     width: min-content;
     gap: 4px;
     height: 46px;
+    width: 98px;
     box-sizing: border-box;
     overflow: hidden;
   }

package/dist/styles/ComponentStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComponentStyles.js","sourceRoot":"","sources":["../../src/styles/ComponentStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,eAAe,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgD1B~~,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst ComponentStyles = css`\n .wrapper {\n background-color: var(--card-background);\n border: 1px solid var(--card-border-color);\n border-radius: var(--card-border-radius);\n box-shadow: var(--card-box-shadow);\n padding: var(--card-padding);\n display: flex;\n width: min-content;\n gap: 4px;\n height: 46px;\n box-sizing: border-box;\n overflow: hidden;\n }\n h2 {\n margin: 0 0 10px;\n font-size: 1rem;\n font-weight: 500;\n }\n label {\n font-size: 0.9rem;\n margin-right: 8px;\n }\n select {\n padding: 4px 6px;\n font-size: 0.9rem;\n border: 1px solid var(--card-border-color);\n border-radius: 4px;\n background-color: var(--card-background);\n color: inherit;\n }\n\n .visualiser {\n width: 16px;\n height: 100%;\n background: var(--visualiser-background);\n margin-top: 8px;\n border-radius: 5px;\n overflow: hidden;\n display: flex;\n align-items: flex-end;\n }\n .level {\n height: 100%;\n width: 100%;\n background: var(--visualiser-level-color);\n transition: width 0.1s ease-in-out;\n }\n`;\n\nexport default ComponentStyles;\n"]}
1	+ {"version":3,"file":"ComponentStyles.js","sourceRoot":"","sources":["../../src/styles/ComponentStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiD1B,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst ComponentStyles = css`\n .wrapper {\n background-color: var(--card-background);\n border: 1px solid var(--card-border-color);\n border-radius: var(--card-border-radius);\n box-shadow: var(--card-box-shadow);\n padding: var(--card-padding);\n display: flex;\n width: min-content;\n gap: 4px;\n height: 46px;\n width: 98px;\n box-sizing: border-box;\n overflow: hidden;\n }\n h2 {\n margin: 0 0 10px;\n font-size: 1rem;\n font-weight: 500;\n }\n label {\n font-size: 0.9rem;\n margin-right: 8px;\n }\n select {\n padding: 4px 6px;\n font-size: 0.9rem;\n border: 1px solid var(--card-border-color);\n border-radius: 4px;\n background-color: var(--card-background);\n color: inherit;\n }\n\n .visualiser {\n width: 16px;\n height: 100%;\n background: var(--visualiser-background);\n margin-top: 8px;\n border-radius: 5px;\n overflow: hidden;\n display: flex;\n align-items: flex-end;\n }\n .level {\n height: 100%;\n width: 100%;\n background: var(--visualiser-level-color);\n transition: width 0.1s ease-in-out;\n }\n`;\n\nexport default ComponentStyles;\n"]}

package/dist/styles/callout.js CHANGED Viewed

@@ -10,6 +10,8 @@ const CalloutStyles = css `
     font-size: 0.9rem;
     gap: 8px;
     align-items: flex-start;
+    max-width: 100%;
+    height: fit-content;
     &.red {
       background: var(--callout-red-background);
       border: 1px solid var(--callout-red-border);
@@ -20,6 +22,11 @@ const CalloutStyles = css `
       border: 1px solid var(--callout-orange-border);
       color: var(--callout-orange-text);
     }
+    &.small {
+      width: 100%;
+      padding: 6px;
+      font-size: 0.7rem;
+    }
   }
 `;
 export default CalloutStyles;

package/dist/styles/callout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"callout.js","sourceRoot":"","sources":["../../src/styles/callout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,aAAa,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;CAsBxB~~,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst CalloutStyles = css`\n .callout {\n background: var(--callout-accent-background);\n border: 1px solid var(--callout-accent-border);\n color: var(--callout-accent-text);\n padding: 8px;\n border-radius: var(--card-inner-border-radius);\n display: flex;\n font-size: 0.9rem;\n gap: 8px;\n align-items: flex-start;\n &.red {\n background: var(--callout-red-background);\n border: 1px solid var(--callout-red-border);\n color: var(--callout-red-text);\n }\n &.orange {\n background: var(--callout-orange-background);\n border: 1px solid var(--callout-orange-border);\n color: var(--callout-orange-text);\n }\n }\n`;\n\nexport default CalloutStyles;\n"]}
1	+ {"version":3,"file":"callout.js","sourceRoot":"","sources":["../../src/styles/callout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BxB,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst CalloutStyles = css`\n .callout {\n background: var(--callout-accent-background);\n border: 1px solid var(--callout-accent-border);\n color: var(--callout-accent-text);\n padding: 8px;\n border-radius: var(--card-inner-border-radius);\n display: flex;\n font-size: 0.9rem;\n gap: 8px;\n align-items: flex-start;\n max-width: 100%;\n height: fit-content;\n &.red {\n background: var(--callout-red-background);\n border: 1px solid var(--callout-red-border);\n color: var(--callout-red-text);\n }\n &.orange {\n background: var(--callout-orange-background);\n border: 1px solid var(--callout-orange-border);\n color: var(--callout-orange-text);\n }\n &.small {\n width: 100%;\n padding: 6px;\n font-size: 0.7rem;\n }\n }\n`;\n\nexport default CalloutStyles;\n"]}

package/dist/utils.d.ts CHANGED Viewed

@@ -27,7 +27,7 @@ export declare function requestMicAccess(): Promise<void>;
  */
 export declare function getAudioDevices(): Promise<{
     devices: MediaDeviceInfo[];
-    defaultDeviceId?: string;
+    defaultDevice?: MediaDeviceInfo;
 }>;
 /**
  * Decodes a JWT token and extracts environment and tenant details from its issuer URL.

package/dist/utils.js CHANGED Viewed

@@ -66,8 +66,8 @@ export async function getAudioDevices() {
         // Optionally: await navigator.mediaDevices.getUserMedia({ audio: true });
         const devices = await navigator.mediaDevices.enumerateDevices();
         const audioDevices = devices.filter(device => device.kind === 'audioinput');
-        const defaultDeviceId = audioDevices.length > 0 ? audioDevices[0].deviceId : undefined;
-        return { devices: audioDevices, defaultDeviceId };
+        const defaultDevice = audioDevices.length > 0 ? audioDevices[0] : undefined;
+        return { devices: audioDevices, defaultDevice };
     }
     catch (error) {
         console.error('Error enumerating devices:', error);

package/dist/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAAC,YAAoB;IAClD,MAAM,UAAU,GAAG,SAAS,CAAC,QAAQ,IAAI,IAAI,CAAC;IAC9C,MAAM,YAAY,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,EAAE;QACvD,IAAI,EAAE,UAAU;KACjB,CAAC,CAAC;IACH,MAAM,YAAY,GAAG,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;IACnD,OAAO,YAAY,IAAI,YAAY,CAAC;AACtC,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,KAAK,UAAU,gBAAgB;IACpC,IAAI,CAAC;QACH,+CAA+C;QAC/C,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;YAC3B,MAAM,MAAM,GAAG,MAAM,SAAS,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;YAC1E,MAAM,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;YAClD,OAAO;QACT,CAAC;QAED,MAAM,gBAAgB,GAAG,MAAM,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;YACzD,oCAAoC;YACpC,IAAI,EAAE,YAA8B;SACrC,CAAC,CAAC;QAEH,IAAI,gBAAgB,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;YACxC,MAAM,MAAM,GAAG,MAAM,SAAS,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;YAC1E,MAAM,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;QACpD,CAAC;aAAM,IAAI,gBAAgB,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,kCAAkC,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,kDAAkD,EAAE,KAAK,CAAC,CAAC;IAC3E,CAAC;AACH,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,KAAK,UAAU,eAAe;IAInC,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,gBAAgB,EAAE,CAAC;QAC9C,OAAO,CAAC,KAAK,CAAC,kCAAkC,CAAC,CAAC;QAClD,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;IACzB,CAAC;IAED,MAAM,gBAAgB,EAAE,CAAC;IAEzB,IAAI,CAAC;QACH,0EAA0E;QAC1E,MAAM,OAAO,GAAG,MAAM,SAAS,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC;QAChE,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC;QAC5E,MAAM,~~eAAe~~,~~GACnB~~,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,~~CAAC~~,~~QAAQ,~~CAAC,CAAC,~~CAAC,~~SAAS,CAAC;~~QACjE~~,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,~~eAAe~~,EAAE,CAAC;~~IACpD~~,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAC;QACnD,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;IACzB,CAAC;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,WAAW,CAAC,KAAa;IACvC,kFAAkF;IAClF,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC/B,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACrB,MAAM,IAAI,KAAK,CAAC,yDAAyD,CAAC,CAAC;IAC7E,CAAC;IAED,sDAAsD;IACtD,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IAE3B,gEAAgE;IAChE,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAE/D,8CAA8C;IAC9C,IAAI,WAAmB,CAAC;IACxB,IAAI,CAAC;QACH,WAAW,GAAG,kBAAkB,CAC9B,IAAI,CAAC,MAAM,CAAC;aACT,KAAK,CAAC,EAAE,CAAC;aACT,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;aAC/D,IAAI,CAAC,EAAE,CAAC,CACZ,CAAC;IACJ,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;IACpD,CAAC;IAED,gDAAgD;IAChD,IAAI,YAAqD,CAAC;IAC1D,IAAI,CAAC;QACH,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IACzC,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;IACnD,CAAC;IAED,gDAAgD;IAChD,MAAM,SAAS,GAAW,YAAY,CAAC,GAAG,CAAC;IAC3C,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAC;IAC1E,CAAC;IAED,2DAA2D;IAC3D,4EAA4E;IAC5E,oEAAoE;IACpE,MAAM,KAAK,GACT,kEAAkE,CAAC;IACrE,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAErC,mGAAmG;IACnG,IAAI,KAAK,EAAE,CAAC;QACV,OAAO;YACL,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;YACrB,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;YAChB,KAAK;SACN,CAAC;IACJ,CAAC;AACH,CAAC","sourcesContent":["/* eslint-disable no-console /\n/\n Returns the localized name of a language given its BCP-47 code.\n \n @param languageCode - The BCP-47 language code (e.g. \"en\")\n * @returns The localized language name (e.g. \"English\") or the original code if unavailable.\n /\nexport function getLanguageName(languageCode: string): string {\n const userLocale = navigator.language \|\| 'en';\n const displayNames = new Intl.DisplayNames([userLocale], {\n type: 'language',\n });\n const languageName = displayNames.of(languageCode);\n return languageName \|\| languageCode;\n}\n\n/\n Requests access to the microphone.\n \n This function checks if the microphone permission is in \"prompt\" state, then requests\n * access and stops any active tracks immediately. It also logs if permission is already granted.\n \n @returns A promise that resolves when the permission request is complete.\n /\nexport async function requestMicAccess(): Promise<void> {\n try {\n // Fallback if Permissions API is not available\n if (!navigator.permissions) {\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n stream.getTracks().forEach(track => track.stop());\n return;\n }\n\n const permissionStatus = await navigator.permissions.query({\n // eslint-disable-next-line no-undef\n name: 'microphone' as PermissionName,\n });\n\n if (permissionStatus.state === 'prompt') {\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n stream.getTracks().forEach(track => track.stop());\n } else if (permissionStatus.state === 'denied') {\n console.warn('Microphone permission is denied.');\n }\n } catch (error) {\n console.error('Error checking/requesting microphone permission:', error);\n }\n}\n\n/\n Retrieves available audio input devices.\n \n This function uses the mediaDevices API to enumerate devices and filters out those\n * which are audio inputs. In some browsers, you may need to request user media before\n * device labels are populated.\n \n @returns A promise that resolves with an object containing:\n * - `devices`: an array of MediaDeviceInfo objects for audio inputs.\n * - `defaultDeviceId`: the deviceId of the first audio input, if available.\n /\nexport async function getAudioDevices(): Promise<{\n devices: MediaDeviceInfo[];\n ~~defaultDeviceId~~?: ~~string~~;\n}> {\n if (!navigator.mediaDevices?.enumerateDevices) {\n console.error('Media devices API not supported.');\n return { devices: [] };\n }\n\n await requestMicAccess();\n\n try {\n // Optionally: await navigator.mediaDevices.getUserMedia({ audio: true });\n const devices = await navigator.mediaDevices.enumerateDevices();\n const audioDevices = devices.filter(device => device.kind === 'audioinput');\n const ~~defaultDeviceId~~ =\n audioDevices.length > 0 ? audioDevices[0]~~.deviceId~~ : undefined;\n return { devices: audioDevices, ~~defaultDeviceId~~ };\n } catch (error) {\n console.error('Error enumerating devices:', error);\n return { devices: [] };\n }\n}\n\n/\n Decodes a JWT token and extracts environment and tenant details from its issuer URL.\n \n This function assumes the JWT token follows the standard header.payload.signature format.\n * It decodes the payload from base64 URL format, parses it as JSON, and then uses a regex\n * to extract the `environment` and `tenant` from the issuer URL (iss field) if it matches the pattern:\n * https://keycloak.{environment}.corti.app/realms/{tenant}.\n \n @param token - A JSON Web Token (JWT) string.\n * @returns An object containing:\n * - `environment`: The extracted environment from the issuer URL.\n * - `tenant`: The extracted tenant from the issuer URL.\n * - `token`: The original token string.\n * If the issuer URL doesn't match the expected format, the function returns the full decoded token details.\n \n @throws Will throw an error if:\n * - The token format is invalid.\n * - The base64 decoding or URI decoding fails.\n * - The JSON payload is invalid.\n * - The token payload does not contain an issuer (iss) field.\n */\nexport function decodeToken(token: string) {\n // Validate the token structure (should contain at least header and payload parts)\n const parts = token.split('.');\n if (parts.length < 2) {\n throw new Error('Invalid token format: expected header.payload.signature');\n }\n\n // Retrieve the payload (second part) of the JWT token\n const base64Url = parts[1];\n\n // Replace URL-safe characters to match standard base64 encoding\n const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');\n\n // Decode the base64 string into a JSON string\n let jsonPayload: string;\n try {\n jsonPayload = decodeURIComponent(\n atob(base64)\n .split('')\n .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))\n .join(''),\n );\n } catch (error) {\n throw new Error('Failed to decode token payload');\n }\n\n // Parse the JSON string to obtain token details\n let tokenDetails: { iss: string; [key: string]: unknown };\n try {\n tokenDetails = JSON.parse(jsonPayload);\n } catch (error) {\n throw new Error('Invalid JSON payload in token');\n }\n\n // Extract the issuer URL from the token details\n const issuerUrl: string = tokenDetails.iss;\n if (!issuerUrl) {\n throw new Error('Token payload does not contain an issuer (iss) field');\n }\n\n // Regex to extract environment and tenant from issuer URL:\n // Expected format: https://keycloak.{environment}.corti.app/realms/{tenant}\n // Note: Unnecessary escapes in character classes have been removed.\n const regex =\n /^https:\\/\\/(keycloak\|auth)\\.([^.]+)\\.corti\\.app\\/realms\\/([^/]+)/;\n const match = issuerUrl.match(regex);\n\n // If the issuer URL matches the expected pattern, return the extracted values along with the token\n if (match) {\n return {\n environment: match[2],\n tenant: match[3],\n token,\n };\n }\n}\n"]}
1	+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-console /\n/\n Returns the localized name of a language given its BCP-47 code.\n \n @param languageCode - The BCP-47 language code (e.g. \"en\")\n * @returns The localized language name (e.g. \"English\") or the original code if unavailable.\n /\nexport function getLanguageName(languageCode: string): string {\n const userLocale = navigator.language \|\| 'en';\n const displayNames = new Intl.DisplayNames([userLocale], {\n type: 'language',\n });\n const languageName = displayNames.of(languageCode);\n return languageName \|\| languageCode;\n}\n\n/\n Requests access to the microphone.\n \n This function checks if the microphone permission is in \"prompt\" state, then requests\n * access and stops any active tracks immediately. It also logs if permission is already granted.\n \n @returns A promise that resolves when the permission request is complete.\n /\nexport async function requestMicAccess(): Promise<void> {\n try {\n // Fallback if Permissions API is not available\n if (!navigator.permissions) {\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n stream.getTracks().forEach(track => track.stop());\n return;\n }\n\n const permissionStatus = await navigator.permissions.query({\n // eslint-disable-next-line no-undef\n name: 'microphone' as PermissionName,\n });\n\n if (permissionStatus.state === 'prompt') {\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n stream.getTracks().forEach(track => track.stop());\n } else if (permissionStatus.state === 'denied') {\n console.warn('Microphone permission is denied.');\n }\n } catch (error) {\n console.error('Error checking/requesting microphone permission:', error);\n }\n}\n\n/\n Retrieves available audio input devices.\n \n This function uses the mediaDevices API to enumerate devices and filters out those\n * which are audio inputs. In some browsers, you may need to request user media before\n * device labels are populated.\n \n @returns A promise that resolves with an object containing:\n * - `devices`: an array of MediaDeviceInfo objects for audio inputs.\n * - `defaultDeviceId`: the deviceId of the first audio input, if available.\n /\nexport async function getAudioDevices(): Promise<{\n devices: MediaDeviceInfo[];\n defaultDevice?: MediaDeviceInfo;\n}> {\n if (!navigator.mediaDevices?.enumerateDevices) {\n console.error('Media devices API not supported.');\n return { devices: [] };\n }\n\n await requestMicAccess();\n\n try {\n // Optionally: await navigator.mediaDevices.getUserMedia({ audio: true });\n const devices = await navigator.mediaDevices.enumerateDevices();\n const audioDevices = devices.filter(device => device.kind === 'audioinput');\n const defaultDevice =\n audioDevices.length > 0 ? audioDevices[0]: undefined;\n return { devices: audioDevices, defaultDevice };\n } catch (error) {\n console.error('Error enumerating devices:', error);\n return { devices: [] };\n }\n}\n\n/\n Decodes a JWT token and extracts environment and tenant details from its issuer URL.\n \n This function assumes the JWT token follows the standard header.payload.signature format.\n * It decodes the payload from base64 URL format, parses it as JSON, and then uses a regex\n * to extract the `environment` and `tenant` from the issuer URL (iss field) if it matches the pattern:\n * https://keycloak.{environment}.corti.app/realms/{tenant}.\n \n @param token - A JSON Web Token (JWT) string.\n * @returns An object containing:\n * - `environment`: The extracted environment from the issuer URL.\n * - `tenant`: The extracted tenant from the issuer URL.\n * - `token`: The original token string.\n * If the issuer URL doesn't match the expected format, the function returns the full decoded token details.\n \n @throws Will throw an error if:\n * - The token format is invalid.\n * - The base64 decoding or URI decoding fails.\n * - The JSON payload is invalid.\n * - The token payload does not contain an issuer (iss) field.\n */\nexport function decodeToken(token: string) {\n // Validate the token structure (should contain at least header and payload parts)\n const parts = token.split('.');\n if (parts.length < 2) {\n throw new Error('Invalid token format: expected header.payload.signature');\n }\n\n // Retrieve the payload (second part) of the JWT token\n const base64Url = parts[1];\n\n // Replace URL-safe characters to match standard base64 encoding\n const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');\n\n // Decode the base64 string into a JSON string\n let jsonPayload: string;\n try {\n jsonPayload = decodeURIComponent(\n atob(base64)\n .split('')\n .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))\n .join(''),\n );\n } catch (error) {\n throw new Error('Failed to decode token payload');\n }\n\n // Parse the JSON string to obtain token details\n let tokenDetails: { iss: string; [key: string]: unknown };\n try {\n tokenDetails = JSON.parse(jsonPayload);\n } catch (error) {\n throw new Error('Invalid JSON payload in token');\n }\n\n // Extract the issuer URL from the token details\n const issuerUrl: string = tokenDetails.iss;\n if (!issuerUrl) {\n throw new Error('Token payload does not contain an issuer (iss) field');\n }\n\n // Regex to extract environment and tenant from issuer URL:\n // Expected format: https://keycloak.{environment}.corti.app/realms/{tenant}\n // Note: Unnecessary escapes in character classes have been removed.\n const regex =\n /^https:\\/\\/(keycloak\|auth)\\.([^.]+)\\.corti\\.app\\/realms\\/([^/]+)/;\n const match = issuerUrl.match(regex);\n\n // If the issuer URL matches the expected pattern, return the extracted values along with the token\n if (match) {\n return {\n environment: match[2],\n tenant: match[3],\n token,\n };\n }\n}\n"]}

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@corti/dictation-web",
   "description": "Web component for Corti Dictation",
   "author": "Corti ApS",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",