@dxos/react-ui-transcription 0.10.0 → 0.11.0

package/dist/lib/index.mjs

@@ -0,0 +1,963 @@
+import { Transcriber, runAsrPipeline } from "@dxos/pipeline-transcription";
+import { WaveFile } from "wavefile";
+import { Event, addEventListener, combine, scheduleTask, synchronized } from "@dxos/async";
+import { invariant } from "@dxos/invariant";
+import { log } from "@dxos/log";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { DropdownMenu, Icon, IconButton, composable, composableProps, useThemeContext, useTranslation } from "@dxos/react-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTextEditor } from "@dxos/react-ui-editor";
+import { AnchorWidget, createBasicExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown, documentSlots, scroller, xmlTags } from "@dxos/ui-editor";
+import { RangeSetBuilder, Text } from "@codemirror/state";
+import { EditorView, GutterMarker, ViewPlugin, gutter } from "@codemirror/view";
+import { format } from "date-fns/format";
+import { intervalToDuration } from "date-fns/intervalToDuration";
+import { Context } from "@dxos/context";
+import { SpeakingMonitor } from "@dxos/av";
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
+function __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;
+}
+//#endregion
+//#region src/capture/media-stream-recorder.ts
+var __dxlog_file$5 = "/__w/dxos/dxos/packages/ui/react-ui-transcription/src/capture/media-stream-recorder.ts";
+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;
+};
+/**
+* Recorder that uses the MediaContext API and AudioNode API to record audio.
+*
+* It records MediaStream using https://www.npmjs.com/package/extendable-media-recorder.
+*/
+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;
+	}
+	async start() {
+		await (initializingPromise ??= initializeExtendableMediaRecorder()).catch((err) => log.info("initializeExtendableMediaRecorder", { err }, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$5,
+			L: 76,
+			S: this
+		}));
+		if (this._mediaRecorder?.state === "recording") return;
+		invariant(this._onChunk, "MediaStreamRecorder: onChunk is not set", {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$5,
+			L: 82,
+			S: this,
+			A: ["this._onChunk", "'MediaStreamRecorder: onChunk is not set'"]
+		});
+		invariant(MediaRecorderClass, "MediaStreamRecorder: extendable-media-recorder not initialized", {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$5,
+			L: 83,
+			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 && uint8Array[1] === 73 && uint8Array[2] === 70 && 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$5,
+				L: 126,
+				S: this
+			});
+			return;
+		}
+		this._onChunk({
+			timestamp: Date.now(),
+			data: wav.getSamples()
+		});
+	}
+};
+__decorate([synchronized], MediaStreamRecorder.prototype, "start", null);
+__decorate([synchronized], MediaStreamRecorder.prototype, "stop", null);
+__decorate([synchronized], MediaStreamRecorder.prototype, "_ondataavailable", null);
+//#endregion
+//#region src/capture/create-transcriber.ts
+var RECORD_INTERVAL = 200;
+var PREFIXED_CHUNKS_AMOUNT = 10;
+var TRANSCRIBE_AFTER_CHUNKS_AMOUNT = 50;
+/**
+* Builds a {@link Transcriber} backed by a browser {@link MediaStreamRecorder} for the given track —
+* the low-level audio→text construction, co-located with the recorder so it can be tested outside the
+* plugin. Consumed directly via the {@link useTranscriber} hook.
+*/
+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
+});
+//#endregion
+//#region src/components/MicSettings/MicSettings.tsx
+/**
+* Dropdown of recording options for the mic: record mode (toggle/push-to-talk), the input device,
+* and whether entity extraction is applied. Presentational — state lives in the consumer.
+*/
+var MicSettings = ({ translationNs, recordMode, entityExtraction, devices, selectedDeviceId, onRecordModeChange, onEntityExtractionChange, onSelectDevice }) => {
+	const { t } = useTranslation(translationNs);
+	return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(IconButton, {
+			icon: "ph--caret-down--regular",
+			iconOnly: true,
+			label: t("recording-options.label"),
+			variant: "ghost",
+			classNames: "w-4",
+			"data-testid": "transcription.record.options"
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [/* @__PURE__ */ jsxs(DropdownMenu.Viewport, { children: [
+		/* @__PURE__ */ jsx(DropdownMenu.GroupLabel, { children: t("record-mode.label") }),
+		/* @__PURE__ */ jsx(SelectableItem, {
+			label: t("record-mode.toggle.label"),
+			selected: recordMode === "toggle",
+			onSelect: () => onRecordModeChange("toggle")
+		}),
+		/* @__PURE__ */ jsx(SelectableItem, {
+			label: t("record-mode.hold.label"),
+			selected: recordMode === "hold",
+			onSelect: () => onRecordModeChange("hold")
+		}),
+		/* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+		/* @__PURE__ */ jsx(DropdownMenu.GroupLabel, { children: t("audio-device.label") }),
+		/* @__PURE__ */ jsx(SelectableItem, {
+			label: t("audio-device.default.label"),
+			selected: selectedDeviceId === "",
+			onSelect: () => onSelectDevice("")
+		}),
+		devices.map((device) => /* @__PURE__ */ jsx(SelectableItem, {
+			label: device.label,
+			selected: selectedDeviceId === device.deviceId,
+			onSelect: () => onSelectDevice(device.deviceId)
+		}, device.deviceId)),
+		/* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+		/* @__PURE__ */ jsxs(DropdownMenu.CheckboxItem, {
+			checked: entityExtraction,
+			onCheckedChange: onEntityExtractionChange,
+			classNames: "gap-2",
+			"data-testid": "transcription.entity-extraction",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "grow truncate",
+				children: t("settings.entity-extraction.label")
+			}), /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph--check--regular",
+					size: 4
+				})
+			})]
+		})
+	] }), /* @__PURE__ */ jsx(DropdownMenu.Arrow, {})] }) })] });
+};
+var SelectableItem = ({ label, selected, onSelect }) => /* @__PURE__ */ jsxs(DropdownMenu.Item, {
+	classNames: "gap-2",
+	onSelect,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "grow truncate",
+		children: label
+	}), selected && /* @__PURE__ */ jsx(Icon, {
+		icon: "ph--check--regular",
+		size: 4
+	})]
+});
+//#endregion
+//#region src/components/PipelineStatus/PipelineStatus.tsx
+/**
+* Read-only status panel reflecting the transcription/pipeline state: mic + pipeline phase, the
+* active stage list, per-stage telemetry, and the running summary. Driven by the `PipelineStatus`
+* capability (phase) and `PipelineRuntime` telemetry.
+*/
+var PipelineStatus = ({ phase = "idle", stages, telemetry, summary }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex flex-col gap-3 overflow-y-auto p-2 text-sm",
+	children: [
+		/* @__PURE__ */ jsx(Section, {
+			title: "Status",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-description",
+				children: [
+					/* @__PURE__ */ jsx("span", { children: "Mic" }),
+					/* @__PURE__ */ jsx("span", { children: phase === "recording" ? "● on" : "○ off" }),
+					/* @__PURE__ */ jsx("span", { children: "Pipeline" }),
+					/* @__PURE__ */ jsx("span", { children: phase })
+				]
+			})
+		}),
+		stages && /* @__PURE__ */ jsx(Section, {
+			title: "Stages",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "text-description",
+				children: stages.join(" → ") || "(none)"
+			})
+		}),
+		telemetry && telemetry.length > 0 && /* @__PURE__ */ jsx(Section, {
+			title: "Telemetry",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "grid w-fit grid-cols-[1fr_auto_auto] gap-x-4 gap-y-1",
+				children: telemetry.map((event, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("span", { children: event.stageId }),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-description",
+						children: event.outcome
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-right tabular-nums text-description",
+						children: [event.durationMs, "ms"]
+					})
+				] }, index))
+			})
+		}),
+		summary && /* @__PURE__ */ jsx(Section, {
+			title: "Summary",
+			children: /* @__PURE__ */ jsx("p", {
+				className: "text-description",
+				children: summary
+			})
+		})
+	]
+});
+var Section = ({ title, children }) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+	className: "mb-1 font-medium",
+	children: title
+}), children] });
+//#endregion
+//#region src/model/transcript-model.ts
+var __dxlog_file$4 = "/__w/dxos/dxos/packages/ui/react-ui-transcription/src/model/transcript-model.ts";
+/**
+* CodeMirror-backed {@link ChunkDocument}.
+*/
+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) {
+		log("replaceLines", {
+			count: this._view.state.doc.lines,
+			from,
+			remove,
+			insert
+		}, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$4,
+			L: 39,
+			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
+		} });
+	}
+};
+/**
+* Each Chunk can be converted into a set of lines.
+* Chunks can be added, updated or deleted from the Queue.
+* A Document is an immutable projection that represents a flat list of lines corresponding to the Queue.
+*
+* Ideally we would implement a custom virtual Text model for the View, but this currently isn't possible in Codemirror.
+* Instead this model tracks changes and syncs them with the ChunkDocument.
+*/
+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);
+		invariant(index !== -1, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$4,
+			L: 147,
+			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);
+		invariant(index !== -1, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$4,
+			L: 156,
+			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(document) {
+		log("sync", { changes: this._changes }, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$4,
+			L: 167,
+			S: this
+		});
+		for (const change of this._changes) switch (change.type) {
+			case "append": {
+				const lines = this._renderer(change.chunk, change.index);
+				const lastLine = document.lineCount();
+				document.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);
+				document.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);
+				document.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;
+	}
+};
+//#endregion
+//#region src/components/Transcription/transcription-extension.ts
+/**
+* Scrolling transcript with timestamps.
+*/
+var transcription = ({ model, started }) => {
+	return [
+		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();
+			}
+		}),
+		ViewPlugin.fromClass(class {
+			_controls;
+			_cleanup;
+			_adapter;
+			_initialized = false;
+			constructor(view) {
+				this._adapter = new EditorChunkDocument(view);
+				const scroller = view.scrollDOM;
+				let isAutoScrolling = false;
+				let hasScrolled = false;
+				let timeout;
+				const scrollToBottom = (smooth = false) => {
+					scroller.style.scrollBehavior = smooth ? "smooth" : "";
+					scroller.classList.add("cm-hide-scrollbar");
+					isAutoScrolling = true;
+					clearTimeout(timeout);
+					timeout = setTimeout(() => {
+						this._controls?.classList.add("opacity-0");
+						scroller.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 = scroller.scrollHeight - scroller.scrollTop - scroller.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"
+			}
+		})
+	];
+};
+/**
+* Gutter marker that displays a timestamp.
+*/
+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);
+};
+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");
+};
+//#endregion
+//#region 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(),
+			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__ */ jsx("div", {
+		...composableProps(props, { classNames: "dx-container" }),
+		"data-popover-collision-boundary": true,
+		ref: parentRef
+	});
+});
+//#endregion
+//#region src/hooks/useAudioFile.ts
+var __dxlog_file$3 = "/__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_file$3,
+			L: 20
+		});
+		scheduleTask(ctx, async () => {
+			try {
+				const blob = await (await fetch(audioUrl)).blob();
+				const objectUrl = URL.createObjectURL(blob);
+				ctx.onDispose(() => {
+					URL.revokeObjectURL(objectUrl);
+				});
+				const audio = new Audio();
+				audio.src = objectUrl;
+				await new Promise((resolve, reject) => {
+					audio.addEventListener("error", (err) => {
+						log.error("error", { err }, {
+							"~LogMeta": "~LogMeta",
+							F: __dxlog_file$3,
+							L: 39,
+							S: void 0
+						});
+						reject(err);
+					}, { once: true });
+					audio.addEventListener("canplay", async () => {
+						resolve();
+					}, { once: true });
+					audio.load();
+				});
+				const audioCtx = new AudioContext();
+				if (audioCtx.state === "suspended") await audioCtx.resume();
+				const destination = audioCtx.createMediaStreamDestination();
+				destination.channelCount = 1;
+				audioCtx.createMediaElementSource(audio).connect(destination);
+				const track = destination.stream.getAudioTracks()[0];
+				if (constraints) await track.applyConstraints(constraints).catch((err) => log.catch(err, void 0, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file$3,
+					L: 68,
+					S: void 0
+				}));
+				setStream({
+					audio,
+					stream: destination.stream,
+					track: destination.stream.getAudioTracks()[0]
+				});
+			} catch (err) {
+				log.catch(err, void 0, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file$3,
+					L: 78,
+					S: void 0
+				});
+			}
+		});
+		return () => {
+			ctx.dispose();
+		};
+	}, [audioUrl]);
+	return {
+		audio,
+		stream,
+		track
+	};
+};
+//#endregion
+//#region src/hooks/useAudioTrack.ts
+/**
+* Acquires a microphone audio track while `active`. Re-acquires when the `constraints` change (e.g.
+* a different input device is selected) so the new device takes effect without a remount.
+*/
+var useAudioTrack = (active, constraints) => {
+	const [track, setTrack] = useState();
+	useEffect(() => {
+		if (!active) {
+			track?.stop();
+			setTrack(void 0);
+			return;
+		}
+		let cancelled = false;
+		let acquired;
+		setTrack(void 0);
+		const initAudio = async () => {
+			try {
+				const [next] = (await navigator.mediaDevices.getUserMedia({ audio: constraints ?? true })).getAudioTracks();
+				if (cancelled || !next) {
+					next?.stop();
+					return;
+				}
+				acquired = next;
+				setTrack(next);
+			} catch {
+				if (!cancelled) setTrack(void 0);
+			}
+		};
+		initAudio();
+		return () => {
+			cancelled = true;
+			acquired?.stop();
+		};
+	}, [active, constraints ? JSON.stringify(constraints) : ""]);
+	return track;
+};
+//#endregion
+//#region src/hooks/useFeedModelAdapter.ts
+/**
+* Feeds an array of objects (typically from `useQuery(db, Query.from(feed))`) into a
+* `TranscriptModel`, appending each new tail item as the array grows.
+*
+* @param renderer - chunk renderer.
+* @param objects - current snapshot of feed items.
+* @param initialChunks - chunks to seed the model with on first render.
+*/
+var useFeedModelAdapter = (renderer, objects, initialChunks = []) => {
+	const model = useMemo(() => new TranscriptModel(renderer, initialChunks), [renderer]);
+	useEffect(() => {
+		for (const chunk of objects) model.appendChunk(chunk);
+	}, [model, objects]);
+	useEffect(() => {
+		if (model.chunks.length === objects.length) return;
+		const chunk = objects.at(-1);
+		if (chunk) model.appendChunk(chunk);
+	}, [model, objects.length]);
+	return model;
+};
+//#endregion
+//#region src/hooks/useIsSpeaking.ts
+var __dxlog_file$2 = "/__w/dxos/dxos/packages/ui/react-ui-transcription/src/hooks/useIsSpeaking.ts";
+/**
+* Tracks voice activity on an audio track via {@link SpeakingMonitor}.
+*/
+var useIsSpeaking = (track) => {
+	const [isSpeaking, setIsSpeaking] = useState(false);
+	const speakingMonitor = useMemo(() => {
+		if (!track) return;
+		return new SpeakingMonitor(track);
+	}, [track]);
+	useEffect(() => {
+		if (!speakingMonitor) return;
+		const ctx = new Context(void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$2,
+			L: 29
+		});
+		scheduleTask(ctx, async () => {
+			speakingMonitor.speakingChanged.on(ctx, () => setIsSpeaking(speakingMonitor.isSpeaking));
+			await speakingMonitor.open();
+			ctx.onDispose(() => speakingMonitor.close());
+		});
+		return () => {
+			ctx.dispose();
+		};
+	}, [speakingMonitor]);
+	return isSpeaking;
+};
+//#endregion
+//#region src/hooks/useRecordingPipeline.ts
+var __dxlog_file$1 = "/__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
+};
+/**
+* Single ASR-capture engine binding for React consumers: drives an {@link AsrPipeline}
+* ({@link runAsrPipeline}) off a capture flag, sourcing audio from the microphone (owned here) or an
+* external track. The editor driver, message-list recording, and stories all build on this — varying
+* only by source, stages, and commit sink.
+*/
+var useRecordingPipeline = ({ active, microphone, track: externalTrack, audioConstraints, stages, commit, lookup, onSegment, config, segmentSentences }) => {
+	const [phase, setPhase] = useState("idle");
+	const inUse = phase !== "idle";
+	useEffect(() => {
+		setPhase((current) => active ? "recording" : current === "recording" ? "draining" : current);
+	}, [active]);
+	const micTrack = useAudioTrack(!!microphone && inUse, audioConstraints);
+	const track = microphone ? micTrack : externalTrack;
+	const recorder = useMemo(() => track ? new MediaStreamRecorder({
+		mediaStreamTrack: track,
+		config: { interval: RECORDER_INTERVAL_MS }
+	}) : void 0, [track]);
+	const pipelineRef = useRef(null);
+	useEffect(() => {
+		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;
+		asr.open().then(() => {
+			if (!cancelled) asr.start();
+		}, (err) => {
+			if (!cancelled) {
+				log.catch(err, void 0, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file$1,
+					L: 131,
+					S: void 0
+				});
+				setPhase("idle");
+			}
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [phase, recorder]);
+	useEffect(() => {
+		if (phase !== "draining") return;
+		let cancelled = false;
+		(async () => {
+			try {
+				await pipelineRef.current?.end();
+			} catch (err) {
+				log.catch(err, void 0, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file$1,
+					L: 152,
+					S: void 0
+				});
+			} finally {
+				pipelineRef.current = null;
+				if (!cancelled) setPhase((current) => current === "draining" ? "idle" : current);
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [phase]);
+	return { phase };
+};
+//#endregion
+//#region src/hooks/useSpeechRecognition.ts
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-transcription/src/hooks/useSpeechRecognition.ts";
+var cleanText = (text) => text.toLowerCase().replace(/[.,!?]/g, "").replace(/\s+/g, " ").trim();
+/**
+* Use browser speech recognition API to transcribe speech to text.
+*/
+var useSpeechRecognition = ({ active, onTranscript }) => {
+	const recognition = useMemo(() => {
+		const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+		const SpeechGrammarList = window.SpeechGrammarList || window.webkitSpeechGrammarList;
+		if (!SpeechRecognition || !SpeechGrammarList) {
+			log.error("Speech recognition not supported", void 0, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 29,
+				S: void 0
+			});
+			return;
+		}
+		return Object.assign(new SpeechRecognition(), {
+			grammars: new SpeechGrammarList(),
+			continuous: true,
+			interimResults: true,
+			lang: "en-US",
+			maxAlternatives: 1,
+			onresult: (event) => {
+				onTranscript(cleanText(event.results[event.resultIndex][0].transcript));
+			},
+			onerror: (event) => {
+				log.error("Speech recognition error", { error: event.error }, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file,
+					L: 44,
+					S: void 0
+				});
+			}
+		});
+	}, [onTranscript]);
+	useEffect(() => {
+		if (active) recognition?.start();
+		else recognition?.stop();
+	}, [active, recognition]);
+};
+//#endregion
+//#region src/hooks/useTranscriber.ts
+/**
+* Records audio while the user is speaking and transcribes it after they pause. Builds a
+* {@link Transcriber} directly from {@link createTranscriber} (no app-framework capability needed,
+* since the browser construction lives in this package); returns `undefined` until a track and
+* `onSegments` handler are supplied.
+*/
+var useTranscriber = ({ audioStreamTrack, recorderConfig, transcriberConfig, transcribe, onSegments }) => {
+	const transcriber = useMemo(() => {
+		if (!audioStreamTrack || !onSegments) return;
+		return createTranscriber({
+			audioStreamTrack,
+			recorderConfig,
+			transcriberConfig,
+			transcribe,
+			onSegments
+		});
+	}, [
+		audioStreamTrack,
+		recorderConfig,
+		transcriberConfig,
+		transcribe,
+		onSegments
+	]);
+	useEffect(() => {
+		return () => {
+			transcriber?.close();
+		};
+	}, [transcriber]);
+	return transcriber;
+};
+//#endregion
+export { EditorChunkDocument, MediaStreamRecorder, MicSettings, PipelineStatus, TranscriptModel, Transcription, createTranscriber, transcription, useAudioFile, useAudioTrack, useFeedModelAdapter, useIsSpeaking, useRecordingPipeline, useSpeechRecognition, useTranscriber };
+
+//# sourceMappingURL=index.mjs.map