npm - @corti/dictation-web - Versions diffs - 0.0.1 - Mend

@corti/dictation-web 0.0.1

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 (121) hide show

package/.editorconfig +29 -0
package/.eslintrc.json +16 -0
package/.husky/pre-commit +1 -0
package/.storybook/main.js +8 -0
package/README.md +120 -0
package/demo/index.html +98 -0
package/dist/src/CortiDictation.d.ts +19 -0
package/dist/src/CortiDictation.js +137 -0
package/dist/src/CortiDictation.js.map +1 -0
package/dist/src/DictationService.d.ts +13 -0
package/dist/src/DictationService.js +70 -0
package/dist/src/DictationService.js.map +1 -0
package/dist/src/RecorderManager.d.ts +20 -0
package/dist/src/RecorderManager.js +85 -0
package/dist/src/RecorderManager.js.map +1 -0
package/dist/src/audioRecorderManager.d.ts +17 -0
package/dist/src/audioRecorderManager.js +78 -0
package/dist/src/audioRecorderManager.js.map +1 -0
package/dist/src/audioService.d.ts +6 -0
package/dist/src/audioService.js +21 -0
package/dist/src/audioService.js.map +1 -0
package/dist/src/componentStyles.d.ts +1 -0
package/dist/src/componentStyles.js +51 -0
package/dist/src/componentStyles.js.map +1 -0
package/dist/src/components/audio-visualiser.d.ts +12 -0
package/dist/src/components/audio-visualiser.js +60 -0
package/dist/src/components/audio-visualiser.js.map +1 -0
package/dist/src/components/settings-menu.d.ts +15 -0
package/dist/src/components/settings-menu.js +148 -0
package/dist/src/components/settings-menu.js.map +1 -0
package/dist/src/components/visualiser.d.ts +7 -0
package/dist/src/components/visualiser.js +62 -0
package/dist/src/components/visualiser.js.map +1 -0
package/dist/src/constants.d.ts +3 -0
package/dist/src/constants.js +9 -0
package/dist/src/constants.js.map +1 -0
package/dist/src/corti-dictation.d.ts +1 -0
package/dist/src/corti-dictation.js +3 -0
package/dist/src/corti-dictation.js.map +1 -0
package/dist/src/dictationService.d.ts +13 -0
package/dist/src/dictationService.js +70 -0
package/dist/src/dictationService.js.map +1 -0
package/dist/src/icons/icons.d.ts +17 -0
package/dist/src/icons/icons.js +153 -0
package/dist/src/icons/icons.js.map +1 -0
package/dist/src/icons/index.d.ts +0 -0
package/dist/src/icons/index.js +2 -0
package/dist/src/icons/index.js.map +1 -0
package/dist/src/icons/micOn.d.ts +7 -0
package/dist/src/icons/micOn.js +25 -0
package/dist/src/icons/micOn.js.map +1 -0
package/dist/src/index.d.ts +20 -0
package/dist/src/index.js +147 -0
package/dist/src/index.js.map +1 -0
package/dist/src/mediaRecorderService.d.ts +6 -0
package/dist/src/mediaRecorderService.js +31 -0
package/dist/src/mediaRecorderService.js.map +1 -0
package/dist/src/mic-selector.d.ts +18 -0
package/dist/src/mic-selector.js +131 -0
package/dist/src/mic-selector.js.map +1 -0
package/dist/src/settings-menu.d.ts +18 -0
package/dist/src/settings-menu.js +131 -0
package/dist/src/settings-menu.js.map +1 -0
package/dist/src/settings-popover.d.ts +18 -0
package/dist/src/settings-popover.js +131 -0
package/dist/src/settings-popover.js.map +1 -0
package/dist/src/settings.d.ts +18 -0
package/dist/src/settings.js +131 -0
package/dist/src/settings.js.map +1 -0
package/dist/src/styles/ComponentStyles.d.ts +2 -0
package/dist/src/styles/ComponentStyles.js +52 -0
package/dist/src/styles/ComponentStyles.js.map +1 -0
package/dist/src/styles/buttons.d.ts +2 -0
package/dist/src/styles/buttons.js +58 -0
package/dist/src/styles/buttons.js.map +1 -0
package/dist/src/styles/callout.d.ts +2 -0
package/dist/src/styles/callout.js +26 -0
package/dist/src/styles/callout.js.map +1 -0
package/dist/src/styles/select.d.ts +2 -0
package/dist/src/styles/select.js +36 -0
package/dist/src/styles/select.js.map +1 -0
package/dist/src/styles/theme.d.ts +2 -0
package/dist/src/styles/theme.js +74 -0
package/dist/src/styles/theme.js.map +1 -0
package/dist/src/types.d.ts +20 -0
package/dist/src/types.js +2 -0
package/dist/src/types.js.map +1 -0
package/dist/src/utils.d.ts +31 -0
package/dist/src/utils.js +77 -0
package/dist/src/utils.js.map +1 -0
package/dist/stories/index.stories.d.ts +33 -0
package/dist/stories/index.stories.js +37 -0
package/dist/stories/index.stories.js.map +1 -0
package/dist/test/corti-dictation.test.d.ts +1 -0
package/dist/test/corti-dictation.test.js +100 -0
package/dist/test/corti-dictation.test.js.map +1 -0
package/dist/tsconfig.tsbuildinfo +1 -0
package/docs/DEV_README.md +80 -0
package/package.json +92 -0
package/src/DictationService.ts +99 -0
package/src/RecorderManager.ts +114 -0
package/src/audioService.ts +25 -0
package/src/components/audio-visualiser.ts +56 -0
package/src/components/settings-menu.ts +152 -0
package/src/constants.ts +10 -0
package/src/corti-dictation.ts +3 -0
package/src/icons/icons.ts +141 -0
package/src/icons/index.ts +0 -0
package/src/index.ts +154 -0
package/src/styles/ComponentStyles.ts +53 -0
package/src/styles/buttons.ts +59 -0
package/src/styles/callout.ts +27 -0
package/src/styles/select.ts +37 -0
package/src/styles/theme.ts +75 -0
package/src/types.ts +28 -0
package/src/utils.ts +83 -0
package/stories/index.stories.ts +60 -0
package/test/corti-dictation.test.ts +124 -0
package/tsconfig.json +22 -0
package/web-dev-server.config.js +27 -0
package/web-test-runner.config.js +41 -0

