@corti/dictation-web 0.0.1

package/src/components/settings-menu.ts

@@ -0,0 +1,152 @@
+// mic-selector.ts
+import { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import ButtonStyles from '../styles/buttons';
+import SelectStyles from '../styles/select';
+import { LANGUAGES_SUPPORTED } from '../constants';
+import { getLanguageName } from '../utils';
+import CalloutStyles from '../styles/callout';
+
+@customElement('settings-menu')
+export class SettingsMenu extends LitElement {
+  @property({ type: Array })
+  devices: MediaDeviceInfo[] = [];
+
+  @property({ type: String })
+  selectedDevice: string = '';
+
+  @property({ type: String })
+  selectedLanguage: string = '';
+
+  @property({ type: Boolean })
+  settingsDisabled: boolean = false;
+
+  static styles: CSSResultGroup = [
+    css`
+      :host {
+        display: block;
+        font-family: var(--component-font-family);
+      }
+      /* Retain the anchor-name styling for this component */
+      #settings-popover-button {
+        anchor-name: --settings_popover_btn;
+      }
+      [popover] {
+        margin: 0;
+        padding: 16px;
+        border: 0;
+        background: var(--card-background);
+        border: 1px solid var(--card-border-color);
+        border-radius: var(--card-border-radius);
+        box-shadow: var(--card-box-shadow);
+        z-index: 1000;
+        max-width: 260px;
+        width: 100%;
+        min-width: 200px;
+        position-anchor: --settings_popover_btn;
+        position-area: bottom;
+        position-visibility: always;
+        /* inset: unset; */
+        transform: translateX(40%);
+        overflow-x: hidden;
+      }
+      .settings-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+      }
+    `,
+    ButtonStyles,
+    SelectStyles,
+    CalloutStyles,
+  ];
+
+  private _selectDevice(deviceId: string): void {
+    this.selectedDevice = deviceId;
+    // Find the device object
+    const device = this.devices.find(d => d.deviceId === deviceId);
+    this.dispatchEvent(
+      new CustomEvent('recording-device-changed', {
+        detail: device,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render(): TemplateResult {
+    return html`
+      <div class="mic-selector">
+        <button id="settings-popover-button" popovertarget="settings-popover">
+          <icon-settings></icon-settings>
+        </button>
+        <div id="settings-popover" popover>
+          <div class="settings-wrapper">
+            ${this.settingsDisabled
+              ? html`
+                  <div class="callout orange">
+                    Recording is in progress. Stop recording to change settings.
+                  </div>
+                `
+              : ''}
+            <div class="form-group">
+              <label id="device-select-label" for="device-select">
+                Recording Device
+              </label>
+              <select
+                id="device-select"
+                aria-labelledby="device-select-label"
+                @change=${(e: Event) => {
+                  this._selectDevice((e.target as HTMLSelectElement).value);
+                }}
+                ?disabled=${this.settingsDisabled}
+              >
+                ${this.devices.map(
+                  device => html`
+                    <option
+                      value=${device.deviceId}
+                      ?selected=${this.selectedDevice === device.deviceId}
+                    >
+                      ${device.label || 'Unknown Device'}
+                    </option>
+                  `,
+                )}
+              </select>
+            </div>
+            <div class="form-group">
+              <label id="language-select-label" for="language-select">
+                Dictation Language
+              </label>
+              <select
+                id="language-select"
+                aria-labelledby="language-select-label"
+                @change=${(e: Event) => {
+                  this._selectDevice((e.target as HTMLSelectElement).value);
+                }}
+                ?disabled=${this.settingsDisabled}
+              >
+                ${LANGUAGES_SUPPORTED.map(
+                  language => html`
+                    <option
+                      value=${language}
+                      ?selected=${this.selectedLanguage === language}
+                    >
+                      ${getLanguageName(language)}
+                    </option>
+                  `,
+                )}
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'settings-menu': SettingsMenu;
+  }
+}

package/src/constants.ts

@@ -0,0 +1,10 @@
+import { DictationConfig } from './types';
+
+export const LANGUAGES_SUPPORTED = ['en', 'da'];
+export const DEFAULT_DICTATION_CONFIG: DictationConfig = {
+  primaryLanguage: 'en',
+  interimResults: true,
+  spokenPunctuation: true,
+  automaticPunctuation: true,
+  model: 'others',
+};

package/src/corti-dictation.ts

@@ -0,0 +1,3 @@
+import CortiDictation from './index.js';
+
+window.customElements.define('corti-dictation', CortiDictation);

package/src/icons/icons.ts

@@ -0,0 +1,141 @@
+/* eslint-disable max-classes-per-file */
+import { LitElement, css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('icon-mic-on')
+export class IconMicOn extends LitElement {
+  render() {
+    return html`
+      <div style="display: flex">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="lucide lucide-mic"
+        >
+          <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+          <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+          <line x1="12" x2="12" y1="19" y2="22" />
+        </svg>
+      </div>
+    `;
+  }
+}
+
+@customElement('icon-mic-off')
+export class IconMicOff extends LitElement {
+  render() {
+    return html` <div style="display: flex">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-mic-off"
+      >
+        <line x1="2" x2="22" y1="2" y2="22" />
+        <path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" />
+        <path d="M5 10v2a7 7 0 0 0 12 5" />
+        <path d="M15 9.34V5a3 3 0 0 0-5.68-1.33" />
+        <path d="M9 9v3a3 3 0 0 0 5.12 2.12" />
+        <line x1="12" x2="12" y1="19" y2="22" />
+      </svg>
+    </div>`;
+  }
+}
+
+@customElement('icon-recording')
+export class IconRecording extends LitElement {
+  render() {
+    return html`
+      <div style="display: flex;">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="lucide lucide-circle-stop"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <rect x="9" y="9" width="6" height="6" rx="1" fill="currentColor" />
+        </svg>
+      </div>
+    `;
+  }
+}
+@customElement('icon-settings')
+export class IconSettings extends LitElement {
+  render() {
+    return html`<div style="display: flex">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-settings-2"
+      >
+        <path d="M20 7h-9" />
+        <path d="M14 17H5" />
+        <circle cx="17" cy="17" r="3" />
+        <circle cx="7" cy="7" r="3" />
+      </svg>
+    </div>`;
+  }
+}
+
+@customElement('icon-loading-spinner')
+export class IconLoadingSpinner extends LitElement {
+  static styles = css`
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+    .spin {
+      animation: spin 1s linear infinite;
+    }
+  `;
+
+  render() {
+    return html`<div style="display: flex">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-loader-circle spin"
+      >
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+      </svg>
+    </div>`;
+  }
+}

package/src/index.ts

@@ -0,0 +1,154 @@
+// 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 './styles/ComponentStyles';
+
+import { DictationConfig, ServerConfig } from './types';
+import { DEFAULT_DICTATION_CONFIG } from './constants';
+import CalloutStyles from './styles/callout';
+
+export class CortiDictation extends LitElement {
+  static styles = [ButtonStyles, ThemeStyles, ComponentStyles, CalloutStyles];
+
+  @property({ type: Array })
+  devices: MediaDeviceInfo[] = [];
+
+  @property({ type: String, reflect: true })
+  recordingState = 'stopped';
+
+  @property({ type: Object })
+  dictationConfig: DictationConfig = DEFAULT_DICTATION_CONFIG;
+
+  @property({ type: Object })
+  serverConfig: ServerConfig = {};
+
+  @state()
+  private _audioLevel = 0;
+
+  private 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: Record<string, (e: CustomEvent) => void> = {
+      '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',
+      'error',
+      'transcript',
+    ];
+
+    eventsToRelay.forEach(eventName => {
+      this.recorderManager.addEventListener(eventName, (e: Event) => {
+        const customEvent = e as CustomEvent;
+        // 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,
+          }),
+        );
+      });
+    });
+  }
+
+  public 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: Event) {
+    const customEvent = event as CustomEvent;
+    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>
+    `;
+  }
+}
+
+export default CortiDictation;

package/src/styles/ComponentStyles.ts

@@ -0,0 +1,53 @@
+import { css } from 'lit';
+
+const ComponentStyles = css`
+  .wrapper {
+    background-color: var(--card-background);
+    border: 1px solid var(--card-border-color);
+    border-radius: var(--card-border-radius);
+    box-shadow: var(--card-box-shadow);
+    padding: var(--card-padding);
+    display: flex;
+    width: min-content;
+    gap: 4px;
+    height: 46px;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+  h2 {
+    margin: 0 0 10px;
+    font-size: 1rem;
+    font-weight: 500;
+  }
+  label {
+    font-size: 0.9rem;
+    margin-right: 8px;
+  }
+  select {
+    padding: 4px 6px;
+    font-size: 0.9rem;
+    border: 1px solid var(--card-border-color);
+    border-radius: 4px;
+    background-color: var(--card-background);
+    color: inherit;
+  }
+
+  .visualiser {
+    width: 16px;
+    height: 100%;
+    background: var(--visualiser-background);
+    margin-top: 8px;
+    border-radius: 5px;
+    overflow: hidden;
+    display: flex;
+    align-items: flex-end;
+  }
+  .level {
+    height: 100%;
+    width: 100%;
+    background: var(--visualiser-level-color);
+    transition: width 0.1s ease-in-out;
+  }
+`;
+
+export default ComponentStyles;

package/src/styles/buttons.ts

@@ -0,0 +1,59 @@
+import { css } from 'lit';
+
+const ButtonStyles = css`
+  /* Default (plain) button styling */
+  button,
+  .button {
+    background: var(--action-plain-background);
+    /* border: 1px solid var(--action-plain-border-color); */
+    border: none;
+    color: var(--component-text-color);
+    cursor: pointer;
+    padding: 8px;
+    border-radius: var(--card-inner-border-radius);
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.3s ease;
+    font-family: var(--component-font-family);
+  }
+
+  button:hover,
+  .button:hover {
+    background: var(--action-plain-background-hover);
+  }
+
+  button:focus-visible {
+    outline: 2px solid var(--action-accent-background);
+    outline-offset: 2px;
+  }
+
+  /* Accent variant */
+  button.accent,
+  .button.accent {
+    background: var(--action-accent-background);
+    color: var(--action-accent-text-color);
+    border: none;
+  }
+
+  button.accent:hover,
+  .button.accent:hover {
+    background: var(--action-accent-background-hover);
+  }
+
+  /* Accent variant */
+  button.red,
+  .button.red {
+    background: var(--action-red-background);
+    color: var(--action-red-text-color);
+    border: none;
+  }
+
+  button.red:hover,
+  .button.red:hover {
+    background: var(--action-red-background-hover);
+  }
+`;
+
+export default ButtonStyles;

package/src/styles/callout.ts

@@ -0,0 +1,27 @@
+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);
+    padding: 8px;
+    border-radius: var(--card-inner-border-radius);
+    display: flex;
+    font-size: 0.9rem;
+    gap: 8px;
+    align-items: flex-start;
+    &.red {
+      background: var(--callout-red-background);
+      border: 1px solid var(--callout-red-border);
+      color: var(--callout-red-text);
+    }
+    &.orange {
+      background: var(--callout-orange-background);
+      border: 1px solid var(--callout-orange-border);
+      color: var(--callout-orange-text);
+    }
+  }
+`;
+
+export default CalloutStyles;

package/src/styles/select.ts

@@ -0,0 +1,37 @@
+import { css } from 'lit';
+
+const SelectStyles = css`
+  label {
+    display: block;
+    font-size: 0.8rem;
+    padding-bottom: 0.5rem;
+    font-weight: 500;
+    color: var(--component-text-color);
+    pointer-events: none;
+  }
+  select {
+    background: var(--card-background);
+    color: var(--component-text-color);
+    border: 1px solid var(--card-border-color);
+    padding: var(--card-padding);
+    border-radius: var(--card-inner-border-radius);
+    outline: none;
+    width: 100%;
+  }
+
+  select:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  select:hover {
+    background: var(--action-plain-background-hover);
+  }
+
+  select:focus-visible {
+    outline: 2px solid var(--action-accent-background);
+    /* outline-offset: 2px; */
+  }
+`;
+
+export default SelectStyles;