@dxos/react-ui-transcription 0.10.0 → 0.11.0

package/dist/lib/browser/index.mjs

@@ -1,1002 +0,0 @@
-// 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 = "/__w/dxos/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 = "/__w/dxos/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 = "/__w/dxos/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 = "/__w/dxos/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 = "/__w/dxos/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 = "/__w/dxos/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