@dxos/plugin-transcription 0.8.1 → 0.8.2-main.f081794

package/dist/lib/node/chunk-KO6MKCED.cjs

@@ -0,0 +1,718 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var chunk_KO6MKCED_exports = {};
+__export(chunk_KO6MKCED_exports, {
+  AppGraphBuilder: () => AppGraphBuilder,
+  IntentResolver: () => IntentResolver,
+  MeetingTranscriptionState: () => MeetingTranscriptionState,
+  ReactSurface: () => ReactSurface,
+  Transcriber: () => Transcriber,
+  Transcript: () => Transcript,
+  TranscriptContainer_default: () => TranscriptContainer_default,
+  TranscriptionContainer: () => TranscriptionContainer,
+  renderMarkdown: () => renderMarkdown,
+  useAudioFile: () => useAudioFile,
+  useAudioTrack: () => useAudioTrack,
+  useQueueModelAdapter: () => useQueueModelAdapter,
+  useTranscriber: () => useTranscriber,
+  useVoiceInput: () => useVoiceInput
+});
+module.exports = __toCommonJS(chunk_KO6MKCED_exports);
+var import_chunk_HYGDHS6X = require("./chunk-HYGDHS6X.cjs");
+var import_react = __toESM(require("react"));
+var import_echo = require("@dxos/client/echo");
+var import_echo2 = require("@dxos/react-client/echo");
+var import_react_ui_stack = require("@dxos/react-ui-stack");
+var import_react2 = __toESM(require("react"));
+var import_keys = require("@dxos/keys");
+var import_log = require("@dxos/log");
+var import_react_client = require("@dxos/react-client");
+var import_react_ui = require("@dxos/react-ui");
+var import_react_ui_editor = require("@dxos/react-ui-editor");
+var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_util = require("@dxos/util");
+var import_state = require("@codemirror/state");
+var import_view = require("@codemirror/view");
+var import_format = require("date-fns/format");
+var import_intervalToDuration = require("date-fns/intervalToDuration");
+var import_async = require("@dxos/async");
+var import_state2 = require("@codemirror/state");
+var import_async2 = require("@dxos/async");
+var import_invariant = require("@dxos/invariant");
+var import_log2 = require("@dxos/log");
+var import_react3 = require("react");
+var import_log3 = require("@dxos/log");
+var import_react4 = require("react");
+var import_react5 = require("react");
+var import_react6 = require("react");
+var import_app_framework = require("@dxos/app-framework");
+var import_app_framework2 = require("@dxos/app-framework");
+var import_react7 = require("react");
+var import_async3 = require("@dxos/async");
+var import_context = require("@dxos/context");
+var import_log4 = require("@dxos/log");
+var import_react_ui_sfx = require("@dxos/react-ui-sfx");
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-transcription/src/model/model.ts";
+var DocumentAdapter = class {
+  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) {
+    (0, import_log2.log)("replaceLines", {
+      count: this._view.state.doc.lines,
+      from,
+      remove,
+      insert
+    }, {
+      F: __dxlog_file,
+      L: 39,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    const numLines = this._view.state.doc.lines;
+    const posFrom = this._view.state.doc.line(from).from;
+    const posTo = remove === 0 ? posFrom : this._view.state.doc.line(Math.min(numLines, from + remove)).from;
+    let text = insert.join("\n");
+    if (posTo === this._view.state.doc.length) {
+      text += "\n";
+    }
+    this._view.dispatch({
+      changes: {
+        from: posFrom,
+        to: posTo,
+        insert: text
+      }
+    });
+  }
+};
+var BlockModel = class {
+  constructor(_renderer, initialBlocks = []) {
+    this._renderer = _renderer;
+    this._blocks = [];
+    this._blockLineCounts = /* @__PURE__ */ new Map();
+    this._lineToBlock = /* @__PURE__ */ new Map();
+    this._changes = [];
+    this.update = new import_async2.Event();
+    initialBlocks.forEach((block) => {
+      this.appendBlock(block);
+    });
+  }
+  toJSON() {
+    return {
+      blocks: this._blocks.length,
+      changes: this._changes.length
+    };
+  }
+  get doc() {
+    return import_state2.Text.of([
+      ...this._blocks.flatMap((block) => this._renderer(block)),
+      ""
+    ]);
+  }
+  get blocks() {
+    return this._blocks;
+  }
+  /**
+  * Get the block ID at the given line number.
+  */
+  getBlockAtLine(line) {
+    return this._lineToBlock.get(line);
+  }
+  reset() {
+    this._blocks.length = 0;
+    this._blockLineCounts.clear();
+    this._lineToBlock.clear();
+    this.update.emit();
+    return this;
+  }
+  appendBlock(block) {
+    const index = this._blocks.length;
+    this._blocks.push(block);
+    this._changes.push({
+      type: "append",
+      index,
+      block
+    });
+    this.update.emit();
+    return this;
+  }
+  updateBlock(block) {
+    const index = this._blocks.findIndex((b) => b.id === block.id);
+    (0, import_invariant.invariant)(index !== -1, void 0, {
+      F: __dxlog_file,
+      L: 147,
+      S: this,
+      A: [
+        "index !== -1",
+        ""
+      ]
+    });
+    this._blocks[index] = block;
+    this._changes.push({
+      type: "update",
+      index,
+      block
+    });
+    this.update.emit();
+    return this;
+  }
+  deleteBlock(id) {
+    const index = this._blocks.findIndex((b) => b.id === id);
+    (0, import_invariant.invariant)(index !== -1, void 0, {
+      F: __dxlog_file,
+      L: 156,
+      S: this,
+      A: [
+        "index !== -1",
+        ""
+      ]
+    });
+    this._blocks.splice(index, 1);
+    this._changes.push({
+      type: "delete",
+      index,
+      id
+    });
+    this.update.emit();
+    return this;
+  }
+  /**
+  * Syncs the tracked changes with the BlockDocument.
+  */
+  sync(document2) {
+    (0, import_log2.log)("sync", {
+      changes: this._changes
+    }, {
+      F: __dxlog_file,
+      L: 167,
+      S: this,
+      C: (f, a) => f(...a)
+    });
+    for (const change of this._changes) {
+      switch (change.type) {
+        case "append": {
+          const lines = this._renderer(change.block);
+          const lastLine = document2.lineCount();
+          document2.replaceLines(lastLine + 1, 0, lines);
+          break;
+        }
+        case "update": {
+          let lineStart = 1;
+          for (let i = 0; i < change.index; i++) {
+            lineStart += this._blockLineCounts.get(this._blocks[i].id);
+          }
+          const previousLineCount = this._blockLineCounts.get(change.block.id);
+          const newLines = this._renderer(change.block);
+          document2.replaceLines(lineStart, previousLineCount, newLines);
+          break;
+        }
+        case "delete": {
+          let lineStart = 1;
+          for (let i = 0; i < change.index; i++) {
+            lineStart += this._blockLineCounts.get(this._blocks[i].id);
+          }
+          const previousLineCount = this._blockLineCounts.get(change.id);
+          document2.replaceLines(lineStart, previousLineCount, []);
+          break;
+        }
+      }
+    }
+    this._lineToBlock.clear();
+    let currentLine = 1;
+    for (const block of this._blocks) {
+      const lineCount = this._renderer(block).length;
+      this._blockLineCounts.set(block.id, lineCount);
+      this._lineToBlock.set(currentLine, block);
+      currentLine += lineCount;
+    }
+    const blockIds = new Set(this._blocks.map((block) => block.id));
+    for (const id of this._blockLineCounts.keys()) {
+      if (!blockIds.has(id)) {
+        this._blockLineCounts.delete(id);
+      }
+    }
+    this._changes.length = 0;
+    return this;
+  }
+};
+var transcript = ({ model, started, renderButton }) => {
+  return [
+    // Show timestamps in the gutter.
+    (0, import_view.gutter)({
+      class: "cm-timestamp-gutter",
+      lineMarkerChange: (update) => update.docChanged || update.viewportChanged,
+      markers: (view) => {
+        const start = getStartTime(started, model.blocks[0]);
+        const builder = new import_state.RangeSetBuilder();
+        for (const { from, to } of view.visibleRanges) {
+          let line = view.state.doc.lineAt(from);
+          while (line.from <= to) {
+            const timestamp = model.getBlockAtLine(line.number)?.segments[0]?.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.
+    import_view.ViewPlugin.fromClass(class {
+      constructor(view) {
+        this._initialized = false;
+        this._adapter = new DocumentAdapter(view);
+        const scroller = view.scrollDOM;
+        let isAutoScrolling = false;
+        let hasScrolled = false;
+        const scrollToBottom = () => {
+          scroller.style.scrollBehavior = "smooth";
+          scroller.classList.add("cm-hide-scrollbar");
+          isAutoScrolling = true;
+          setTimeout(() => {
+            this._controls?.classList.add("opacity-0");
+            scroller.classList.remove("cm-hide-scrollbar");
+            isAutoScrolling = false;
+          }, 500);
+          view.dispatch({
+            effects: import_view.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();
+            }
+          }, view);
+        }
+        this._cleanup = (0, import_async.combine)((0, import_async.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();
+          }
+        }));
+      }
+      update(update) {
+        if (!this._initialized) {
+          this._initialized = true;
+          setTimeout(() => {
+            model.sync(this._adapter);
+          });
+        }
+      }
+      destroy() {
+        this._controls?.remove();
+        this._cleanup();
+      }
+    }),
+    import_view.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 import_view.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: import_view.EditorView.scrollIntoView(pos, {
+          y: "start"
+        })
+      });
+    };
+    return el;
+  }
+};
+var getStartTime = (started, block) => {
+  if (started) {
+    return started;
+  }
+  if (block?.segments[0]?.started) {
+    return new Date(block.segments[0].started);
+  }
+  return void 0;
+};
+var formatTimestamp = (timestamp, relative) => {
+  if (!relative) {
+    return (0, import_format.format)(timestamp, "HH:mm:ss");
+  } else {
+    const pad = (n = 0) => String(n).padStart(2, "0");
+    const { hours, minutes, seconds } = (0, import_intervalToDuration.intervalToDuration)({
+      start: relative,
+      end: timestamp
+    });
+    return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+  }
+};
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-transcription/src/components/Transcript/Transcript.tsx";
+var renderMarkdown = (block, debug = false) => {
+  return [
+    `###### ${block.authorName}` + (debug ? ` (${block.id})` : ""),
+    block.segments.map((segment) => segment.text.trim()).join(" "),
+    ""
+  ];
+};
+var Transcript = ({ classNames, transcript: object, space, model, attendableId, ignoreAttention }) => {
+  const client = (0, import_react_client.useClient)();
+  const { themeMode } = (0, import_react_ui.useThemeContext)();
+  const { parentRef } = (0, import_react_ui_editor.useTextEditor)(() => {
+    return {
+      extensions: [
+        (0, import_react_ui_editor.createBasicExtensions)({
+          readOnly: true,
+          lineWrapping: true
+        }),
+        (0, import_react_ui_editor.createMarkdownExtensions)({
+          themeMode
+        }),
+        (0, import_react_ui_editor.createThemeExtensions)({
+          themeMode
+        }),
+        (0, import_react_ui_editor.decorateMarkdown)(),
+        space && (0, import_react_ui_editor.preview)({
+          onLookup: async ({ label, ref }) => {
+            import_log.log.info("onLookup", {
+              label,
+              ref
+            }, {
+              F: __dxlog_file2,
+              L: 71,
+              S: void 0,
+              C: (f, a) => f(...a)
+            });
+            const dxn = import_keys.DXN.parse(ref);
+            if (!dxn) {
+              return null;
+            }
+            const object2 = await (0, import_react_client.resolveRef)(client, dxn, space);
+            return {
+              label,
+              object: object2
+            };
+          }
+        }),
+        transcript({
+          model,
+          started: object?.started ? new Date(object.started) : void 0,
+          renderButton: (0, import_react_ui_editor.createRenderer)(({ onClick }) => /* @__PURE__ */ import_react2.default.createElement(import_react_ui.IconButton, {
+            icon: "ph--arrow-line-down--regular",
+            iconOnly: true,
+            label: "Scroll to bottom",
+            onClick
+          }))
+        })
+      ].filter(import_util.isNotFalsy)
+    };
+  }, [
+    space,
+    model
+  ]);
+  return /* @__PURE__ */ import_react2.default.createElement("div", {
+    ref: parentRef,
+    className: (0, import_react_ui_theme.mx)("flex grow overflow-hidden", import_react_ui_editor.editorWidth, classNames)
+  });
+};
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-transcription/src/hooks/useAudioFile.ts";
+var useAudioFile = (audioUrl) => {
+  const [{ audio, stream, track }, setStream] = (0, import_react3.useState)({});
+  (0, import_react3.useEffect)(() => {
+    const t = setTimeout(async () => {
+      const response = await fetch(audioUrl);
+      const blob = await response.blob();
+      const audio2 = new Audio();
+      audio2.src = URL.createObjectURL(blob);
+      await new Promise((resolve, reject) => {
+        audio2.addEventListener("error", (err) => {
+          import_log3.log.error("error", {
+            err
+          }, {
+            F: __dxlog_file3,
+            L: 27,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          reject(err);
+        }, {
+          once: true
+        });
+        audio2.addEventListener("canplay", () => {
+          import_log3.log.info("starting...", void 0, {
+            F: __dxlog_file3,
+            L: 35,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          resolve();
+        }, {
+          once: true
+        });
+        audio2.load();
+      });
+      const ctx = new AudioContext();
+      const destination = ctx.createMediaStreamDestination();
+      destination.channelCount = 1;
+      const source = ctx.createMediaElementSource(audio2);
+      source.connect(destination);
+      setStream({
+        audio: audio2,
+        stream: destination.stream,
+        track: destination.stream.getAudioTracks()[0]
+      });
+    });
+    return () => clearTimeout(t);
+  }, [
+    audioUrl
+  ]);
+  return {
+    audio,
+    stream,
+    track
+  };
+};
+var useAudioTrack = (active) => {
+  const [track, setTrack] = (0, import_react4.useState)();
+  (0, import_react4.useEffect)(() => {
+    if (!active) {
+      track?.stop();
+      setTrack(void 0);
+      return;
+    }
+    const initAudio = async () => {
+      const audio = new Audio();
+      audio.srcObject = await navigator.mediaDevices.getUserMedia({
+        audio: true
+      });
+      const [track2] = audio.srcObject.getAudioTracks();
+      if (track2) {
+        setTrack(track2);
+      }
+    };
+    if (active) {
+      void initAudio();
+    }
+  }, [
+    active
+  ]);
+  return track;
+};
+var useQueueModelAdapter = (renderer, queue, initialBlocks = []) => {
+  const model = (0, import_react5.useMemo)(() => new BlockModel(renderer, initialBlocks), [
+    queue
+  ]);
+  (0, import_react5.useEffect)(() => {
+    if (!queue?.items.length) {
+      return;
+    }
+    const block = queue.items[queue.items.length - 1];
+    model.appendBlock(block);
+  }, [
+    model,
+    queue?.items.length
+  ]);
+  return model;
+};
+var AppGraphBuilder = (0, import_app_framework2.lazy)(() => import("./app-graph-builder-WWC4WNTG.cjs"));
+var IntentResolver = (0, import_app_framework2.lazy)(() => import("./intent-resolver-VY3XWYAA.cjs"));
+var MeetingTranscriptionState = (0, import_app_framework2.lazy)(() => import("./meeting-transcription-state-OYWCY5XE.cjs"));
+var ReactSurface = (0, import_app_framework2.lazy)(() => import("./react-surface-M2JQIIDY.cjs"));
+var Transcriber = (0, import_app_framework2.lazy)(() => import("./transcriber-E6AAB4SU.cjs"));
+var useTranscriber = ({ audioStreamTrack, onSegments, config }) => {
+  const [getTranscriber] = (0, import_app_framework.useCapabilities)(import_chunk_HYGDHS6X.TranscriptionCapabilities.Transcriber);
+  const transcriber = (0, import_react6.useMemo)(() => {
+    if (!onSegments || !audioStreamTrack || !getTranscriber) {
+      return void 0;
+    }
+    return getTranscriber({
+      audioStreamTrack,
+      onSegments,
+      config
+    });
+  }, [
+    audioStreamTrack,
+    onSegments,
+    getTranscriber,
+    config
+  ]);
+  (0, import_react6.useEffect)(() => {
+    return () => {
+      void transcriber?.close();
+    };
+  }, [
+    transcriber
+  ]);
+  return transcriber;
+};
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-transcription/src/hooks/useVoiceInput.ts";
+var useVoiceInput = ({ active, onUpdate }) => {
+  const soundStart = (0, import_react_ui_sfx.useSoundEffect)("StartRecording");
+  const soundStop = (0, import_react_ui_sfx.useSoundEffect)("StopRecording");
+  const handleSegments = (0, import_react7.useCallback)(async (segments) => {
+    const text = segments.map((str) => str.text.trim().replace(/[^\w\s]/g, "")).join(" ");
+    onUpdate(text);
+  }, []);
+  const [recording, setRecording] = (0, import_react7.useState)(false);
+  const track = useAudioTrack(active);
+  const transcriber = useTranscriber({
+    audioStreamTrack: track,
+    onSegments: handleSegments
+  });
+  (0, import_react7.useEffect)(() => {
+    const ctx = new import_context.Context(void 0, {
+      F: __dxlog_file4,
+      L: 43
+    });
+    (0, import_async3.scheduleMicroTask)(ctx, async () => {
+      if (active && transcriber) {
+        await transcriber.open();
+        import_log4.log.info("starting...", void 0, {
+          F: __dxlog_file4,
+          L: 47,
+          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();
+        import_log4.log.info("stopped", void 0, {
+          F: __dxlog_file4,
+          L: 54,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        setRecording(false);
+        void soundStop.play();
+      }
+    });
+    return () => {
+      void ctx.dispose();
+    };
+  }, [
+    active,
+    transcriber
+  ]);
+  return {
+    recording
+  };
+};
+var TranscriptionContainer = ({ role, transcript: transcript2 }) => {
+  const attendableId = (0, import_echo.fullyQualifiedId)(transcript2);
+  const space = (0, import_echo.getSpace)(transcript2);
+  const queue = (0, import_echo2.useQueue)(transcript2.queue.dxn, {
+    pollInterval: 1e3
+  });
+  const model = useQueueModelAdapter(renderMarkdown, queue);
+  return /* @__PURE__ */ import_react.default.createElement(import_react_ui_stack.StackItem.Content, {
+    role,
+    classNames: "container-max-width pli-2"
+  }, /* @__PURE__ */ import_react.default.createElement(Transcript, {
+    attendableId,
+    space,
+    model,
+    transcript: transcript2
+  }));
+};
+var TranscriptContainer_default = TranscriptionContainer;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppGraphBuilder,
+  IntentResolver,
+  MeetingTranscriptionState,
+  ReactSurface,
+  Transcriber,
+  Transcript,
+  TranscriptContainer_default,
+  TranscriptionContainer,
+  renderMarkdown,
+  useAudioFile,
+  useAudioTrack,
+  useQueueModelAdapter,
+  useTranscriber,
+  useVoiceInput
+});
+//# sourceMappingURL=chunk-KO6MKCED.cjs.map