@dxos/plugin-transcription 0.8.3 → 0.8.4-main.1da679c

package/dist/lib/browser/{chunk-53AXUEIQ.mjs → chunk-DHMLTHPB.mjs}

@@ -1,51 +1,157 @@
 import {
   TranscriptionCapabilities
-} from "./chunk-W2KNYJD6.mjs";
+} from "./chunk-TNEQFHIU.mjs";
 
-// packages/plugins/plugin-transcription/src/components/TranscriptContainer.tsx
+// src/components/TranscriptContainer.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import React2 from "react";
 import { fullyQualifiedId, getSpace } from "@dxos/client/echo";
 import { useMembers, useQueue } from "@dxos/react-client/echo";
 import { StackItem } from "@dxos/react-ui-stack";
 
-// packages/plugins/plugin-transcription/src/components/Transcript/Transcript.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import React from "react";
-import { IconButton, useThemeContext } from "@dxos/react-ui";
-import { createBasicExtensions, createMarkdownExtensions, createRenderer, createThemeExtensions, decorateMarkdown, editorWidth, preview, useTextEditor } from "@dxos/react-ui-editor";
-import { mx } from "@dxos/react-ui-theme";
-import { isNotFalsy } from "@dxos/util";
+// src/hooks/useAudioFile.ts
+import { useEffect, useState } from "react";
+import { scheduleTask } from "@dxos/async";
+import { Context } from "@dxos/context";
+import { log } from "@dxos/log";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-transcription/src/hooks/useAudioFile.ts";
+var useAudioFile = (audioUrl, constraints) => {
+  const [{ audio, stream, track }, setStream] = useState({});
+  useEffect(() => {
+    const ctx = new Context(void 0, {
+      F: __dxlog_file,
+      L: 20
+    });
+    scheduleTask(ctx, async () => {
+      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) => {
+          log.error("error", {
+            err
+          }, {
+            F: __dxlog_file,
+            L: 37,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          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) => log.catch(err, void 0, {
+          F: __dxlog_file,
+          L: 66,
+          S: void 0,
+          C: (f, a) => f(...a)
+        }));
+      }
+      setStream({
+        audio: audio2,
+        stream: destination.stream,
+        track: destination.stream.getAudioTracks()[0]
+      });
+    });
+    return () => {
+      void ctx.dispose();
+    };
+  }, [
+    audioUrl
+  ]);
+  return {
+    audio,
+    stream,
+    track
+  };
+};
 
-// packages/plugins/plugin-transcription/src/components/Transcript/transcript-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/hooks/useAudioTrack.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+var useAudioTrack = (active, constraints) => {
+  const [track, setTrack] = useState2();
+  useEffect2(() => {
+    if (!active) {
+      track?.stop();
+      setTrack(void 0);
+      return;
+    }
+    const initAudio = async () => {
+      const audio = new Audio();
+      audio.srcObject = await navigator.mediaDevices.getUserMedia({
+        audio: constraints ?? true
+      });
+      const [track2] = audio.srcObject.getAudioTracks();
+      if (track2) {
+        setTrack(track2);
+      }
+    };
+    if (active) {
+      void initAudio();
+    }
+  }, [
+    active
+  ]);
+  return track;
+};
+
+// src/hooks/useQueueModelAdapter.ts
+import { useEffect as useEffect3, useMemo, useState as useState3 } from "react";
 
-// packages/plugins/plugin-transcription/src/model/model.ts
+// src/model/model.ts
 import { Text } from "@codemirror/state";
 import { Event } from "@dxos/async";
 import { invariant } from "@dxos/invariant";