package/.editorconfig ADDED Viewed

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+root = true
+[*]
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+[*.md]
+trim_trailing_whitespace = false
+[*.json]
+indent_size = 2
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

package/.eslintrc.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "plugins": ["@typescript-eslint", "html"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "import/extensions": "off"
+      }
+    }
+  ]
+}

package/.husky/pre-commit ADDED Viewed

	@@ -0,0 +1 @@
1	+ ./node_modules/.bin/lint-staged

package/.storybook/main.js ADDED Viewed

@@ -0,0 +1,8 @@
+const config = {
+  stories: ['../**/dist/stories/*.stories.{js,md,mdx}'],
+  framework: {
+    name: '@web/storybook-framework-web-components',
+  },
+};
+export default config;

package/README.md ADDED Viewed

@@ -0,0 +1,120 @@
+# 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:
+```html
+<script type="module" src="path-to/corti-dictation.js"></script>
+```
+---
+## Usage
+### 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>
+  <corti-dictation></corti-dictation>
+  <textarea id="transcript" placeholder="Transcript will appear here..."></textarea>
+  <script type="module">
+    import './path-to/corti-dictation.js';
+    const dictationEl = document.querySelector('corti-dictation');
+    // Provide server configuration
+    dictationEl.serverConfig = {
+      environment: "dev-weu",
+      tenant: "copsdev",
+      token: "your-api-token"
+    };
+    // 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. |
+| `serverConfig`  | Object  | Server authentication and API settings. Must include `environment`, `tenant`, and `token`. |
+### Methods
+| 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. |
+---
+## Authentication
+This SDK does not handle OAuth 2.0 authentication. The client must provide an API key or access token in `serverConfig.token`.
+Example:
+```js
+dictationEl.serverConfig = {
+  environment: "prod-eu",
+  tenant: "your-tenant-id",
+  token: "your-api-key"
+};
+```
+---
+## Notes
+- Ensure the provided API token is valid.
+- The component requires microphone access permissions.
+- Works in modern browsers that support Web Components and MediaRecorder API.
+---
+## License
+This SDK is not licensed.
+---
+## Developer Guide
+See [Developer Setup](docs/DEV_README.md) for installation and development details.
+---
+## Support
+For issues or questions, contact **Corti Support** at [support@corti.ai](mailto:support@corti.ai).

