@corti/dictation-web 0.0.1

package/src/styles/theme.ts

@@ -0,0 +1,75 @@
+import { css } from 'lit';
+
+const ThemeStyles = css`
+  :host {
+    /* Component Defaults */
+    --component-font-family: 'Segoe UI', Roboto, sans-serif;
+    --component-text-color: #333;
+
+    /* Card Defaults */
+    --card-background: #fff;
+    --card-border-color: #ddd;
+    --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-accent-background: #007bff;
+    --action-accent-background-hover: #0056b3;
+    --action-accent-text-color: #fff;
+
+    --action-red-background: #dc3545;
+    --action-red-background-hover: #bd2130;
+    --action-red-text-color: #fff;
+
+    /* Callout Defaults */
+    --callout-accent-background: #007bff33;
+    --callout-accent-border: #007bff99;
+    --callout-accent-text: #007bff;
+
+    --callout-red-background: #dc354533;
+    --callout-red-border: #dc354599;
+    --callout-red-text: #dc3545;
+
+    --callout-orange-background: #fd7e1433;
+    --callout-orange-border: #fd7e1499;
+    --callout-orange-text: #fd7e14;
+
+    /* Visualiser Defaults */
+    --visualiser-background: #e0e0e0;
+    --visualiser-level-color: #28a745;
+  }
+
+  @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);
+    color: var(--component-text-color);
+  }
+`;
+
+export default ThemeStyles;

package/src/types.ts

@@ -0,0 +1,28 @@
+export type RecordingState =
+  | 'initializing'
+  | 'recording'
+  | 'stopping'
+  | 'stopped';
+
+export interface Command {
+  command: string;
+  action: string;
+  keywords: string[];
+}
+
+export interface DictationConfig {
+  primaryLanguage: string;
+  interimResults: boolean;
+  spokenPunctuation: boolean;
+  automaticPunctuation: boolean;
+  model: string;
+  commands?: Command[];
+}
+
+export type PartialDictationConfig = Partial<DictationConfig>;
+
+export interface ServerConfig {
+  environment?: string;
+  tenant?: string;
+  token?: string;
+}

package/src/utils.ts

@@ -0,0 +1,83 @@
+/* eslint-disable no-console */
+/**
+ * Returns the localized name of a language given its BCP-47 code.
+ *
+ * @param languageCode - The BCP-47 language code (e.g. "en")
+ * @returns The localized language name (e.g. "English") or the original code if unavailable.
+ */
+export function getLanguageName(languageCode: string): string {
+  const userLocale = navigator.language || 'en';
+  const displayNames = new Intl.DisplayNames([userLocale], {
+    type: 'language',
+  });
+  const languageName = displayNames.of(languageCode);
+  return languageName || languageCode;
+}
+
+/**
+ * Requests access to the microphone.
+ *
+ * This function checks if the microphone permission is in "prompt" state, then requests
+ * access and stops any active tracks immediately. It also logs if permission is already granted.
+ *
+ * @returns A promise that resolves when the permission request is complete.
+ */
+export async function requestMicAccess(): Promise<void> {
+  try {
+    // Fallback if Permissions API is not available
+    if (!navigator.permissions) {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      stream.getTracks().forEach(track => track.stop());
+      return;
+    }
+
+    const permissionStatus = await navigator.permissions.query({
+      // eslint-disable-next-line no-undef
+      name: 'microphone' as PermissionName,
+    });
+
+    if (permissionStatus.state === 'prompt') {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      stream.getTracks().forEach(track => track.stop());
+    } else if (permissionStatus.state === 'denied') {
+      console.warn('Microphone permission is denied.');
+    }
+  } catch (error) {
+    console.error('Error checking/requesting microphone permission:', error);
+  }
+}
+
+/**
+ * Retrieves available audio input devices.
+ *
+ * This function uses the mediaDevices API to enumerate devices and filters out those
+ * which are audio inputs. In some browsers, you may need to request user media before
+ * device labels are populated.
+ *
+ * @returns A promise that resolves with an object containing:
+ *  - `devices`: an array of MediaDeviceInfo objects for audio inputs.
+ *  - `defaultDeviceId`: the deviceId of the first audio input, if available.
+ */
+export async function getAudioDevices(): Promise<{
+  devices: MediaDeviceInfo[];
+  defaultDeviceId?: string;
+}> {
+  if (!navigator.mediaDevices?.enumerateDevices) {
+    console.error('Media devices API not supported.');
+    return { devices: [] };
+  }
+
+  await requestMicAccess();
+
+  try {
+    // 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 };
+  } catch (error) {
+    console.error('Error enumerating devices:', error);
+    return { devices: [] };
+  }
+}

