@dxos/plugin-transcription 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/dist/lib/browser/{chunk-ICM7JRCO.mjs → chunk-SLZXQVQU.mjs}

@@ -1,142 +1,28 @@
-import {
-  renderByline
-} from "./chunk-HOOPZ7EM.mjs";
 import {
   TranscriptionCapabilities
-} from "./chunk-Q5OC3WVG.mjs";
-
-// src/components/TranscriptContainer.tsx
-import React2 from "react";
-import { Obj } from "@dxos/echo";
-import { useMembers, useQueue } from "@dxos/react-client/echo";
-import { Layout } from "@dxos/react-ui-mosaic";
-
-// 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 () => {
-      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) => {
-            log.error("error", {
-              err
-            }, {
-              F: __dxlog_file,
-              L: 39,
-              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: 68,
-            S: void 0,
-            C: (f, a) => f(...a)
-          }));
-        }
-        setStream({
-          audio: audio2,
-          stream: destination.stream,
-          track: destination.stream.getAudioTracks()[0]
-        });
-      } catch (err) {
-        log.catch(err, void 0, {
-          F: __dxlog_file,
-          L: 78,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-      }
-    });
-    return () => {
-      void ctx.dispose();
-    };
-  }, [
-    audioUrl
-  ]);
-  return {
-    audio,
-    stream,
-    track
-  };
-};
+} from "./chunk-7D57BEI2.mjs";
 
-// 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/components/Transcription/Transcription.tsx
+import React from "react";
+import { useThemeContext } from "@dxos/react-ui";
+import { useTextEditor } from "@dxos/react-ui-editor";
+import { autoScroll, createBasicExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown, editorSlots, preview } from "@dxos/ui-editor";
+import { mx } from "@dxos/ui-theme";
+import { isTruthy } from "@dxos/util";
 
-// src/hooks/useQueueModelAdapter.ts
-import { useEffect as useEffect3, useMemo, useState as useState3 } from "react";
+// 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/model.ts
 import { Text } from "@codemirror/state";
 import { Event } from "@dxos/async";
 import { invariant } from "@dxos/invariant";