package/demo/index.html ADDED Viewed

@@ -0,0 +1,98 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+  <style>
+    body {
+      background: #fafafa;
+      font-family: Arial, sans-serif;
+      margin: 20px;
+    }
+    /* Dark mode support */
+    @media (prefers-color-scheme: dark) {
+      body {
+        background: #1c1e2b;
+        color: #fff;
+      }
+      textarea {
+        background: #333;
+        color: #fff;
+      }
+    }
+    textarea {
+      width: 100%;
+      max-width: 800px;
+      height: 150px;
+      margin-top: 20px;
+      padding: 10px;
+      font-size: 14px;
+    }
+    #interimTranscript {
+      background: #333333aa;
+      color: #fff;
+      font-size: 24px;
+      margin-top: 10px;
+      position: fixed;
+      bottom: 40px;
+      left: 50%;
+      transform: translateX(-50%);
+      padding: 10px;
+      display: none;
+    }
+  </style>
+</head>
+<body>
+  <!-- Directly using the custom element without Lit -->
+  <corti-dictation></corti-dictation>
+  <!-- Textarea to display transcript text -->
+  <textarea id="transcript" placeholder="Transcript will appear here..."></textarea>
+  <div id="interimTranscript"></div>
+  <script type="module">
+    // Import the custom component (assumes corti-dictation.js registers the element)
+    import '../dist/src/corti-dictation.js';
+    // Server configuration for the dictation component
+    const serverConfig = {
+      environment: "a",
+      tenant: "a",
+      token: "a",
+    };
+    // Get the corti-dictation element and assign the server config
+    const dictationEl = document.querySelector('corti-dictation');
+    dictationEl.serverConfig = serverConfig;
+    // Listen to events from the dictation component
+    dictationEl.addEventListener('recording-state-changed', (e) => {
+      console.log('Recording state:', e.detail.state);
+    });
+    dictationEl.addEventListener('recording-device-changed', (e) => {
+      console.log('Recording Device Changed:', e.detail);
+    });
+    dictationEl.addEventListener('error', (e) => {
+      console.error(e.detail);
+    });
+    // Update the textarea with transcript text when received
+    dictationEl.addEventListener('transcript', (e) => {
+      const {data} = e.detail
+      const transcriptArea = document.getElementById('transcript');
+      const interimTranscript = document.getElementById('interimTranscript');
+      if(data.isFinal){
+        transcriptArea.value += data.text + " ";
+        interimTranscript.style.display = 'none';
+      } else {
+        interimTranscript.style.display = 'block';
+        interimTranscript.innerText = data.rawTranscriptText;
+      }
+    });
+  </script>
+</body>
+</html>