-import { log } from "@dxos/log";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-transcription/src/model/model.ts";
-var DocumentAdapter = class {
-  constructor(_view) {
-    this._view = _view;
+import { log as log2 } from "@dxos/log";
+function _define_property(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
   }
+  return obj;
+}
+var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-transcription/src/model/model.ts";
+var DocumentAdapter = class {
   /** The document must always have at least one line. */
   lineCount() {
     return this._view.state.doc.lines - 1;
   }
   replaceLines(from, remove, insert) {
-    log("replaceLines", {
+    log2("replaceLines", {
       count: this._view.state.doc.lines,
       from,
       remove,
       insert
     }, {
-      F: __dxlog_file,
+      F: __dxlog_file2,
       L: 39,
       S: this,
       C: (f, a) => f(...a)
@@ -65,19 +171,12 @@ var DocumentAdapter = class {
       }
     });
   }
+  constructor(_view) {
+    _define_property(this, "_view", void 0);
+    this._view = _view;
+  }
 };
 var SerializationModel = class {
-  constructor(_renderer, initialChunks = []) {
-    this._renderer = _renderer;
-    this._chunks = [];
-    this._chunkLineCounts = /* @__PURE__ */ new Map();
-    this._lineToChunk = /* @__PURE__ */ new Map();
-    this._changes = [];
-    this.update = new Event();
-    initialChunks.forEach((chunk) => {
-      this.appendChunk(chunk);
-    });
-  }
   toJSON() {
     return {
       chunks: this._chunks.length,
@@ -120,7 +219,7 @@ var SerializationModel = class {
   updateChunk(chunk) {
     const index = this._chunks.findIndex((c) => c.id === chunk.id);
     invariant(index !== -1, void 0, {
-      F: __dxlog_file,
+      F: __dxlog_file2,
       L: 147,
       S: this,
       A: [
@@ -140,7 +239,7 @@ var SerializationModel = class {
   deleteBlock(id) {
     const index = this._chunks.findIndex((c) => c.id === id);
     invariant(index !== -1, void 0, {
-      F: __dxlog_file,
+      F: __dxlog_file2,
       L: 156,
       S: this,
       A: [
@@ -161,10 +260,10 @@ var SerializationModel = class {
   * Syncs the tracked changes with the ChunkDocument.
   */
   sync(document2) {
-    log("sync", {
+    log2("sync", {
       changes: this._changes
     }, {
-      F: __dxlog_file,
+      F: __dxlog_file2,
       L: 167,
       S: this,
       C: (f, a) => f(...a)
@@ -215,384 +314,47 @@ var SerializationModel = class {
     this._changes.length = 0;
     return this;
   }
+  constructor(_renderer, initialChunks = []) {
+    _define_property(this, "_renderer", void 0);
+    _define_property(this, "_chunks", void 0);
+    _define_property(this, "_chunkLineCounts", void 0);
+    _define_property(this, "_lineToChunk", void 0);
+    _define_property(this, "_changes", void 0);
+    _define_property(this, "update", void 0);
+    this._renderer = _renderer;
+    this._chunks = [];
+    this._chunkLineCounts = /* @__PURE__ */ new Map();
+    this._lineToChunk = /* @__PURE__ */ new Map();
+    this._changes = [];
+    this.update = new Event();
+    initialChunks.forEach((chunk) => {
+      this.appendChunk(chunk);
+    });
+  }
 };
 
-// packages/plugins/plugin-transcription/src/components/Transcript/transcript-extension.ts
-var transcript = ({ model, started, renderButton }) => {
-  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?.type === "transcription" && 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 {
-      constructor(view) {
-        this._initialized = false;
-        this._adapter = new DocumentAdapter(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"
-            })
-          });
-        };
-        if (renderButton) {
-          this._controls = document.createElement("div");
-          this._controls.classList.add("cm-controls", "transition-opacity", "duration-300", "opacity-0");
-          view.dom.appendChild(this._controls);
-          renderButton(this._controls, {
-            onClick: () => {
-              scrollToBottom(false);
-            }
-          }, view);
-        }
-        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);
-          }
-        }));
+// src/hooks/useQueueModelAdapter.ts
+var useQueueModelAdapter = (renderer, queue, initialChunks = []) => {
+  const model = useMemo(() => new SerializationModel(renderer, initialChunks), [
+    queue
+  ]);
+  const [loaded, setLoaded] = useState3(false);
+  useEffect3(() => {
+    if (!queue) {
+      return;
+    }
+    const update = () => {
+      for (const block of queue?.objects ?? []) {
+        model.appendChunk(block);
       }
-      update(update) {
-        if (!this._initialized) {
-          this._initialized = true;
-          setTimeout(() => {
-            model.sync(this._adapter);
-          });
-        }
-      }
-      destroy() {
-        this._controls?.remove();
-        this._cleanup();
-      }
-    }),
-    EditorView.theme({
-      ".cm-scroller": {
-        overflowY: "scroll"
-      },
-      ".cm-hide-scrollbar": {
-        scrollbarWidth: "none",
-        "-ms-overflow-style": "none"
-      },
-      ".cm-hide-scrollbar::-webkit-scrollbar": {
-        display: "none"
-      },
-      ".cm-controls": {
-        position: "absolute",
-        bottom: "0.5rem",
-        right: "0.5rem",
-        zIndex: 1e3
-      },
-      ".cm-line": {
-        paddingRight: "1rem"
-      },
-      ".cm-timestamp-gutter": {
-        width: "6rem",
-        paddingRight: "1rem"
-      },
-      ".cm-timestamp-gutter > .cm-gutterElement > div": {
-        display: "inline-flex",
-        textAlign: "right",
-        padding: "3px"
-      }
-    })
-  ];
-};
-var TimestampMarker = class extends GutterMarker {
-  constructor(_line, _timestamp, _started) {
-    super(), this._line = _line, this._timestamp = _timestamp, this._started = _started;
-  }
-  eq(other) {
-    return other._timestamp === this._timestamp;
-  }
-  toDOM(view) {
-    const el = document.createElement("div");
-    el.className = "text-sm text-subdued hover:bg-hoverSurface 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]?.type === "transcription" && 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");
-  }
-};
-
-// packages/plugins/plugin-transcription/src/components/Transcript/Transcript.tsx
-var renderMarkdown = (identities) => (message, index, debug = false) => {
-  if (message.sender.role === "assistant") {
-    return [
-      message.blocks.find((block) => block.type === "transcription")?.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.type === "transcription");
-  return [
-    `###### ${name}` + (debug ? ` [${index}]:${message.id}` : ""),
-    blocks.map((block) => block.text.trim()).join(" "),
-    ""
-  ];
-};
-var Transcript = ({ classNames, transcript: object, space, model, attendableId, ignoreAttention }) => {
-  var _effect = _useSignals();
-  try {
-    const { themeMode } = useThemeContext();
-    const { parentRef } = useTextEditor(() => {
-      return {
-        extensions: [
-          createBasicExtensions({
-            readOnly: true,
-            lineWrapping: true
-          }),
-          createMarkdownExtensions({
-            themeMode
-          }),
-          createThemeExtensions({
-            themeMode
-          }),
-          decorateMarkdown(),
-          space && preview(),
-          transcript({
-            model,
-            started: object?.started ? new Date(object.started) : void 0,
-            renderButton: createRenderer(({ onClick }) => /* @__PURE__ */ React.createElement(IconButton, {
-              icon: "ph--arrow-line-down--regular",
-              iconOnly: true,
-              label: "Scroll to bottom",
-              onClick
-            }))
-          })
-        ].filter(isNotFalsy)
-      };
-    }, [
-      space,
-      model
-    ]);
-    return /* @__PURE__ */ React.createElement("div", {
-      ref: parentRef,
-      className: mx("flex grow overflow-hidden", editorWidth, classNames),
-      "data-popover-collision-boundary": true
-    });
-  } finally {
-    _effect.f();
-  }
-};
-
-// packages/plugins/plugin-transcription/src/hooks/useAudioFile.ts
-import { useEffect, useState } from "react";
-import { scheduleTask } from "@dxos/async";
-import { Context } from "@dxos/context";
-import { log as log2 } from "@dxos/log";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-transcription/src/hooks/useAudioFile.ts";
-var useAudioFile = (audioUrl, constraints) => {
-  const [{ audio, stream, track }, setStream] = useState({});
-  useEffect(() => {
-    const ctx = new Context(void 0, {
-      F: __dxlog_file2,
-      L: 20
-    });
-    scheduleTask(ctx, async () => {
-      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) => {
-          log2.error("error", {
-            err
-          }, {
-            F: __dxlog_file2,
-            L: 37,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
-          reject(err);
-        }, {
-          once: true
-        });
-        audio2.addEventListener("canplay", async () => {
-          log2.info("starting...", void 0, {
-            F: __dxlog_file2,
-            L: 45,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
-          try {
-            await audio2.play();
-            resolve();
-          } catch (playError) {
-            log2.error("Play failed", {
-              playError
-            }, {
-              F: __dxlog_file2,
-              L: 51,
-              S: void 0,
-              C: (f, a) => f(...a)
-            });
-            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) => log2.catch(err, void 0, {
-          F: __dxlog_file2,
-          L: 75,
-          S: void 0,
-          C: (f, a) => f(...a)
-        }));
-      }
-      setStream({
-        audio: audio2,
-        stream: destination.stream,
-        track: destination.stream.getAudioTracks()[0]
-      });
-    });
-    return () => {
-      void ctx.dispose();
-    };
-  }, [
-    audioUrl
-  ]);
-  return {
-    audio,
-    stream,
-    track
-  };
-};
-
-// packages/plugins/plugin-transcription/src/hooks/useAudioTrack.ts
-import { useEffect as useEffect2, useState as useState2 } from "react";
-var useAudioTrack = (active, constraints) => {
-  const [track, setTrack] = useState2();
-  useEffect2(() => {
-    if (!active) {
-      track?.stop();
-      setTrack(void 0);
-      return;
-    }
-    const initAudio = async () => {
-      const audio = new Audio();
-      audio.srcObject = await navigator.mediaDevices.getUserMedia({
-        audio: constraints ?? true
-      });
-      const [track2] = audio.srcObject.getAudioTracks();
-      if (track2) {
-        setTrack(track2);
-      }
-    };
-    if (active) {
-      void initAudio();
-    }
-  }, [
-    active
-  ]);
-  return track;
-};
-
-// packages/plugins/plugin-transcription/src/hooks/useQueueModelAdapter.ts
-import { useEffect as useEffect3, useMemo, useState as useState3 } from "react";
-var useQueueModelAdapter = (renderer, queue, initialChunks = []) => {
-  const model = useMemo(() => new SerializationModel(renderer, initialChunks), [
-    queue
-  ]);
-  const [loaded, setLoaded] = useState3(false);
-  useEffect3(() => {
-    if (!queue) {
-      return;
-    }
-    const update = () => {
-      for (const block of queue?.objects ?? []) {
-        model.appendChunk(block);
-      }
-      setLoaded(true);
-    };
-    let i;
-    if (queue.isLoading) {
-      i = setInterval(() => {
-        if (!queue?.isLoading) {
-          clearInterval(i);
-          update();
+      setLoaded(true);
+    };
+    let i;
+    if (queue.isLoading) {
+      i = setInterval(() => {
+        if (!queue?.isLoading) {
+          clearInterval(i);
+          update();
         }
       }, 1e3);
     } else {
@@ -619,35 +381,36 @@ var useQueueModelAdapter = (renderer, queue, initialChunks = []) => {
   return model;
 };
 
-// packages/plugins/plugin-transcription/src/hooks/useTranscriber.ts
+// src/hooks/useTranscriber.ts
 import { useEffect as useEffect4, useMemo as useMemo2 } from "react";
 import { useCapabilities } from "@dxos/app-framework";
 
-// packages/plugins/plugin-transcription/src/capabilities/index.ts
+// src/capabilities/index.ts
 import { lazy } from "@dxos/app-framework";
-var IntentResolver = lazy(() => import("./intent-resolver-BGADCHVM.mjs"));
-var ReactSurface = lazy(() => import("./react-surface-HMJS5FSS.mjs"));
-var Transcriber = lazy(() => import("./transcriber-OYPLZFG5.mjs"));
+var BlueprintDefinition = lazy(() => import("./blueprint-definition-C62MH2FL.mjs"));
+var IntentResolver = lazy(() => import("./intent-resolver-LKRGWUX2.mjs"));
+var ReactSurface = lazy(() => import("./react-surface-2AGVHCYU.mjs"));
+var Transcriber = lazy(() => import("./transcriber-L3NQP2OM.mjs"));
 
-// packages/plugins/plugin-transcription/src/hooks/useTranscriber.ts
-var useTranscriber = ({ audioStreamTrack, onSegments, transcriberConfig, recorderConfig }) => {
+// src/hooks/useTranscriber.ts
+var useTranscriber = ({ audioStreamTrack, recorderConfig, transcriberConfig, onSegments }) => {
   const [getTranscriber] = useCapabilities(TranscriptionCapabilities.Transcriber);
   const transcriber = useMemo2(() => {
-    if (!onSegments || !audioStreamTrack || !getTranscriber) {
+    if (!getTranscriber || !audioStreamTrack || !onSegments) {
       return void 0;
     }
     return getTranscriber({
       audioStreamTrack,
-      onSegments,
+      recorderConfig,
       transcriberConfig,
-      recorderConfig
+      onSegments
     });
   }, [
-    audioStreamTrack,
-    onSegments,
     getTranscriber,
+    audioStreamTrack,
+    recorderConfig,
     transcriberConfig,
-    recorderConfig
+    onSegments
   ]);
   useEffect4(() => {
     return () => {
@@ -659,13 +422,13 @@ var useTranscriber = ({ audioStreamTrack, onSegments, transcriberConfig, recorde
   return transcriber;
 };
 
-// packages/plugins/plugin-transcription/src/hooks/useVoiceInput.ts
-import { useState as useState4, useEffect as useEffect5, useCallback } from "react";
+// src/hooks/useVoiceInput.ts
+import { useCallback, useEffect as useEffect5, useState as useState4 } from "react";
 import { scheduleMicroTask } from "@dxos/async";
 import { Context as Context2 } from "@dxos/context";
 import { log as log3 } from "@dxos/log";
 import { useSoundEffect } from "@dxos/react-ui-sfx";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-transcription/src/hooks/useVoiceInput.ts";
+var __dxlog_file3 = "/__w/dxos/dxos/packages/plugins/plugin-transcription/src/hooks/useVoiceInput.ts";
 var useVoiceInput = ({ active, onUpdate }) => {
   const soundStart = useSoundEffect("StartRecording");
   const soundStop = useSoundEffect("StopRecording");
@@ -682,14 +445,14 @@ var useVoiceInput = ({ active, onUpdate }) => {
   useEffect5(() => {
     const ctx = new Context2(void 0, {
       F: __dxlog_file3,
-      L: 43
+      L: 44
     });
     scheduleMicroTask(ctx, async () => {
       if (active && transcriber) {
         await transcriber.open();
         log3.info("starting...", void 0, {
           F: __dxlog_file3,
-          L: 47,
+          L: 48,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -701,7 +464,7 @@ var useVoiceInput = ({ active, onUpdate }) => {
         await transcriber?.close();
         log3.info("stopped", void 0, {
           F: __dxlog_file3,
-          L: 54,
+          L: 55,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -721,8 +484,229 @@ var useVoiceInput = ({ active, onUpdate }) => {
   };
 };
 
-// packages/plugins/plugin-transcription/src/components/TranscriptContainer.tsx
-var TranscriptionContainer = ({ role, transcript: transcript2 }) => {
+// src/components/Transcript/Transcript.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+import React from "react";
+import { useThemeContext } from "@dxos/react-ui";
+import { autoScroll, createBasicExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown, preview, useTextEditor } from "@dxos/react-ui-editor";
+import { mx } from "@dxos/react-ui-theme";
+import { isNotFalsy } from "@dxos/util";
+
+// src/components/Transcript/transcript-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";
+function _define_property2(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+var transcript = ({ 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 {
+      update(_update) {
+        if (!this._initialized) {
+          this._initialized = true;
+          setTimeout(() => {
+            model.sync(this._adapter);
+          });
+        }
+      }
+      destroy() {
+        this._controls?.remove();
+        this._cleanup();
+      }
+      constructor(view) {
+        _define_property2(this, "_controls", void 0);
+        _define_property2(this, "_cleanup", void 0);
+        _define_property2(this, "_adapter", void 0);
+        _define_property2(this, "_initialized", false);
+        this._adapter = new DocumentAdapter(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 autoScroll2 = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight === 0 || !hasScrolled;
+          model.sync(this._adapter);
+          if (autoScroll2) {
+            scrollToBottom(true);
+          }
+        }));
+      }
+    }),
+    EditorView.theme({
+      ".cm-timestamp-gutter": {
+        width: "6rem",
+        paddingRight: "1rem"
+      },
+      ".cm-timestamp-gutter > .cm-gutterElement > div": {
+        display: "inline-flex",
+        textAlign: "right",
+        padding: "3px"
+      }
+    })
+  ];
+};
+var TimestampMarker = class extends GutterMarker {
+  eq(other) {
+    return other._timestamp === this._timestamp;
+  }
+  toDOM(view) {
+    const el = document.createElement("div");
+    el.className = "text-sm text-subdued hover:bg-hoverSurface 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;
+  }
+  constructor(_line, _timestamp, _started) {
+    super(), _define_property2(this, "_line", void 0), _define_property2(this, "_timestamp", void 0), _define_property2(this, "_started", void 0), this._line = _line, this._timestamp = _timestamp, this._started = _started;
+  }
+};
+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/Transcript/Transcript.tsx
+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(" "),
+    ""
+  ];
+};
+var TranscriptView = ({ classNames, space, transcript: object, model }) => {
+  var _effect = _useSignals();
+  try {
+    const { themeMode } = useThemeContext();
+    const { parentRef } = useTextEditor(() => {
+      return {
+        extensions: [
+          createBasicExtensions({
+            readOnly: true,
+            lineWrapping: true,
+            search: true
+          }),
+          createMarkdownExtensions(),
+          createThemeExtensions({
+            themeMode
+          }),
+          decorateMarkdown(),
+          preview(),
+          transcript({
+            model,
+            started: object?.started ? new Date(object.started) : void 0
+          }),
+          autoScroll()
+        ].filter(isNotFalsy)
+      };
+    }, [
+      space,
+      model
+    ]);
+    return /* @__PURE__ */ React.createElement("div", {
+      ref: parentRef,
+      className: mx("flex grow overflow-hidden container-max-width", classNames),
+      "data-popover-collision-boundary": true
+    });
+  } finally {
+    _effect.f();
+  }
+};
+
+// src/components/TranscriptContainer.tsx
+var TranscriptionContainer = ({ transcript: transcript2 }) => {
   var _effect = _useSignals2();
   try {
     const attendableId = fullyQualifiedId(transcript2);
@@ -731,11 +715,8 @@ var TranscriptionContainer = ({ role, transcript: transcript2 }) => {
     const queue = useQueue(transcript2.queue.dxn, {
       pollInterval: 1e3
     });
-    const model = useQueueModelAdapter(renderMarkdown(members), queue);
-    return /* @__PURE__ */ React2.createElement(StackItem.Content, {
-      role,
-      classNames: "container-max-width pli-2"
-    }, /* @__PURE__ */ React2.createElement(Transcript, {
+    const model = useQueueModelAdapter(renderByline(members), queue);
+    return /* @__PURE__ */ React2.createElement(StackItem.Content, null, /* @__PURE__ */ React2.createElement(TranscriptView, {
       attendableId,
       space,
       model,
@@ -748,8 +729,8 @@ var TranscriptionContainer = ({ role, transcript: transcript2 }) => {
 var TranscriptContainer_default = TranscriptionContainer;
 
 export {
-  renderMarkdown,
-  Transcript,
+  renderByline,
+  TranscriptView,
   useAudioFile,
   useAudioTrack,
   useQueueModelAdapter,
@@ -757,8 +738,9 @@ export {
   useVoiceInput,
   TranscriptionContainer,
   TranscriptContainer_default,
+  BlueprintDefinition,
   IntentResolver,
   ReactSurface,
   Transcriber
 };
-//# sourceMappingURL=chunk-53AXUEIQ.mjs.map
+//# sourceMappingURL=chunk-DHMLTHPB.mjs.map