-import { log as log2 } from "@dxos/log";
-var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-transcription/src/model/model.ts";
+import { log } from "@dxos/log";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-transcription/src/model/model.ts";
 var DocumentAdapter = class {
   _view;
   constructor(_view) {
@@ -147,13 +33,13 @@ var DocumentAdapter = class {
     return this._view.state.doc.lines - 1;
   }
   replaceLines(from, remove, insert) {
-    log2("replaceLines", {
+    log("replaceLines", {
       count: this._view.state.doc.lines,
       from,
       remove,
       insert
     }, {
-      F: __dxlog_file2,
+      F: __dxlog_file,
       L: 39,
       S: this,
       C: (f, a) => f(...a)
@@ -234,7 +120,7 @@ var SerializationModel = class {
   updateChunk(chunk) {
     const index = this._chunks.findIndex((c) => c.id === chunk.id);
     invariant(index !== -1, void 0, {
-      F: __dxlog_file2,
+      F: __dxlog_file,
       L: 147,
       S: this,
       A: [
@@ -254,7 +140,7 @@ var SerializationModel = class {
   deleteBlock(id) {
     const index = this._chunks.findIndex((c) => c.id === id);
     invariant(index !== -1, void 0, {
-      F: __dxlog_file2,
+      F: __dxlog_file,
       L: 156,
       S: this,
       A: [
@@ -275,10 +161,10 @@ var SerializationModel = class {
   * Syncs the tracked changes with the ChunkDocument.
   */
   sync(document2) {
-    log2("sync", {
+    log("sync", {
       changes: this._changes
     }, {
-      F: __dxlog_file2,
+      F: __dxlog_file,
       L: 167,
       S: this,
       C: (f, a) => f(...a)
@@ -331,235 +217,80 @@ var SerializationModel = class {
   }
 };
 
-// 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);
+// 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();
       }
-      setLoaded(true);
-    };
-    let i;
-    if (queue.isLoading) {
-      i = setInterval(() => {
-        if (!queue?.isLoading) {
-          clearInterval(i);
-          update();
-        }
-      }, 1e3);
-    } else {
-      update();
-    }
-    return () => clearTimeout(i);
-  }, [
-    model,
-    queue
-  ]);
-  useEffect3(() => {
-    if (!loaded || !queue || model.chunks.length === queue.objects.length) {
-      return;
-    }
-    const chunk = queue.objects.at(-1);
-    if (chunk) {
-      model.appendChunk(chunk);
-    }
-  }, [
-    model,
-    loaded,
-    queue?.objects.length
-  ]);
-  return model;
-};
-
-// src/hooks/useTranscriber.ts
-import { useEffect as useEffect4, useMemo as useMemo2 } from "react";
-import { useCapabilities } from "@dxos/app-framework/react";
-var useTranscriber = ({ audioStreamTrack, recorderConfig, transcriberConfig, onSegments }) => {
-  const [getTranscriber] = useCapabilities(TranscriptionCapabilities.Transcriber);
-  const transcriber = useMemo2(() => {
-    if (!getTranscriber || !audioStreamTrack || !onSegments) {
-      return void 0;
-    }
-    return getTranscriber({
-      audioStreamTrack,
-      recorderConfig,
-      transcriberConfig,
-      onSegments
-    });
-  }, [
-    getTranscriber,
-    audioStreamTrack,
-    recorderConfig,
-    transcriberConfig,
-    onSegments
-  ]);
-  useEffect4(() => {
-    return () => {
-      void transcriber?.close();
-    };
-  }, [
-    transcriber
-  ]);
-  return transcriber;
-};
-
-// 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 = "/__w/dxos/dxos/packages/plugins/plugin-transcription/src/hooks/useVoiceInput.ts";
-var useVoiceInput = ({ active, onUpdate }) => {
-  const soundStart = useSoundEffect("StartRecording");
-  const soundStop = useSoundEffect("StopRecording");
-  const handleSegments = useCallback(async (segments) => {
-    const text = segments.map((str) => str.text.trim().replace(/[^\w\s]/g, "")).join(" ");
-    onUpdate(text);
-  }, []);
-  const [recording, setRecording] = useState4(false);
-  const track = useAudioTrack(active);
-  const transcriber = useTranscriber({
-    audioStreamTrack: track,
-    onSegments: handleSegments
-  });
-  useEffect5(() => {
-    const ctx = new Context2(void 0, {
-      F: __dxlog_file3,
-      L: 44
-    });
-    scheduleMicroTask(ctx, async () => {
-      if (active && transcriber) {
-        await transcriber.open();
-        log3.info("starting...", void 0, {
-          F: __dxlog_file3,
-          L: 48,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        setRecording(true);
-        void soundStart.play();
-        transcriber.startChunksRecording();
-      } else if (!active && transcriber?.isOpen) {
-        transcriber?.stopChunksRecording();
-        await transcriber?.close();
-        log3.info("stopped", void 0, {
-          F: __dxlog_file3,
-          L: 55,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        setRecording(false);
-        void soundStop.play();
-      }
-    });
-    return () => {
-      void ctx.dispose();
-    };
-  }, [
-    active,
-    transcriber
-  ]);
-  return {
-    recording
-  };
-};
-
-// src/components/Transcript/Transcript.tsx
-import React from "react";
-import { useThemeContext } from "@dxos/react-ui";
-import { useTextEditor } from "@dxos/react-ui-editor";
-import { autoScroll, createBasicExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown, editorSlots, preview } from "@dxos/ui-editor";
-import { mx } from "@dxos/ui-theme";
-import { isTruthy } 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";
-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 {
-      _controls;
-      _cleanup;
-      _adapter;
-      _initialized = false;
-      constructor(view) {
-        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);
-          }
-        }));
-      }
-      update(_update) {
-        if (!this._initialized) {
-          this._initialized = true;
-          setTimeout(() => {
-            model.sync(this._adapter);
-          });
+    }),
+    // Listen for model updates.
+    ViewPlugin.fromClass(class {
+      _controls;
+      _cleanup;
+      _adapter;
+      _initialized = false;
+      constructor(view) {
+        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);
+          }
+        }));
+      }
+      update(_update) {
+        if (!this._initialized) {
+          this._initialized = true;
+          setTimeout(() => {
+            model.sync(this._adapter);
+          });
         }
       }
       destroy() {
@@ -569,7 +300,7 @@ var transcript = ({ model, started }) => {
     }),
     EditorView.theme({
       ".cm-gutters": {
-        backgroundColor: "var(--dx-baseSurface)"
+        backgroundColor: "var(--color-base-surface)"
       },
       ".cm-timestamp-gutter": {
         width: "6rem",
@@ -596,7 +327,7 @@ var TimestampMarker = class extends GutterMarker {
   }
   toDOM(view) {
     const el = document.createElement("div");
-    el.className = "text-sm text-subdued hover:bg-hoverSurface cursor-pointer";
+    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;
@@ -631,8 +362,8 @@ var formatTimestamp = (timestamp, relative) => {
   }
 };
 
-// src/components/Transcript/Transcript.tsx
-var TranscriptView = ({ classNames, transcript: object, model }) => {
+// src/components/Transcription/Transcription.tsx
+var Transcription = ({ classNames, transcript: object, model }) => {
   const { themeMode } = useThemeContext();
   const { parentRef } = useTextEditor(() => {
     return {
@@ -649,7 +380,7 @@ var TranscriptView = ({ classNames, transcript: object, model }) => {
         }),
         decorateMarkdown(),
         preview(),
-        transcript({
+        transcription({
           model,
           started: object?.started ? new Date(object.started) : void 0
         }),
@@ -661,38 +392,277 @@ var TranscriptView = ({ classNames, transcript: object, model }) => {
   ]);
   return /* @__PURE__ */ React.createElement("div", {
     ref: parentRef,
-    className: mx("flex grow overflow-hidden container-max-width", classNames),
+    className: mx("dx-container", classNames),
     "data-popover-collision-boundary": true
   });
 };
 
-// src/components/TranscriptContainer.tsx
-var TranscriptionContainer = ({ role, subject: transcript2 }) => {
-  const attendableId = Obj.getDXN(transcript2).toString();
-  const db = Obj.getDatabase(transcript2);
-  const members = useMembers(db?.spaceId).map((member) => member.identity);
-  const queue = useQueue(transcript2.queue.dxn, {
-    pollInterval: 1e3
-  });
-  const model = useQueueModelAdapter(renderByline(members), queue);
-  return /* @__PURE__ */ React2.createElement(Layout.Main, {
-    role
-  }, /* @__PURE__ */ React2.createElement(TranscriptView, {
-    attendableId,
+// 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 = "/__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_file2,
+      L: 20
+    });
+    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) => {
+            log2.error("error", {
+              err
+            }, {
+              F: __dxlog_file2,
+              L: 39,
+              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) => log2.catch(err, void 0, {
+            F: __dxlog_file2,
+            L: 68,
+            S: void 0,
+            C: (f, a) => f(...a)
+          }));
+        }
+        setStream({
+          audio: audio2,
+          stream: destination.stream,
+          track: destination.stream.getAudioTracks()[0]
+        });
+      } catch (err) {
+        log2.catch(err, void 0, {
+          F: __dxlog_file2,
+          L: 78,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+      }
+    });
+    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();
+  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";
+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();
+        }
+      }, 1e3);
+    } else {
+      update();
+    }
+    return () => clearTimeout(i);
+  }, [
     model,
-    transcript: transcript2
-  }));
+    queue
+  ]);
+  useEffect3(() => {
+    if (!loaded || !queue || model.chunks.length === queue.objects.length) {
+      return;
+    }
+    const chunk = queue.objects.at(-1);
+    if (chunk) {
+      model.appendChunk(chunk);
+    }
+  }, [
+    model,
+    loaded,
+    queue?.objects.length
+  ]);
+  return model;
+};
+
+// src/hooks/useTranscriber.ts
+import { useEffect as useEffect4, useMemo as useMemo2 } from "react";
+import { useCapabilities } from "@dxos/app-framework/ui";
+var useTranscriber = ({ audioStreamTrack, recorderConfig, transcriberConfig, onSegments }) => {
+  const [getTranscriber] = useCapabilities(TranscriptionCapabilities.Transcriber);
+  const transcriber = useMemo2(() => {
+    if (!getTranscriber || !audioStreamTrack || !onSegments) {
+      return void 0;
+    }
+    return getTranscriber({
+      audioStreamTrack,
+      recorderConfig,
+      transcriberConfig,
+      onSegments
+    });
+  }, [
+    getTranscriber,
+    audioStreamTrack,
+    recorderConfig,
+    transcriberConfig,
+    onSegments
+  ]);
+  useEffect4(() => {
+    return () => {
+      void transcriber?.close();
+    };
+  }, [
+    transcriber
+  ]);
+  return transcriber;
+};
+
+// 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 = "/__w/dxos/dxos/packages/plugins/plugin-transcription/src/hooks/useVoiceInput.ts";
+var useVoiceInput = ({ active, onUpdate }) => {
+  const soundStart = useSoundEffect("StartRecording");
+  const soundStop = useSoundEffect("StopRecording");
+  const handleSegments = useCallback(async (segments) => {
+    const text = segments.map((str) => str.text.trim().replace(/[^\w\s]/g, "")).join(" ");
+    onUpdate(text);
+  }, []);
+  const [recording, setRecording] = useState4(false);
+  const track = useAudioTrack(active);
+  const transcriber = useTranscriber({
+    audioStreamTrack: track,
+    onSegments: handleSegments
+  });
+  useEffect5(() => {
+    const ctx = new Context2(void 0, {
+      F: __dxlog_file3,
+      L: 44
+    });
+    scheduleMicroTask(ctx, async () => {
+      if (active && transcriber) {
+        await transcriber.open();
+        log3.info("starting...", void 0, {
+          F: __dxlog_file3,
+          L: 48,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        setRecording(true);
+        void soundStart.play();
+        transcriber.startChunksRecording();
+      } else if (!active && transcriber?.isOpen) {
+        transcriber?.stopChunksRecording();
+        await transcriber?.close();
+        log3.info("stopped", void 0, {
+          F: __dxlog_file3,
+          L: 55,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        setRecording(false);
+        void soundStop.play();
+      }
+    });
+    return () => {
+      void ctx.dispose();
+    };
+  }, [
+    active,
+    transcriber
+  ]);
+  return {
+    recording
+  };
 };
-var TranscriptContainer_default = TranscriptionContainer;
 
 export {
-  TranscriptView,
+  Transcription,
   useAudioFile,
   useAudioTrack,
   useQueueModelAdapter,
   useTranscriber,
-  useVoiceInput,
-  TranscriptionContainer,
-  TranscriptContainer_default
+  useVoiceInput
 };
-//# sourceMappingURL=chunk-ICM7JRCO.mjs.map
+//# sourceMappingURL=chunk-SLZXQVQU.mjs.map