package/stories/index.stories.ts

@@ -0,0 +1,60 @@
+import { html, TemplateResult } from 'lit';
+import '../src/corti-dictation.js';
+
+export default {
+  title: 'CortiDictation',
+  component: 'corti-dictation',
+  argTypes: {
+    header: { control: 'text' },
+    counter: { control: 'number' },
+    textColor: { control: 'color' },
+  },
+};
+
+interface Story<T> {
+  (args: T): TemplateResult;
+  args?: Partial<T>;
+  argTypes?: Record<string, unknown>;
+}
+
+interface ArgTypes {
+  header?: string;
+  counter?: number;
+  textColor?: string;
+  slot?: TemplateResult;
+}
+
+const Template: Story<ArgTypes> = ({
+  header = 'Hello world',
+  counter = 5,
+  textColor,
+  slot,
+}: ArgTypes) => html`
+  <corti-dictation
+    style="--corti-dictation-text-color: ${textColor || 'black'}"
+    .header=${header}
+    .counter=${counter}
+  >
+    ${slot}
+  </corti-dictation>
+`;
+
+export const Regular = Template.bind({});
+
+export const CustomHeader = Template.bind({});
+CustomHeader.args = {
+  header: 'My header',
+};
+
+export const CustomCounter = Template.bind({});
+CustomCounter.args = {
+  counter: 123456,
+};
+
+export const SlottedContent = Template.bind({});
+SlottedContent.args = {
+  slot: html`<p>Slotted content</p>`,
+};
+SlottedContent.argTypes = {
+  slot: { table: { disable: true } },
+};

package/test/corti-dictation.test.ts