package/dist/src/CortiDictation.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import './components/settings-menu';
+import './components/audio-visualiser';
+import './icons/icons';
+import { DictationConfig, ServerConfig } from './types';
+export declare class CortiDictation extends LitElement {
+    static styles: import("lit").CSSResult[];
+    devices: MediaDeviceInfo[];
+    recordingState: string;
+    dictationConfig: DictationConfig;
+    serverConfig: ServerConfig;
+    private _audioLevel;
+    private recorderManager;
+    connectedCallback(): Promise<void>;
+    toggleRecording(): void;
+    _toggleRecording(): void;
+    _onRecordingDeviceChanged(event: Event): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/CortiDictation.js ADDED Viewed

@@ -0,0 +1,137 @@
+import { __decorate } from "tslib";
+// corti-dictation.ts
+import { html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { RecorderManager } from './RecorderManager';
+import './components/settings-menu';
+import './components/audio-visualiser';
+import './icons/icons';
+import ThemeStyles from './styles/theme';
+import ButtonStyles from './styles/buttons';
+import { componentStyles } from './componentStyles';
+import { DEFAULT_DICTATION_CONFIG } from './constants';
+import CalloutStyles from './styles/callout';
+export class CortiDictation extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.devices = [];
+        this.recordingState = 'stopped';
+        this.dictationConfig = DEFAULT_DICTATION_CONFIG;
+        this.serverConfig = {};
+        this._audioLevel = 0;
+        this.recorderManager = new RecorderManager();
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        await this.recorderManager.initialize();
+        this.devices = this.recorderManager.devices;
+        // Map event names to any extra handling logic
+        const eventHandlers = {
+            'recording-state-changed': (e) => {
+                this.recordingState = e.detail.state;
+            },
+            'audio-level-changed': (e) => {
+                this._audioLevel = e.detail.audioLevel;
+                this.requestUpdate();
+            },
+        };
+        const eventsToRelay = [
+            'recording-state-changed',
+            'audio-level-changed',
+            'audio-packet',
+            'transcript',
+        ];
+        eventsToRelay.forEach((eventName) => {
+            this.recorderManager.addEventListener(eventName, (e) => {
+                const customEvent = e;
+                // Perform any additional handling if defined
+                if (eventHandlers[eventName]) {
+                    eventHandlers[eventName](customEvent);
+                }
+                // Re-dispatch the event from the component
+                this.dispatchEvent(new CustomEvent(eventName, {
+                    detail: customEvent.detail,
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+        });
+    }
+    toggleRecording() {
+        this._toggleRecording();
+    }
+    _toggleRecording() {
+        if (this.recordingState === 'recording') {
+            this.recorderManager.stopRecording();
+        }
+        else if (this.recordingState === 'stopped') {
+            this.recorderManager.startRecording({ dictationConfig: this.dictationConfig, serverConfig: this.serverConfig });
+        }
+    }
+    // Handle device change events if needed
+    async _onRecordingDeviceChanged(event) {
+        const customEvent = event;
+        this.recorderManager.selectedDevice = customEvent.detail.deviceId;
+        if (this.recordingState === 'recording') {
+            await this.recorderManager.stopRecording();
+            await this.recorderManager.startRecording({ dictationConfig: this.dictationConfig, serverConfig: this.serverConfig });
+        }
+    }
+    render() {
+        const isConfigured = this.serverConfig && this.serverConfig.token && this.serverConfig.environment && this.serverConfig.tenant;
+        if (!isConfigured) {
+            return html `
+        <div class="wrapper">
+          <div class="callout red tiny">
+            Please configure the server settings in the parent component.
+          </div>
+        </div>
+      `;
+        }
+        const isLoading = this.recordingState === 'initializing' ||
+            this.recordingState === 'stopping';
+        const isRecording = this.recordingState === 'recording';
+        return html `
+      <div class="wrapper">
+        <button
+          @click=${this._toggleRecording}
+          class=${isRecording ? 'red' : 'accent'}
+        >
+          ${isLoading
+            ? html `<icon-loading-spinner></icon-loading-spinner>`
+            : isRecording
+                ? html `<icon-recording></icon-recording>`
+                : html `<icon-mic-on></icon-mic-on>`}
+          <audio-visualiser
+            .level=${this._audioLevel}
+            .active=${isRecording}
+          ></audio-visualiser>
+        </button>
+        <settings-menu
+          .devices=${this.devices}
+          .selectedDevice=${this.recorderManager.selectedDevice}
+          ?settingsDisabled=${this.recordingState !== 'stopped'}
+          @recording-device-changed=${this._onRecordingDeviceChanged}
+        ></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);
+__decorate([
+    property({ type: Object })
+], CortiDictation.prototype, "serverConfig", void 0);
+__decorate([
+    state()
+], CortiDictation.prototype, "_audioLevel", void 0);
+//# sourceMappingURL=CortiDictation.js.map

package/dist/src/CortiDictation.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CortiDictation.js","sourceRoot":"","sources":["../../src/CortiDictation.ts"],"names":[],"mappings":"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","sourcesContent":["// corti-dictation.ts\nimport { html, LitElement, css } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { RecorderManager } from './RecorderManager';\nimport './components/settings-menu';\nimport './components/audio-visualiser';\nimport './icons/icons';\nimport ThemeStyles from './styles/theme';\nimport ButtonStyles from './styles/buttons';\nimport { componentStyles } from './componentStyles';\nimport { DictationConfig, ServerConfig } from './types';\nimport { DEFAULT_DICTATION_CONFIG } from './constants';\nimport CalloutStyles from './styles/callout';\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: Object })\n serverConfig: ServerConfig = {};\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 'audio-packet',\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.recordingState === 'recording') {\n this.recorderManager.stopRecording();\n } else if (this.recordingState === 'stopped') {\n this.recorderManager.startRecording({dictationConfig: this.dictationConfig, serverConfig: this.serverConfig});\n }\n }\n\n // Handle device change events if needed\n async _onRecordingDeviceChanged(event: Event) {\n const customEvent = event as CustomEvent;\n this.recorderManager.selectedDevice = customEvent.detail.deviceId;\n if (this.recordingState === 'recording') {\n await this.recorderManager.stopRecording();\n await this.recorderManager.startRecording({dictationConfig: this.dictationConfig, serverConfig: this.serverConfig});\n }\n }\n\n render() {\n\n const isConfigured = this.serverConfig && this.serverConfig.token && this.serverConfig.environment && this.serverConfig.tenant;\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"]}

package/dist/src/DictationService.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { DictationConfig, ServerConfig } from './types';
+export declare class DictationService extends EventTarget {
+    private mediaRecorder;
+    private webSocket;
+    private serverConfig;
+    private dictationConfig;
+    constructor(mediaStream: MediaStream, { dictationConfig, serverConfig, }: {
+        dictationConfig: DictationConfig;
+        serverConfig: ServerConfig;
+    });
+    startRecording(): void;
+    stopRecording(): Promise<void>;
+}

package/dist/src/DictationService.js ADDED Viewed

@@ -0,0 +1,70 @@
+export class DictationService extends EventTarget {
+    constructor(mediaStream, { dictationConfig, serverConfig, }) {
+        super();
+        this.mediaRecorder = new MediaRecorder(mediaStream);
+        this.serverConfig = serverConfig;
+        this.dictationConfig = dictationConfig;
+        this.mediaRecorder.ondataavailable = event => {
+            // if webSocket is open, send the data
+            if (this.webSocket?.readyState === WebSocket.OPEN) {
+                this.webSocket.send(event.data);
+            }
+        };
+    }
+    startRecording() {
+        const url = `wss://api.${this.serverConfig.environment}.corti.app/audio-bridge/v2/transcribe?tenant-name=${this.serverConfig.tenant}&token=Bearer%20${this.serverConfig.token}`;
+        this.webSocket = new WebSocket(url);
+        this.webSocket.onopen = () => {
+            this.webSocket.send(JSON.stringify({
+                type: 'config',
+                configuration: this.dictationConfig,
+            }));
+        };
+        this.webSocket.onmessage = event => {
+            const message = JSON.parse(event.data);
+            if (message.type === 'config') {
+                this.mediaRecorder.start(250);
+            }
+            else if (message.type === 'transcript') {
+                this.dispatchEvent(new CustomEvent('transcript', {
+                    detail: message,
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        };
+        this.webSocket.onerror = event => {
+            this.dispatchEvent(new CustomEvent('error', {
+                detail: event,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.webSocket.onclose = (event) => {
+            this.dispatchEvent(new CustomEvent('stream-closed', {
+                detail: event,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    async stopRecording() {
+        this.mediaRecorder.stop();
+        if (this.webSocket?.readyState === WebSocket.OPEN) {
+            this.webSocket.send(JSON.stringify({
+                type: 'end',
+            }));
+        }
+        const timeOut = setTimeout(() => {
+            if (this.webSocket?.readyState === WebSocket.OPEN) {
+                this.webSocket.close();
+            }
+        }, 10000);
+        // This implementation should be replaced by handling a proper 'ended' message from the server
+        this.webSocket.onclose = () => {
+            this.webSocket?.close();
+            clearTimeout(timeOut);
+        };
+    }
+}
+//# sourceMappingURL=DictationService.js.map

package/dist/src/DictationService.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DictationService.js","sourceRoot":"","sources":["../../src/DictationService.ts"],"names":[],"mappings":"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","sourcesContent":["import { DictationConfig, ServerConfig } from './types';\n\nexport class DictationService extends EventTarget {\n private mediaRecorder: MediaRecorder;\n\n private webSocket!: WebSocket;\n\n private serverConfig!: ServerConfig;\n\n private dictationConfig!: DictationConfig;\n\n constructor(\n mediaStream: MediaStream,\n {\n dictationConfig,\n serverConfig,\n }: { dictationConfig: DictationConfig; serverConfig: ServerConfig },\n ) {\n super();\n this.mediaRecorder = new MediaRecorder(mediaStream);\n this.serverConfig = serverConfig;\n this.dictationConfig = dictationConfig;\n this.mediaRecorder.ondataavailable = event => {\n // if webSocket is open, send the data\n if (this.webSocket?.readyState === WebSocket.OPEN) {\n this.webSocket.send(event.data);\n }\n };\n }\n\n public startRecording() {\n const url = `wss://api.${this.serverConfig.environment}.corti.app/audio-bridge/v2/transcribe?tenant-name=${this.serverConfig.tenant}&token=Bearer%20${this.serverConfig.token}`;\n this.webSocket = new WebSocket(url);\n this.webSocket.onopen = () => {\n this.webSocket.send(\n JSON.stringify({\n type: 'config',\n configuration: this.dictationConfig,\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.dispatchEvent(\n new CustomEvent('transcript', {\n detail: message,\n bubbles: true,\n composed: true,\n }),\n );\n }\n };\n this.webSocket.onerror = event => {\n this.dispatchEvent(\n new CustomEvent('error', {\n detail: event,\n bubbles: true,\n composed: true,\n }),\n );\n };\n this.webSocket.onclose = (event) => {\n this.dispatchEvent(\n new CustomEvent('stream-closed', {\n detail: event,\n bubbles: true,\n composed: true,\n }),\n );\n };\n }\n\n public async stopRecording() {\n this.mediaRecorder.stop();\n\n if (this.webSocket?.readyState === WebSocket.OPEN) {\n this.webSocket.send(\n JSON.stringify({\n type: 'end',\n }),\n );\n }\n\n const timeOut: NodeJS.Timeout = setTimeout(() => {\n if (this.webSocket?.readyState === WebSocket.OPEN) {\n this.webSocket.close();\n }\n }, 10000);\n\n // This implementation should be replaced by handling a proper 'ended' message from the server\n this.webSocket.onclose = () => {\n this.webSocket?.close();\n clearTimeout(timeOut);\n };\n }\n}\n"]}

package/dist/src/RecorderManager.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import type { DictationConfig, RecordingState, ServerConfig } from './types';
+export declare class RecorderManager extends EventTarget {
+    devices: MediaDeviceInfo[];
+    selectedDevice: string;
+    recordingState: RecordingState;
+    private _mediaStream;
+    private _audioService;
+    private _dictationService;
+    private _visualiserInterval?;
+    initialize(): Promise<{
+        devices: MediaDeviceInfo[];
+        defaultDeviceId?: string;
+    }>;
+    startRecording(params: {
+        dictationConfig: DictationConfig;
+        serverConfig: ServerConfig;
+    }): Promise<void>;
+    stopRecording(): Promise<void>;
+    private _updateRecordingState;
+}

package/dist/src/RecorderManager.js ADDED Viewed

@@ -0,0 +1,85 @@
+import { getAudioDevices } from './utils';
+import { AudioService } from './audioService';
+import { DictationService } from './DictationService';
+export class RecorderManager extends EventTarget {
+    constructor() {
+        super(...arguments);
+        this.devices = [];
+        this.selectedDevice = '';
+        this.recordingState = 'stopped';
+        this._mediaStream = null;
+        this._audioService = null;
+        this._dictationService = null;
+    }
+    async initialize() {
+        const deviceResponse = await getAudioDevices();
+        this.devices = deviceResponse.devices;
+        this.selectedDevice = deviceResponse.defaultDeviceId || '';
+        return deviceResponse;
+    }
+    async startRecording(params) {
+        this._updateRecordingState('initializing');
+        try {
+            this._mediaStream = await navigator.mediaDevices.getUserMedia({
+                audio: { deviceId: this.selectedDevice },
+            });
+            this._audioService = new AudioService(this._mediaStream);
+            this._dictationService = new DictationService(this._mediaStream, params);
+            // Forward custom events from dictation service
+            this._dictationService.addEventListener('error', e => this.dispatchEvent(new CustomEvent('error', {
+                detail: e.detail,
+                bubbles: true,
+                composed: true,
+            })));
+            this._dictationService.addEventListener('stream-closed', () => this.stopRecording());
+            this._dictationService.addEventListener('transcript', e => this.dispatchEvent(new CustomEvent('transcript', {
+                detail: e.detail,
+                bubbles: true,
+                composed: true,
+            })));
+        }
+        catch (error) {
+            this.dispatchEvent(new CustomEvent('error', {
+                detail: error,
+                bubbles: true,
+                composed: true,
+            }));
+            this._updateRecordingState('stopped');
+            return;
+        }
+        this._dictationService?.startRecording();
+        this._updateRecordingState('recording');
+        this._visualiserInterval = window.setInterval(() => {
+            const level = this._audioService
+                ? this._audioService.getAudioLevel() * 3
+                : 0;
+            this.dispatchEvent(new CustomEvent('audio-level-changed', {
+                detail: { audioLevel: level },
+                bubbles: true,
+                composed: true,
+            }));
+        }, 150);
+    }
+    async stopRecording() {
+        this._updateRecordingState('stopping');
+        if (this._visualiserInterval) {
+            clearInterval(this._visualiserInterval);
+            this._visualiserInterval = undefined;
+        }
+        if (this._mediaStream) {
+            this._mediaStream.getTracks().forEach(track => track.stop());
+            this._mediaStream = null;
+        }
+        await this._dictationService?.stopRecording();
+        this._updateRecordingState('stopped');
+    }
+    _updateRecordingState(state) {
+        this.recordingState = state;
+        this.dispatchEvent(new CustomEvent('recording-state-changed', {
+            detail: { state },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+}
+//# sourceMappingURL=RecorderManager.js.map