@corti/dictation-web 0.1.6 → 0.1.8

package/dist/RecorderManager.js.map

@@ -1 +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"]}
+{"version":3,"file":"RecorderManager.js","sourceRoot":"","sources":["../src/RecorderManager.ts"],"names":[],"mappings":"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","sourcesContent":["import { getAudioDevices, getMediaStream } from './utils.js';\nimport { AudioService } from './audioService.js';\nimport { DictationService } from './DictationService.js';\nimport type { DictationConfig, RecordingState, ServerConfig } 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    serverConfig: ServerConfig;\n    debug_displayAudio?: boolean;\n  }): Promise<void> {\n    this._updateRecordingState('initializing');\n\n    try {\n      this._mediaStream = await getMediaStream(\n        params.debug_displayAudio\n          ? 'display_audio'\n          : this.selectedDevice?.deviceId,\n      );\n\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\n      this._audioService = new AudioService(this._mediaStream);\n    } catch (error) {\n      this.dispatchCustomEvent('error', error);\n      this.stopRecording();\n      return;\n    }\n\n    // Initialize dictation service.\n    try {\n      this._dictationService = new DictationService(this._mediaStream, params);\n\n      // Forward custom events from dictation service\n      this._dictationService.addEventListener('error', e => {\n        this.dispatchEvent(\n          new CustomEvent('error', {\n            detail: (e as CustomEvent).detail,\n            bubbles: true,\n            composed: true,\n          }),\n        );\n        this.stopRecording();\n      });\n      this._dictationService.addEventListener('stream-closed', () =>\n        this.stopRecording(),\n      );\n      this._dictationService.addEventListener('transcript', e =>\n        this.dispatchEvent(\n          new CustomEvent('transcript', {\n            detail: (e as CustomEvent).detail,\n            bubbles: true,\n            composed: true,\n          }),\n        ),\n      );\n      this._dictationService.addEventListener('command', e =>\n        this.dispatchEvent(\n          new CustomEvent('command', {\n            detail: (e as CustomEvent).detail,\n            bubbles: true,\n            composed: true,\n          }),\n        ),\n      );\n    } catch (error) {\n      this.dispatchCustomEvent('error', error);\n      this.stopRecording();\n      return;\n    }\n\n    try {\n      this._dictationService?.startRecording();\n    } catch (error) {\n      this.dispatchEvent(\n        new CustomEvent('error', {\n          detail: error,\n          bubbles: true,\n          composed: true,\n        }),\n      );\n      this.stopRecording();\n      return;\n    }\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    }\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

@@ -633,7 +633,7 @@ async function getAudioDevices() {
 function decodeToken(token) {
   const parts = token.split(".");
   if (parts.length < 2) {
-    throw new Error("Invalid token format: expected header.payload.signature");
+    throw new Error("Invalid token format");
   }
   const base64Url = parts[1];
   const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
@@ -659,10 +659,29 @@ function decodeToken(token) {
     return {
       environment: match[2],
       tenant: match[3],
-      token
+      accessToken: token
     };
   }
 }
+async function getMediaStream(deviceId) {
+  if (!deviceId) {
+    throw new Error("No device ID provided");
+  }
+  if (deviceId === "display_audio") {
+    const stream = await navigator.mediaDevices.getDisplayMedia({
+      audio: true,
+      video: true
+    });
+    stream.getTracks().forEach((track) => {
+      if (track.kind === "video") {
+        stream.removeTrack(track);
+      }
+    });
+    return stream;
+  }
+  const constraints = deviceId !== "default" ? { audio: { deviceId: { exact: deviceId } } } : { audio: true };
+  return await navigator.mediaDevices.getUserMedia(constraints);
+}
 
 // dist/audioService.js
 var AudioService = class {
@@ -688,16 +707,11 @@ var AudioService = class {
 
 // dist/DictationService.js
 var DictationService = class extends EventTarget {
-  constructor(mediaStream, { dictationConfig, authToken }) {
+  constructor(mediaStream, { dictationConfig, serverConfig }) {
     super();
     this.mediaRecorder = new MediaRecorder(mediaStream);
-    this.authToken = authToken;
+    this.serverConfig = serverConfig;
     this.dictationConfig = dictationConfig;
-    const config = decodeToken(this.authToken);
-    if (!config) {
-      throw new Error("Invalid token");
-    }
-    this.serverConfig = config;
     this.mediaRecorder.ondataavailable = (event) => {
       if (this.webSocket?.readyState === WebSocket.OPEN) {
         this.webSocket.send(event.data);
@@ -712,7 +726,15 @@ var DictationService = class extends EventTarget {
     }));
   }
   startRecording() {
-    const url = `wss://api.${this.serverConfig.environment}.corti.app/audio-bridge/v2/transcribe?tenant-name=${this.serverConfig.tenant}&token=Bearer%20${this.authToken}`;
+    if (!this.serverConfig) {
+      this.dispatchEvent(new CustomEvent("error", {
+        detail: "Invalid token",
+        bubbles: true,
+        composed: true
+      }));
+      return;
+    }
+    const url = `wss://api.${this.serverConfig.environment}.corti.app/audio-bridge/v2/transcribe?tenant-name=${this.serverConfig.tenant}&token=Bearer%20${this.serverConfig.accessToken}`;
     this.webSocket = new WebSocket(url);
     this.webSocket.onopen = () => {
       this.webSocket.send(JSON.stringify({
@@ -722,10 +744,22 @@ var DictationService = class extends EventTarget {
     };
     this.webSocket.onmessage = (event) => {
       const message = JSON.parse(event.data);
-      if (message.type === "CONFIG_ACCEPTED") {
-        this.mediaRecorder.start(250);
-      } else if (message.type === "transcript") {
-        this.dispatchCustomEvent("transcript", message);
+      switch (message.type) {
+        case "CONFIG_ACCEPTED":
+          this.mediaRecorder.start(250);
+          break;
+        case "CONFIG_DENIED":
+          this.dispatchCustomEvent("error", message);
+          return this.stopRecording();
+        case "transcript":
+          this.dispatchCustomEvent("transcript", message);
+          break;
+        case "command":
+          this.dispatchCustomEvent("command", message);
+          break;
+        default:
+          console.warn(`Unhandled message type: ${message.type}`);
+          break;
       }
     };
     this.webSocket.onerror = (event) => {
@@ -736,7 +770,7 @@ var DictationService = class extends EventTarget {
     };
   }
   async stopRecording() {
-    this.mediaRecorder.stop();
+    this.mediaRecorder?.stop();
     if (this.webSocket?.readyState === WebSocket.OPEN) {
       this.webSocket.send(JSON.stringify({ type: "end" }));
     }
@@ -789,9 +823,8 @@ var RecorderManager = class extends EventTarget {
   }
   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(constraints);
+      this._mediaStream = await getMediaStream(params.debug_displayAudio ? "display_audio" : this.selectedDevice?.deviceId);
       this._mediaStream.getTracks().forEach((track) => {
         track.addEventListener("ended", () => {
           if (this.recordingState === "recording") {
@@ -805,20 +838,46 @@ var RecorderManager = class extends EventTarget {
       this._audioService = new AudioService(this._mediaStream);
     } catch (error) {
       this.dispatchCustomEvent("error", error);
-      this._updateRecordingState("stopped");
+      this.stopRecording();
       return;
     }
     try {
       this._dictationService = new DictationService(this._mediaStream, params);
+      this._dictationService.addEventListener("error", (e5) => {
+        this.dispatchEvent(new CustomEvent("error", {
+          detail: e5.detail,
+          bubbles: true,
+          composed: true
+        }));
+        this.stopRecording();
+      });
+      this._dictationService.addEventListener("stream-closed", () => this.stopRecording());
+      this._dictationService.addEventListener("transcript", (e5) => this.dispatchEvent(new CustomEvent("transcript", {
+        detail: e5.detail,
+        bubbles: true,
+        composed: true
+      })));
+      this._dictationService.addEventListener("command", (e5) => this.dispatchEvent(new CustomEvent("command", {
+        detail: e5.detail,
+        bubbles: true,
+        composed: true
+      })));
     } catch (error) {
       this.dispatchCustomEvent("error", error);
       this.stopRecording();
       return;
     }
-    this._dictationService.addEventListener("error", (e5) => this.dispatchCustomEvent("error", e5.detail));
-    this._dictationService.addEventListener("stream-closed", () => this.stopRecording());
-    this._dictationService.addEventListener("transcript", (e5) => this.dispatchCustomEvent("transcript", e5.detail));
-    this._dictationService.startRecording();
+    try {
+      this._dictationService?.startRecording();
+    } catch (error) {
+      this.dispatchEvent(new CustomEvent("error", {
+        detail: error,
+        bubbles: true,
+        composed: true
+      }));
+      this.stopRecording();
+      return;
+    }
     this._updateRecordingState("recording");
     this._visualiserInterval = window.setInterval(() => {
       const level = this._audioService ? this._audioService.getAudioLevel() * 3 : 0;
@@ -833,7 +892,6 @@ var RecorderManager = class extends EventTarget {
     }
     if (this._mediaStream) {
       this._mediaStream.getTracks().forEach((track) => track.stop());
-      this._mediaStream = null;
     }
     this.dispatchCustomEvent("audio-level-changed", { audioLevel: 0 });
     await this._dictationService?.stopRecording();
@@ -949,33 +1007,33 @@ var DEFAULT_DICTATION_CONFIG = {
   primaryLanguage: "en",
   interimResults: true,
   spokenPunctuation: true,
-  automaticPunctuation: false,
+  automaticPunctuation: true,
   model: "others"
 };
 
 // dist/styles/callout.js
 var CalloutStyles = i`
   .callout {
-    background: var(--callout-accent-background);
-    border: 1px solid var(--callout-accent-border);
-    color: var(--callout-accent-text);
+    background: var(--callout-info-background);
+    border: 1px solid var(--callout-info-border);
+    color: var(--callout-info-text);
     padding: 8px;
     border-radius: var(--card-inner-border-radius);
     display: flex;
     font-size: 0.9rem;
     gap: 8px;
-    align-items: flex-start;
+    align-items: center;
     max-width: 100%;
     height: fit-content;
-    &.red {
-      background: var(--callout-red-background);
-      border: 1px solid var(--callout-red-border);
-      color: var(--callout-red-text);
+    &.error {
+      background: var(--callout-error-background);
+      border: 1px solid var(--callout-error-border);
+      color: var(--callout-warn-text);
     }
-    &.orange {
-      background: var(--callout-orange-background);
-      border: 1px solid var(--callout-orange-border);
-      color: var(--callout-orange-text);
+    &.warn {
+      background: var(--callout-warn-background);
+      border: 1px solid var(--callout-warn-border);
+      color: var(--callout-warn-text);
     }
     &.small {
       width: 100%;
@@ -1035,7 +1093,7 @@ var SettingsMenu = class SettingsMenu2 extends r4 {
         <div id="settings-popover" popover>
           <div class="settings-wrapper">
             ${this.settingsDisabled ? x`
-                  <div class="callout orange">
+                  <div class="callout warn">
                     Recording is in progress. Stop recording to change settings.
                   </div>
                 ` : ""}
@@ -1112,10 +1170,9 @@ SettingsMenu.styles = [
         width: 100%;
         min-width: 200px;
         position-anchor: --settings_popover_btn;
-        position-area: bottom;
+        position-area: bottom span-right;
         position-visibility: always;
-        /* inset: unset; */
-        transform: translateX(40%);
+        position-try-fallbacks: flip-inline;
         overflow-x: hidden;
       }
       .settings-wrapper {
@@ -1360,69 +1417,48 @@ IconLoadingSpinner = __decorate3([
 // dist/styles/theme.js
 var ThemeStyles = i`
   :host {
+    color-scheme: light dark;
     /* Component Defaults */
     --component-font-family: 'Segoe UI', Roboto, sans-serif;
-    --component-text-color: #333;
+    --component-text-color: light-dark(#333, #eee);
 
     /* Card Defaults */
-    --card-background: #fff;
-    --card-border-color: #ddd;
+    --card-background: light-dark(#fff, #333);
+    --card-border-color: light-dark(#ddd, #555);
     --card-padding: 4px;
     --card-border-radius: 8px;
     --card-inner-border-radius: 6px;
     --card-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
     /* Actions Defaults */
-    --action-plain-border-color: #ccc;
-    --action-plain-background-hover: #ddd;
+    --action-plain-border-color: light-dark(#ccc, #555);
+    --action-plain-background-hover: light-dark(#ddd, #444);
 
-    --action-accent-background: #007bff;
-    --action-accent-background-hover: #0056b3;
+    --action-accent-background: light-dark(#007bff, #0056b3);
+    --action-accent-background-hover: light-dark(#0056b3, #003d80);
     --action-accent-text-color: #fff;
 
-    --action-red-background: #dc3545;
-    --action-red-background-hover: #bd2130;
+    --action-red-background: light-dark(#dc3545, #bd2130);
+    --action-red-background-hover: light-dark(#bd2130, #a71c24);
     --action-red-text-color: #fff;
 
     /* Callout Defaults */
-    --callout-accent-background: #007bff33;
-    --callout-accent-border: #007bff99;
-    --callout-accent-text: #007bff;
+    --callout-info-background: light-dark(#007bff33, #0056b333);
+    --callout-info-border: light-dark(#007bff99, #0056b399);
+    --callout-info-text: light-dark(#007bff, #0056b3);
 
-    --callout-red-background: #dc354533;
-    --callout-red-border: #dc354599;
-    --callout-red-text: #dc3545;
+    --callout-error-background: light-dark(#dc354533, #bd213033);
+    --callout-error-border: light-dark(#dc354599, #bd213099);
+    --callout-error-text: light-dark(#dc3545, #bd2130);
 
-    --callout-orange-background: #fd7e1433;
-    --callout-orange-border: #fd7e1499;
-    --callout-orange-text: #fd7e14;
+    --callout-warn-background: light-dark(#fd7e1433, #e06c1233);
+    --callout-warn-border: light-dark(#fd7e1499, #e06c1299);
+    --callout-warn-text: light-dark(#fd7e14, #e06c12);
 
     /* Visualiser Defaults */
-    --visualiser-background: #e0e0e0;
-    --visualiser-level-color: #28a745;
+    --visualiser-background: light-dark(#e0e0e0, #fff);
   }
 
-  @media (prefers-color-scheme: dark) {
-    :host {
-      /* Component Dark */
-      --component-text-color: #eee;
-
-      /* Card Dark */
-      --card-background: #333;
-      --card-border-color: #555;
-
-      /* Actions Dark */
-      --action-plain-border-color: #555;
-      --action-plain-background: #333;
-      --action-plain-background-hover: #444;
-
-      --action-accent-background: #0056b3;
-      --action-accent-background-hover: #003d80;
-
-      /* Visualiser Dark */
-      --visualiser-background: #fff;
-    }
-  }
   :host {
     box-sizing: border-box;
     font-family: var(--component-font-family);
@@ -1495,6 +1531,7 @@ var CortiDictation = class extends r4 {
   constructor() {
     super(...arguments);
     this.dictationConfig = DEFAULT_DICTATION_CONFIG;
+    this.debug_displayAudio = false;
     this._audioLevel = 0;
     this._recordingState = "stopped";
     this._devices = [];
@@ -1527,6 +1564,7 @@ var CortiDictation = class extends r4 {
       "audio-level-changed",
       "error",
       "transcript",
+      "command",
       "ready"
     ];
     eventsToRelay.forEach((eventName) => {
@@ -1546,6 +1584,14 @@ var CortiDictation = class extends r4 {
   toggleRecording() {
     this._toggleRecording();
   }
+  setAccessToken(token) {
+    const decoded = decodeToken(token);
+    if (!decoded) {
+      throw new Error("Invalid token");
+    }
+    this._serverConfig = decoded;
+    return decoded;
+  }
   get selectedDevice() {
     return this.recorderManager.selectedDevice || null;
   }
@@ -1558,25 +1604,26 @@ var CortiDictation = class extends r4 {
   async setRecordingDevice(device) {
     this.recorderManager.selectedDevice = device;
     this._selectedDevice = device;
-    if (!this.authToken)
+    if (!this._serverConfig)
       return;
     if (this._recordingState === "recording") {
       await this.recorderManager.stopRecording();
       await this.recorderManager.startRecording({
         dictationConfig: this.dictationConfig,
-        authToken: this.authToken
+        serverConfig: this._serverConfig
       });
     }
   }
   _toggleRecording() {
-    if (!this.authToken)
+    if (!this._serverConfig)
       return;
     if (this._recordingState === "recording") {
       this.recorderManager.stopRecording();
     } else if (this._recordingState === "stopped") {
       this.recorderManager.startRecording({
         dictationConfig: this.dictationConfig,
-        authToken: this.authToken
+        serverConfig: this._serverConfig,
+        debug_displayAudio: this.debug_displayAudio
       });
     }
   }
@@ -1586,16 +1633,6 @@ var CortiDictation = class extends r4 {
     this.setRecordingDevice(customEvent.detail.selectedDevice);
   }
   render() {
-    const isConfigured = this.authToken;
-    if (!isConfigured) {
-      return x`
-        <div class="wrapper">
-          <div class="callout red small">
-            No Auth Token
-          </div>
-        </div>
-      `;
-    }
     const isLoading = this._recordingState === "initializing" || this._recordingState === "stopping";
     const isRecording = this._recordingState === "recording";
     return x`
@@ -1625,8 +1662,11 @@ __decorate4([
   n4({ type: Object })
 ], CortiDictation.prototype, "dictationConfig", void 0);
 __decorate4([
-  n4({ type: String })
-], CortiDictation.prototype, "authToken", void 0);
+  n4({ type: Boolean })
+], CortiDictation.prototype, "debug_displayAudio", void 0);
+__decorate4([
+  r6()
+], CortiDictation.prototype, "_serverConfig", void 0);
 __decorate4([
   r6()
 ], CortiDictation.prototype, "_audioLevel", void 0);

package/dist/components/settings-menu.js

@@ -56,7 +56,7 @@ let SettingsMenu = class SettingsMenu extends LitElement {
           <div class="settings-wrapper">
             ${this.settingsDisabled
             ? html `
-                  <div class="callout orange">
+                  <div class="callout warn">
                     Recording is in progress. Stop recording to change settings.
                   </div>
                 `
@@ -134,10 +134,9 @@ SettingsMenu.styles = [
         width: 100%;
         min-width: 200px;
         position-anchor: --settings_popover_btn;
-        position-area: bottom;
+        position-area: bottom span-right;
         position-visibility: always;
-        /* inset: unset; */
-        transform: translateX(40%);
+        position-try-fallbacks: flip-inline;
         overflow-x: hidden;
       }
       .settings-wrapper {

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

@@ -1 +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"]}
+{"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 span-right;\n        position-visibility: always;\n        position-try-fallbacks: flip-inline;\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 warn\">\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

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

package/dist/constants.js.map

@@ -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,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"]}
+{"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"]}

package/dist/styles/callout.js

@@ -1,26 +1,26 @@
 import { css } from 'lit';
 const CalloutStyles = css `
   .callout {
-    background: var(--callout-accent-background);
-    border: 1px solid var(--callout-accent-border);
-    color: var(--callout-accent-text);
+    background: var(--callout-info-background);
+    border: 1px solid var(--callout-info-border);
+    color: var(--callout-info-text);
     padding: 8px;
     border-radius: var(--card-inner-border-radius);
     display: flex;
     font-size: 0.9rem;
     gap: 8px;
-    align-items: flex-start;
+    align-items: center;
     max-width: 100%;
     height: fit-content;
-    &.red {
-      background: var(--callout-red-background);
-      border: 1px solid var(--callout-red-border);
-      color: var(--callout-red-text);
+    &.error {
+      background: var(--callout-error-background);
+      border: 1px solid var(--callout-error-border);
+      color: var(--callout-warn-text);
     }
-    &.orange {
-      background: var(--callout-orange-background);
-      border: 1px solid var(--callout-orange-border);
-      color: var(--callout-orange-text);
+    &.warn {
+      background: var(--callout-warn-background);
+      border: 1px solid var(--callout-warn-border);
+      color: var(--callout-warn-text);
     }
     &.small {
       width: 100%;

package/dist/styles/callout.js.map

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}
+{"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-info-background);\n    border: 1px solid var(--callout-info-border);\n    color: var(--callout-info-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: center;\n    max-width: 100%;\n    height: fit-content;\n    &.error {\n      background: var(--callout-error-background);\n      border: 1px solid var(--callout-error-border);\n      color: var(--callout-warn-text);\n    }\n    &.warn {\n      background: var(--callout-warn-background);\n      border: 1px solid var(--callout-warn-border);\n      color: var(--callout-warn-text);\n    }\n    &.small {\n      width: 100%;\n      padding: 6px;\n      font-size: 0.7rem;\n    }\n  }\n`;\n\nexport default CalloutStyles;\n"]}