@dxos/react-ui-transcription 0.0.0

package/dist/lib/browser/index.mjs

@@ -0,0 +1,1002 @@
+// src/capture/create-transcriber.ts
+import { Transcriber } from "@dxos/transcription-pipeline";
+
+// src/capture/media-stream-recorder.ts
+import { WaveFile } from "wavefile";
+import { synchronized } from "@dxos/async";
+import { invariant } from "@dxos/invariant";
+import { log } from "@dxos/log";
+import { trace } from "@dxos/tracing";
+var __dxlog_file = "/Users/jdw/Code/dxos/packages/ui/react-ui-transcription/src/capture/media-stream-recorder.ts";
+function _ts_decorate(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+var MediaRecorderClass;
+var initializingPromise;
+var initializeExtendableMediaRecorder = async () => {
+  const { MediaRecorder, register } = await import("extendable-media-recorder");
+  const { connect } = await import("extendable-media-recorder-wav-encoder");
+  await register(await connect());
+  MediaRecorderClass = MediaRecorder;
+};
+var MediaStreamRecorder = class {
+  _mediaStreamTrack;
+  /**
+  * Default MediaRecorder implementation do not support wav encoding.
+  */
+  _config;
+  _mediaRecorder = void 0;
+  _header = void 0;
+  _onChunk;
+  constructor({ mediaStreamTrack, config }) {
+    this._mediaStreamTrack = mediaStreamTrack;
+    this._config = config;
+  }
+  get wavConfig() {
+    const settings = this._mediaStreamTrack.getSettings();
+    return {
+      channels: settings.channelCount ?? 1,
+      sampleRate: settings.sampleRate ?? 16e3,
+      bitDepthCode: settings.sampleSize ? String(settings.sampleSize) : "16"
+    };
+  }
+  get mediaStreamTrack() {
+    return this._mediaStreamTrack;
+  }
+  setOnChunk(onChunk) {
+    this._onChunk = onChunk;
+  }
+  // `@synchronized` serializes start/stop (they share the instance lock) so a rapid stop→start cycle
+  // (e.g. React StrictMode double-mount) cannot initiate a new WAV encoding before the previous one
+  // has flushed — which throws "Another request was made to initiate an encoding" and kills capture.
+  async start() {
+    await (initializingPromise ??= initializeExtendableMediaRecorder()).catch((err) => log.info("initializeExtendableMediaRecorder", {
+      err
+    }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 56, S: this }));
+    if (this._mediaRecorder?.state === "recording") {
+      return;
+    }
+    invariant(this._onChunk, "MediaStreamRecorder: onChunk is not set", { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 62, S: this, A: ["this._onChunk", "'MediaStreamRecorder: onChunk is not set'"] });
+    invariant(MediaRecorderClass, "MediaStreamRecorder: extendable-media-recorder not initialized", { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 63, S: this, A: ["MediaRecorderClass", "'MediaStreamRecorder: extendable-media-recorder not initialized'"] });
+    const stream = new MediaStream([
+      this._mediaStreamTrack
+    ]);
+    const recorder = new MediaRecorderClass(stream, {
+      mimeType: "audio/wav"
+    });
+    recorder.ondataavailable = (event) => this._ondataavailable(event);
+    this._mediaRecorder = recorder;
+    recorder.start(this._config.interval);
+  }
+  async stop() {
+    const recorder = this._mediaRecorder;
+    if (!recorder || recorder.state !== "recording") {
+      return;
+    }
+    await new Promise((resolve) => {
+      recorder.addEventListener("stop", () => resolve(), {
+        once: true
+      });
+      recorder.stop();
+    });
+    this._mediaRecorder = void 0;
+  }
+  async _ondataavailable(event) {
+    const blob = event.data;
+    const uint8Array = new Uint8Array(await blob.arrayBuffer());
+    const isHeader = uint8Array[0] === 82 && // R
+    uint8Array[1] === 73 && // I
+    uint8Array[2] === 70 && // F
+    uint8Array[3] === 70;
+    let wav;
+    if (isHeader) {
+      wav = new WaveFile(uint8Array);
+      this._header = uint8Array.slice(0, 44);
+    } else if (this._header) {
+      wav = new WaveFile(new Uint8Array([
+        ...this._header,
+        ...uint8Array
+      ]));
+    } else {
+      log.warn("MediaStreamRecorder: no header", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 108, S: this });
+      return;
+    }
+    this._onChunk({
+      timestamp: Date.now(),
+      data: wav.getSamples()
+    });
+  }
+};
+_ts_decorate([
+  synchronized
+], MediaStreamRecorder.prototype, "start", null);
+_ts_decorate([
+  synchronized
+], MediaStreamRecorder.prototype, "stop", null);
+_ts_decorate([
+  synchronized
+], MediaStreamRecorder.prototype, "_ondataavailable", null);
+MediaStreamRecorder = _ts_decorate([
+  trace.resource()
+], MediaStreamRecorder);
+
+// src/capture/create-transcriber.ts
+var RECORD_INTERVAL = 200;
+var PREFIXED_CHUNKS_AMOUNT = 10;
+var TRANSCRIBE_AFTER_CHUNKS_AMOUNT = 50;
+var createTranscriber = ({ audioStreamTrack, onSegments, transcriberConfig, recorderConfig, transcribe }) => new Transcriber({
+  config: {
+    transcribeAfterChunksAmount: TRANSCRIBE_AFTER_CHUNKS_AMOUNT,
+    prefixBufferChunksAmount: PREFIXED_CHUNKS_AMOUNT,
+    ...transcriberConfig
+  },
+  recorder: new MediaStreamRecorder({
+    mediaStreamTrack: audioStreamTrack,
+    config: {
+      interval: RECORD_INTERVAL,
+      ...recorderConfig
+    }
+  }),
+  onSegments,
+  transcribe
+});
+
+// src/components/MicSettings/MicSettings.tsx
+import React from "react";
+import { DropdownMenu, Icon, IconButton, useTranslation } from "@dxos/react-ui";
+var MicSettings = ({ translationNs, recordMode, entityExtraction, devices, selectedDeviceId, onRecordModeChange, onEntityExtractionChange, onSelectDevice }) => {
+  const { t } = useTranslation(translationNs);
+  return /* @__PURE__ */ React.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(IconButton, {
+    icon: "ph--caret-down--regular",
+    iconOnly: true,
+    label: t("recording-options.label"),
+    variant: "ghost",
+    // Half-width slim caret abutting the mic (split-control affordance).
+    classNames: "w-4",
+    "data-testid": "transcription.record.options"
+  })), /* @__PURE__ */ React.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React.createElement(DropdownMenu.Viewport, null, /* @__PURE__ */ React.createElement(DropdownMenu.GroupLabel, null, t("record-mode.label")), /* @__PURE__ */ React.createElement(SelectableItem, {
+    label: t("record-mode.toggle.label"),
+    selected: recordMode === "toggle",
+    onSelect: () => onRecordModeChange("toggle")
+  }), /* @__PURE__ */ React.createElement(SelectableItem, {
+    label: t("record-mode.hold.label"),
+    selected: recordMode === "hold",
+    onSelect: () => onRecordModeChange("hold")
+  }), /* @__PURE__ */ React.createElement(DropdownMenu.Separator, null), /* @__PURE__ */ React.createElement(DropdownMenu.GroupLabel, null, t("audio-device.label")), /* @__PURE__ */ React.createElement(SelectableItem, {
+    label: t("audio-device.default.label"),
+    selected: selectedDeviceId === "",
+    onSelect: () => onSelectDevice("")
+  }), devices.map((device) => /* @__PURE__ */ React.createElement(SelectableItem, {
+    key: device.deviceId,
+    label: device.label,
+    selected: selectedDeviceId === device.deviceId,
+    onSelect: () => onSelectDevice(device.deviceId)
+  })), /* @__PURE__ */ React.createElement(DropdownMenu.Separator, null), /* @__PURE__ */ React.createElement(DropdownMenu.CheckboxItem, {
+    checked: entityExtraction,
+    onCheckedChange: onEntityExtractionChange,
+    classNames: "gap-2",
+    "data-testid": "transcription.entity-extraction"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "grow truncate"
+  }, t("settings.entity-extraction.label")), /* @__PURE__ */ React.createElement(DropdownMenu.ItemIndicator, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--check--regular",
+    size: 4
+  })))), /* @__PURE__ */ React.createElement(DropdownMenu.Arrow, null))));
+};
+var SelectableItem = ({ label, selected, onSelect }) => /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+  classNames: "gap-2",
+  onSelect
+}, /* @__PURE__ */ React.createElement("span", {
+  className: "grow truncate"
+}, label), selected && /* @__PURE__ */ React.createElement(Icon, {
+  icon: "ph--check--regular",
+  size: 4
+}));
+
+// src/components/PipelineStatus/PipelineStatus.tsx
+import React2, { Fragment } from "react";
+var PipelineStatus = ({ phase = "idle", stages, telemetry, summary }) => /* @__PURE__ */ React2.createElement("div", {
+  className: "flex flex-col gap-3 overflow-y-auto p-2 text-sm"
+}, /* @__PURE__ */ React2.createElement(Section, {
+  title: "Status"
+}, /* @__PURE__ */ React2.createElement("div", {
+  className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-description"
+}, /* @__PURE__ */ React2.createElement("span", null, "Mic"), /* @__PURE__ */ React2.createElement("span", null, phase === "recording" ? "\u25CF on" : "\u25CB off"), /* @__PURE__ */ React2.createElement("span", null, "Pipeline"), /* @__PURE__ */ React2.createElement("span", null, phase))), stages && /* @__PURE__ */ React2.createElement(Section, {
+  title: "Stages"
+}, /* @__PURE__ */ React2.createElement("div", {
+  className: "text-description"
+}, stages.join(" \u2192 ") || "(none)")), telemetry && telemetry.length > 0 && /* @__PURE__ */ React2.createElement(Section, {
+  title: "Telemetry"
+}, /* @__PURE__ */ React2.createElement("div", {
+  className: "grid w-fit grid-cols-[1fr_auto_auto] gap-x-4 gap-y-1"
+}, telemetry.map((event, index) => /* @__PURE__ */ React2.createElement(Fragment, {
+  key: index
+}, /* @__PURE__ */ React2.createElement("span", null, event.stageId), /* @__PURE__ */ React2.createElement("span", {
+  className: "text-description"
+}, event.outcome), /* @__PURE__ */ React2.createElement("span", {
+  className: "text-right tabular-nums text-description"
+}, event.durationMs, "ms"))))), summary && /* @__PURE__ */ React2.createElement(Section, {
+  title: "Summary"
+}, /* @__PURE__ */ React2.createElement("p", {
+  className: "text-description"
+}, summary)));
+var Section = ({ title, children }) => /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("h3", {
+  className: "mb-1 font-medium"
+}, title), children);
+
+// src/components/Transcription/Transcription.tsx
+import React3 from "react";
+import { composable, composableProps, useThemeContext } from "@dxos/react-ui";
+import { useTextEditor } from "@dxos/react-ui-editor";
+import { AnchorWidget, createBasicExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown, documentSlots, scroller, xmlTags } from "@dxos/ui-editor";
+
+// src/components/Transcription/transcription-extension.ts
+import { RangeSetBuilder } from "@codemirror/state";
+import { EditorView, GutterMarker, ViewPlugin, gutter } from "@codemirror/view";
+import { format } from "date-fns/format";
+import { intervalToDuration } from "date-fns/intervalToDuration";
+import { addEventListener, combine } from "@dxos/async";
+
+// src/model/transcript-model.ts
+import { Text } from "@codemirror/state";
+import { Event } from "@dxos/async";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { log as log2 } from "@dxos/log";
+var __dxlog_file2 = "/Users/jdw/Code/dxos/packages/ui/react-ui-transcription/src/model/transcript-model.ts";
+var EditorChunkDocument = class {
+  _view;
+  constructor(_view) {
+    this._view = _view;
+  }
+  /** The document must always have at least one line. */
+  lineCount() {
+    return this._view.state.doc.lines - 1;
+  }
+  replaceLines(from, remove, insert) {
+    log2("replaceLines", {
+      count: this._view.state.doc.lines,
+      from,
+      remove,
+      insert
+    }, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 19, S: this });
+    const numLines = this._view.state.doc.lines;
+    const posFrom = this._view.state.doc.line(from).from;
+    const posTo = remove === 0 ? posFrom : this._view.state.doc.line(Math.min(numLines, from + remove)).from;
+    let text = insert.join("\n");
+    if (posTo === this._view.state.doc.length) {
+      text += "\n";
+    }
+    this._view.dispatch({
+      changes: {
+        from: posFrom,
+        to: posTo,
+        insert: text
+      }
+    });
+  }
+};
+var TranscriptModel = class {
+  _renderer;
+  /** Emits when the document is updated. */
+  update = new Event();
+  /** Ordered set of chunks. */
+  _chunks = [];
+  /** Map of chunk IDs to their current line counts. */
+  _chunkLineCounts = /* @__PURE__ */ new Map();
+  /** Map of line numbers to chunk IDs. */
+  _lineToChunk = /* @__PURE__ */ new Map();
+  /** Track chunk changes since last sync. */
+  _changes = [];
+  constructor(_renderer, initialChunks = []) {
+    this._renderer = _renderer;
+    initialChunks.forEach((chunk) => {
+      this.appendChunk(chunk);
+    });
+  }
+  toJSON() {
+    return {
+      chunks: this._chunks.length,
+      changes: this._changes.length
+    };
+  }
+  get doc() {
+    return Text.of([
+      ...this._chunks.flatMap((chunk, index) => this._renderer(chunk, index)),
+      ""
+    ]);
+  }
+  get chunks() {
+    return this._chunks;
+  }
+  /**
+  * Get the block ID at the given line number.
+  */
+  getChunkAtLine(line) {
+    return this._lineToChunk.get(line);
+  }
+  reset() {
+    this._chunks.length = 0;
+    this._chunkLineCounts.clear();
+    this._lineToChunk.clear();
+    this.update.emit();
+    return this;
+  }
+  appendChunk(chunk) {
+    const index = this._chunks.length;
+    this._chunks.push(chunk);
+    this._changes.push({
+      type: "append",
+      index,
+      chunk
+    });
+    this.update.emit();
+    return this;
+  }
+  updateChunk(chunk) {
+    const index = this._chunks.findIndex((c) => c.id === chunk.id);
+    invariant2(index !== -1, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 102, S: this, A: ["index !== -1", ""] });
+    this._chunks[index] = chunk;
+    this._changes.push({
+      type: "update",
+      index,
+      chunk
+    });
+    this.update.emit();
+    return this;
+  }
+  deleteBlock(id) {
+    const index = this._chunks.findIndex((c) => c.id === id);
+    invariant2(index !== -1, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 114, S: this, A: ["index !== -1", ""] });
+    this._chunks.splice(index, 1);
+    this._changes.push({
+      type: "delete",
+      index,
+      id
+    });
+    this.update.emit();
+    return this;
+  }
+  /**
+  * Syncs the tracked changes with the ChunkDocument.
+  */
+  sync(document2) {
+    log2("sync", {
+      changes: this._changes
+    }, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 127, S: this });
+    for (const change of this._changes) {
+      switch (change.type) {
+        case "append": {
+          const lines = this._renderer(change.chunk, change.index);
+          const lastLine = document2.lineCount();
+          document2.replaceLines(lastLine + 1, 0, lines);
+          break;
+        }
+        case "update": {
+          let lineStart = 1;
+          for (let i = 0; i < change.index; i++) {
+            lineStart += this._chunkLineCounts.get(this._chunks[i].id);
+          }
+          const previousLineCount = this._chunkLineCounts.get(change.chunk.id);
+          const newLines = this._renderer(change.chunk, change.index);
+          document2.replaceLines(lineStart, previousLineCount, newLines);
+          break;
+        }
+        case "delete": {
+          let lineStart = 1;
+          for (let i = 0; i < change.index; i++) {
+            lineStart += this._chunkLineCounts.get(this._chunks[i].id);
+          }
+          const previousLineCount = this._chunkLineCounts.get(change.id);
+          document2.replaceLines(lineStart, previousLineCount, []);
+          break;
+        }
+      }
+    }
+    this._lineToChunk.clear();
+    let currentLine = 1;
+    for (const [index, chunk] of this._chunks.entries()) {
+      const lineCount = this._renderer(chunk, index).length;
+      this._chunkLineCounts.set(chunk.id, lineCount);
+      this._lineToChunk.set(currentLine, chunk);
+      currentLine += lineCount;
+    }
+    const chunkIds = new Set(this._chunks.map((chunk) => chunk.id));
+    for (const id of this._chunkLineCounts.keys()) {
+      if (!chunkIds.has(id)) {
+        this._chunkLineCounts.delete(id);
+      }
+    }
+    this._changes.length = 0;
+    return this;
+  }
+};
+
+// src/components/Transcription/transcription-extension.ts
+var transcription = ({ model, started }) => {
+  return [
+    // Show timestamps in the gutter.
+    gutter({
+      class: "cm-timestamp-gutter",
+      lineMarkerChange: (update) => update.docChanged || update.viewportChanged,
+      markers: (view) => {
+        const start = getStartTime(started, model.chunks[0]);
+        const builder = new RangeSetBuilder();
+        for (const { from, to } of view.visibleRanges) {
+          let line = view.state.doc.lineAt(from);
+          while (line.from <= to) {
+            const block = model.getChunkAtLine(line.number)?.blocks[0];
+            const timestamp = block?._tag === "transcript" && block.started;
+            if (timestamp) {
+              builder.add(line.from, line.from, new TimestampMarker(line.number, new Date(timestamp), start));
+            }
+            if (line.to + 1 > view.state.doc.length) {
+              break;
+            }
+            line = view.state.doc.lineAt(line.to + 1);
+          }
+        }
+        return builder.finish();
+      }
+    }),
+    // Listen for model updates.
+    ViewPlugin.fromClass(class {
+      _controls;
+      _cleanup;
+      _adapter;
+      _initialized = false;
+      constructor(view) {
+        this._adapter = new EditorChunkDocument(view);
+        const scroller2 = view.scrollDOM;
+        let isAutoScrolling = false;
+        let hasScrolled = false;
+        let timeout;
+        const scrollToBottom = (smooth = false) => {
+          scroller2.style.scrollBehavior = smooth ? "smooth" : "";
+          scroller2.classList.add("cm-hide-scrollbar");
+          isAutoScrolling = true;
+          clearTimeout(timeout);
+          timeout = setTimeout(() => {
+            this._controls?.classList.add("opacity-0");
+            scroller2.classList.remove("cm-hide-scrollbar");
+            isAutoScrolling = false;
+          }, 500);
+          view.dispatch({
+            effects: EditorView.scrollIntoView(view.state.doc.length, {
+              y: "end"
+            })
+          });
+        };
+        this._cleanup = combine(addEventListener(view.scrollDOM, "scroll", () => {
+          if (!isAutoScrolling) {
+            hasScrolled = true;
+            this._controls?.classList.remove("opacity-0");
+          }
+        }), model.update.on(() => {
+          const autoScroll = scroller2.scrollHeight - scroller2.scrollTop - scroller2.clientHeight === 0 || !hasScrolled;
+          model.sync(this._adapter);
+          if (autoScroll) {
+            scrollToBottom(true);
+          }
+        }));
+      }
+      update(_update) {
+        if (!this._initialized) {
+          this._initialized = true;
+          setTimeout(() => {
+            model.sync(this._adapter);
+          });
+        }
+      }
+      destroy() {
+        this._controls?.remove();
+        this._cleanup();
+      }
+    }),
+    EditorView.theme({
+      ".cm-gutters": {
+        backgroundColor: "var(--color-base-surface)"
+      },
+      ".cm-timestamp-gutter": {
+        width: "6rem",
+        paddingLeft: "0.5rem",
+        paddingRight: "1rem"
+      },
+      ".cm-timestamp-gutter > .cm-gutterElement > div": {
+        display: "inline-flex",
+        textAlign: "right",
+        padding: "3px"
+      }
+    })
+  ];
+};
+var TimestampMarker = class extends GutterMarker {
+  _line;
+  _timestamp;
+  _started;
+  constructor(_line, _timestamp, _started) {
+    super(), this._line = _line, this._timestamp = _timestamp, this._started = _started;
+  }
+  eq(other) {
+    return this._timestamp === other._timestamp;
+  }
+  toDOM(view) {
+    const el = document.createElement("div");
+    el.className = "text-sm text-subdued hover:bg-hover-surface cursor-pointer";
+    el.textContent = formatTimestamp(this._timestamp, this._started);
+    el.onclick = () => {
+      const pos = view.state.doc.line(this._line).from;
+      view.dispatch({
+        effects: EditorView.scrollIntoView(pos, {
+          y: "start"
+        })
+      });
+    };
+    return el;
+  }
+};
+var getStartTime = (started, message) => {
+  if (started) {
+    return started;
+  }
+  if (message?.blocks[0]?._tag === "transcript" && message.blocks[0].started) {
+    return new Date(message.blocks[0].started);
+  }
+  return void 0;
+};
+var formatTimestamp = (timestamp, relative) => {
+  if (relative) {
+    const pad = (n = 0) => String(n).padStart(2, "0");
+    const { hours, minutes, seconds } = intervalToDuration({
+      start: relative,
+      end: timestamp
+    });
+    return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+  } else {
+    return format(timestamp, "HH:mm:ss");
+  }
+};
+
+// src/components/Transcription/Transcription.tsx
+var inlinePreviewRegistry = {
+  "link-preview": {
+    block: false,
+    urlSchemes: [
+      "dxn:",
+      "echo:"
+    ],
+    factory: ({ label, dxn }) => typeof label === "string" && typeof dxn === "string" ? new AnchorWidget(label, dxn) : null
+  }
+};
+var Transcription = composable(({ transcript: object, model, children, ...props }, forwardedRef) => {
+  const { themeMode } = useThemeContext();
+  const { parentRef } = useTextEditor(() => {
+    return {
+      extensions: [
+        createBasicExtensions({
+          readOnly: true,
+          lineWrapping: true,
+          search: true
+        }),
+        createThemeExtensions({
+          themeMode,
+          slots: documentSlots
+        }),
+        createMarkdownExtensions(),
+        // xmlTags() handles dxn:/echo: links via url-scheme widgets; skip here to avoid double-processing.
+        decorateMarkdown({
+          skip: ({ url }) => url.startsWith("dxn:") || url.startsWith("echo:")
+        }),
+        xmlTags({
+          registry: inlinePreviewRegistry
+        }),
+        transcription({
+          model,
+          started: object?.started ? new Date(object.started) : void 0
+        }),
+        scroller()
+      ]
+    };
+  }, [
+    model,
+    themeMode
+  ]);
+  return /* @__PURE__ */ React3.createElement("div", {
+    ...composableProps(props, {
+      classNames: "dx-container"
+    }),
+    "data-popover-collision-boundary": true,
+    ref: parentRef
+  });
+});
+
+// src/hooks/useAudioFile.ts
+import { useEffect, useState } from "react";
+import { scheduleTask } from "@dxos/async";
+import { Context } from "@dxos/context";
+import { log as log3 } from "@dxos/log";
+var __dxlog_file3 = "/Users/jdw/Code/dxos/packages/ui/react-ui-transcription/src/hooks/useAudioFile.ts";
+var useAudioFile = (audioUrl, constraints) => {
+  const [{ audio, stream, track }, setStream] = useState({});
+  useEffect(() => {
+    const ctx = new Context(void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 11 });
+    scheduleTask(ctx, async () => {
+      try {
+        const response = await fetch(audioUrl);
+        const blob = await response.blob();
+        const objectUrl = URL.createObjectURL(blob);
+        ctx.onDispose(() => {
+          URL.revokeObjectURL(objectUrl);
+        });
+        const audio2 = new Audio();
+        audio2.src = objectUrl;
+        await new Promise((resolve, reject) => {
+          audio2.addEventListener("error", (err) => {
+            log3.error("error", {
+              err
+            }, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 25, S: void 0 });
+            reject(err);
+          }, {
+            once: true
+          });
+          audio2.addEventListener("canplay", async () => {
+            resolve();
+          }, {
+            once: true
+          });
+          audio2.load();
+        });
+        const audioCtx = new AudioContext();
+        if (audioCtx.state === "suspended") {
+          await audioCtx.resume();
+        }
+        const destination = audioCtx.createMediaStreamDestination();
+        destination.channelCount = 1;
+        const source = audioCtx.createMediaElementSource(audio2);
+        source.connect(destination);
+        const track2 = destination.stream.getAudioTracks()[0];
+        if (constraints) {
+          await track2.applyConstraints(constraints).catch((err) => log3.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 50, S: void 0 }));
+        }
+        setStream({
+          audio: audio2,
+          stream: destination.stream,
+          track: destination.stream.getAudioTracks()[0]
+        });
+      } catch (err) {
+        log3.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 59, S: void 0 });
+      }
+    });
+    return () => {
+      void ctx.dispose();
+    };
+  }, [
+    audioUrl
+  ]);
+  return {
+    audio,
+    stream,
+    track
+  };
+};
+
+// src/hooks/useAudioTrack.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+var useAudioTrack = (active, constraints) => {
+  const [track, setTrack] = useState2();
+  const constraintsKey = constraints ? JSON.stringify(constraints) : "";
+  useEffect2(() => {
+    if (!active) {
+      track?.stop();
+      setTrack(void 0);
+      return;
+    }
+    let cancelled = false;
+    let acquired;
+    setTrack(void 0);
+    const initAudio = async () => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: constraints ?? true
+        });
+        const [next] = stream.getAudioTracks();
+        if (cancelled || !next) {
+          next?.stop();
+          return;
+        }
+        acquired = next;
+        setTrack(next);
+      } catch {
+        if (!cancelled) {
+          setTrack(void 0);
+        }
+      }
+    };
+    void initAudio();
+    return () => {
+      cancelled = true;
+      acquired?.stop();
+    };
+  }, [
+    active,
+    constraintsKey
+  ]);
+  return track;
+};
+
+// src/hooks/useFeedModelAdapter.ts
+import { useEffect as useEffect3, useMemo } from "react";
+var useFeedModelAdapter = (renderer, objects, initialChunks = []) => {
+  const model = useMemo(() => new TranscriptModel(renderer, initialChunks), [
+    renderer
+  ]);
+  useEffect3(() => {
+    for (const chunk of objects) {
+      model.appendChunk(chunk);
+    }
+  }, [
+    model,
+    objects
+  ]);
+  useEffect3(() => {
+    if (model.chunks.length === objects.length) {
+      return;
+    }
+    const chunk = objects.at(-1);
+    if (chunk) {
+      model.appendChunk(chunk);
+    }
+  }, [
+    model,
+    objects.length
+  ]);
+  return model;
+};
+
+// src/hooks/useIsSpeaking.ts
+import { useEffect as useEffect4, useMemo as useMemo2, useState as useState3 } from "react";
+import { scheduleTask as scheduleTask2 } from "@dxos/async";
+import { SpeakingMonitor } from "@dxos/av";
+import { Context as Context2 } from "@dxos/context";
+var __dxlog_file4 = "/Users/jdw/Code/dxos/packages/ui/react-ui-transcription/src/hooks/useIsSpeaking.ts";
+var useIsSpeaking = (track) => {
+  const [isSpeaking, setIsSpeaking] = useState3(false);
+  const speakingMonitor = useMemo2(() => {
+    if (!track) {
+      return;
+    }
+    return new SpeakingMonitor(track);
+  }, [
+    track
+  ]);
+  useEffect4(() => {
+    if (!speakingMonitor) {
+      return;
+    }
+    const ctx = new Context2(void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 24 });
+    scheduleTask2(ctx, async () => {
+      speakingMonitor.speakingChanged.on(ctx, () => setIsSpeaking(speakingMonitor.isSpeaking));
+      await speakingMonitor.open();
+      ctx.onDispose(() => speakingMonitor.close());
+    });
+    return () => {
+      void ctx.dispose();
+    };
+  }, [
+    speakingMonitor
+  ]);
+  return isSpeaking;
+};
+
+// src/hooks/useRecordingPipeline.ts
+import { useEffect as useEffect5, useMemo as useMemo3, useRef, useState as useState4 } from "react";
+import { log as log4 } from "@dxos/log";
+import { runAsrPipeline } from "@dxos/transcription-pipeline";
+var __dxlog_file5 = "/Users/jdw/Code/dxos/packages/ui/react-ui-transcription/src/hooks/useRecordingPipeline.ts";
+var RECORDER_INTERVAL_MS = 200;
+var DRAIN_SILENCE_MS = 5e3;
+var DEFAULT_TRANSCRIBE_CONFIG = {
+  transcribeAfterChunksAmount: 50,
+  prefixBufferChunksAmount: 10
+};
+var useRecordingPipeline = ({ active, microphone, track: externalTrack, audioConstraints, stages, commit, lookup, onSegment, config, segmentSentences }) => {
+  const [phase, setPhase] = useState4("idle");
+  const inUse = phase !== "idle";
+  useEffect5(() => {
+    setPhase((current) => active ? "recording" : current === "recording" ? "draining" : current);
+  }, [
+    active
+  ]);
+  const micTrack = useAudioTrack(!!microphone && inUse, audioConstraints);
+  const track = microphone ? micTrack : externalTrack;
+  const recorder = useMemo3(() => track ? new MediaStreamRecorder({
+    mediaStreamTrack: track,
+    config: {
+      interval: RECORDER_INTERVAL_MS
+    }
+  }) : void 0, [
+    track
+  ]);
+  const pipelineRef = useRef(null);
+  useEffect5(() => {
+    if (phase !== "recording" || !recorder) {
+      return;
+    }
+    const asr = runAsrPipeline({
+      recorder,
+      config: {
+        ...DEFAULT_TRANSCRIBE_CONFIG,
+        ...config
+      },
+      segmentSentences,
+      stages,
+      commit,
+      lookup,
+      onSegment,
+      drainSilenceMs: DRAIN_SILENCE_MS
+    });
+    pipelineRef.current = asr;
+    let cancelled = false;
+    void asr.open().then(() => {
+      if (!cancelled) {
+        asr.start();
+      }
+    }, (err) => {
+      if (!cancelled) {
+        log4.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 72, S: void 0 });
+        setPhase("idle");
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    phase,
+    recorder
+  ]);
+  useEffect5(() => {
+    if (phase !== "draining") {
+      return;
+    }
+    let cancelled = false;
+    void (async () => {
+      try {
+        await pipelineRef.current?.end();
+      } catch (err) {
+        log4.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 94, S: void 0 });
+      } finally {
+        pipelineRef.current = null;
+        if (!cancelled) {
+          setPhase((current) => current === "draining" ? "idle" : current);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    phase
+  ]);
+  return {
+    phase
+  };
+};
+
+// src/hooks/useSpeechRecognition.ts
+import { useEffect as useEffect6, useMemo as useMemo4 } from "react";
+import { log as log5 } from "@dxos/log";
+var __dxlog_file6 = "/Users/jdw/Code/dxos/packages/ui/react-ui-transcription/src/hooks/useSpeechRecognition.ts";
+var cleanText = (text) => text.toLowerCase().replace(/[.,!?]/g, "").replace(/\s+/g, " ").trim();
+var useSpeechRecognition = ({ active, onTranscript }) => {
+  const recognition = useMemo4(() => {
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    const SpeechGrammarList = window.SpeechGrammarList || window.webkitSpeechGrammarList;
+    if (!SpeechRecognition || !SpeechGrammarList) {
+      log5.error("Speech recognition not supported", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 14, S: void 0 });
+      return;
+    }
+    return Object.assign(new SpeechRecognition(), {
+      grammars: new SpeechGrammarList(),
+      continuous: true,
+      interimResults: true,
+      lang: "en-US",
+      maxAlternatives: 1,
+      onresult: (event) => {
+        const transcript = cleanText(event.results[event.resultIndex][0].transcript);
+        onTranscript(transcript);
+      },
+      onerror: (event) => {
+        log5.error("Speech recognition error", {
+          error: event.error
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 28, S: void 0 });
+      }
+    });
+  }, [
+    onTranscript
+  ]);
+  useEffect6(() => {
+    if (active) {
+      recognition?.start();
+    } else {
+      recognition?.stop();
+    }
+  }, [
+    active,
+    recognition
+  ]);
+};
+
+// src/hooks/useTranscriber.ts
+import { useEffect as useEffect7, useMemo as useMemo5 } from "react";
+var useTranscriber = ({ audioStreamTrack, recorderConfig, transcriberConfig, transcribe, onSegments }) => {
+  const transcriber = useMemo5(() => {
+    if (!audioStreamTrack || !onSegments) {
+      return void 0;
+    }
+    return createTranscriber({
+      audioStreamTrack,
+      recorderConfig,
+      transcriberConfig,
+      transcribe,
+      onSegments
+    });
+  }, [
+    audioStreamTrack,
+    recorderConfig,
+    transcriberConfig,
+    transcribe,
+    onSegments
+  ]);
+  useEffect7(() => {
+    return () => {
+      void transcriber?.close();
+    };
+  }, [
+    transcriber
+  ]);
+  return transcriber;
+};
+
+// src/util/render-byline.ts
+var renderByline = (identities) => (message, index, debug = false) => {
+  if (message.sender.role === "assistant") {
+    return [
+      message.blocks.find((block) => block._tag === "transcript")?.text ?? "",
+      ""
+    ];
+  }
+  const identity = identities.find((identity2) => identity2.did === message.sender.identityDid);
+  const name = identity?.profile?.displayName ?? message.sender.contact?.target?.fullName ?? message.sender.name ?? message.sender.email ?? message.sender.identityDid;
+  const blocks = message.blocks.filter((block) => block._tag === "transcript");
+  return [
+    // TODO(thure): Use an XML tag with the bits needed here.
+    `###### ${name}` + (debug ? ` [${index}]:${message.id}` : ""),
+    blocks.map((block) => block.text.trim()).join(" "),
+    ""
+  ];
+};
+export {
+  EditorChunkDocument,
+  MediaStreamRecorder,
+  MicSettings,
+  PipelineStatus,
+  TranscriptModel,
+  Transcription,
+  createTranscriber,
+  renderByline,
+  transcription,
+  useAudioFile,
+  useAudioTrack,
+  useFeedModelAdapter,
+  useIsSpeaking,
+  useRecordingPipeline,
+  useSpeechRecognition,
+  useTranscriber
+};
+//# sourceMappingURL=index.mjs.map