@@ -0,0 +1,124 @@
+import { html } from 'lit';
+import { fixture, expect, oneEvent } from '@open-wc/testing';
+import sinon from 'sinon';
+import { CortiDictation } from '../src/index.js';
+import '../src/corti-dictation.js';
+
+// Stub class for RecorderManager
+class StubRecorderManager extends EventTarget {
+  devices: MediaDeviceInfo[] = [];
+
+  selectedDevice = '';
+
+  startRecording = sinon.spy();
+
+  stopRecording = sinon.spy();
+
+  async initialize() {
+    // Simulate async initialization.
+  }
+}
+
+describe('CortiDictation', () => {
+  let stubRecorder: StubRecorderManager;
+
+  beforeEach(() => {
+    stubRecorder = new StubRecorderManager();
+  });
+
+  it('renders a callout warning if serverConfig is not configured', async () => {
+    const el = await fixture<CortiDictation>(
+      html`<corti-dictation></corti-dictation>`
+    );
+    // Override the recorderManager to avoid real initialization.
+    (el as any).recorderManager = stubRecorder;
+    el.serverConfig = {}; // Missing required keys.
+    await el.updateComplete;
+    const callout = el.shadowRoot?.querySelector('.callout');
+    expect(callout).to.exist;
+    expect(el.shadowRoot?.textContent).to.include(
+      'Please configure the server settings in the parent component'
+    );
+  });
+
+  it('renders the recording icon when recordingState is "recording"', async () => {
+    const configured = { token: 'abc', environment: 'prod', tenant: '123' };
+    const el = await fixture<CortiDictation>(
+      html`<corti-dictation></corti-dictation>`
+    );
+    (el as any).recorderManager = stubRecorder;
+    el.serverConfig = configured;
+    el.recordingState = 'recording';
+    await el.updateComplete;
+    const recordingIcon = el.shadowRoot?.querySelector('icon-recording');
+    expect(recordingIcon).to.exist;
+  });
+
+  it('calls startRecording when button is clicked and state is "stopped"', async () => {
+    const configured = { token: 'abc', environment: 'prod', tenant: '123' };
+    const el = await fixture<CortiDictation>(
+      html`<corti-dictation></corti-dictation>`
+    );
+    (el as any).recorderManager = stubRecorder;
+    el.serverConfig = configured;
+    el.recordingState = 'stopped';
+    await el.updateComplete;
+    const button = el.shadowRoot!.querySelector('button')!;
+    button.click();
+    expect(stubRecorder.startRecording.calledOnce).to.be.true;
+    // Check that startRecording was called with a config object
+    const args = stubRecorder.startRecording.getCall(0).args[0];
+    expect(args).to.have.property('dictationConfig');
+    expect(args).to.have.property('serverConfig');
+  });
+
+  it('calls stopRecording when button is clicked and state is "recording"', async () => {
+    const configured = { token: 'abc', environment: 'prod', tenant: '123' };
+    const el = await fixture<CortiDictation>(
+      html`<corti-dictation></corti-dictation>`
+    );
+    (el as any).recorderManager = stubRecorder;
+    el.serverConfig = configured;
+    el.recordingState = 'recording';
+    await el.updateComplete;
+    const button = el.shadowRoot!.querySelector('button')!;
+    button.click();
+    expect(stubRecorder.stopRecording.calledOnce).to.be.true;
+  });
+
+  it('updates the audio level when an "audio-level-changed" event is dispatched', async () => {
+    const configured = { token: 'abc', environment: 'prod', tenant: '123' };
+    const el = await fixture<CortiDictation>(
+      html`<corti-dictation></corti-dictation>`
+    );
+    (el as any).recorderManager = stubRecorder;
+    el.serverConfig = configured;
+    el.recordingState = 'recording';
+    await el.updateComplete;
+    const testLevel = 42;
+    const event = new CustomEvent('audio-level-changed', { detail: { audioLevel: testLevel } });
+    stubRecorder.dispatchEvent(event);
+    await el.updateComplete;
+    const audioVisualiser = el.shadowRoot?.querySelector('audio-visualiser');
+    expect(audioVisualiser).to.exist;
+    expect((audioVisualiser as any).level).to.equal(testLevel);
+  });
+
+  it('re-dispatches recorderManager events', async () => {
+    const configured = { token: 'abc', environment: 'prod', tenant: '123' };
+    const el = await fixture<CortiDictation>(
+      html`<corti-dictation></corti-dictation>`
+    );
+    (el as any).recorderManager = stubRecorder;
+    el.serverConfig = configured;
+    el.recordingState = 'stopped';
+    await el.updateComplete;
+    // Listen for a re-dispatched event from the component.
+    setTimeout(() => {
+      const event = new CustomEvent('transcript', { detail: { transcript: 'hello' } });
+      stubRecorder.dispatchEvent(event);
+    });
+    const dispatchedEvent = (await oneEvent(el, 'transcript')) as CustomEvent;
+    expect(dispatchedEvent.detail.transcript).to.equal('hello');
+  });
+});

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "noEmitOnError": true,
+    "lib": ["es2021", "dom", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true,
+    "skipLibCheck": true
+  },
+  "include": ["**/*.ts"]
+}

package/web-dev-server.config.js

@@ -0,0 +1,27 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.lit] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.js

@@ -0,0 +1,41 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'Lit is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});