@dxos/plugin-transcription 0.8.3 → 0.8.4-main.03d5cd7b56

package/src/components/Transcript/Transcript.tsx

@@ -1,100 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { type Space } from '@dxos/react-client/echo';
-import { type Identity } from '@dxos/react-client/halo';
-import { IconButton, type ThemedClassName, 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 { type DataType } from '@dxos/schema';
-import { isNotFalsy } from '@dxos/util';
-
-import { transcript } from './transcript-extension';
-import { type SerializationModel } from '../../model';
-import { type TranscriptType } from '../../types';
-
-export const renderMarkdown =
-  (identities: Identity[]) =>
-  (message: DataType.Message, index: number, debug = false): string[] => {
-    if (message.sender.role === 'assistant') {
-      // Start/stop block.
-      return [message.blocks.find((block) => block.type === 'transcription')?.text ?? '', ''];
-    }
-
-    // TODO(burdon): Use link/reference markup for users (with popover).
-    // TODO(burdon): Color and avatar.
-    const identity = identities.find((identity) => identity.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(' '),
-      '',
-    ];
-  };
-
-export type TranscriptProps = ThemedClassName<{
-  transcript?: TranscriptType;
-  space?: Space;
-  model: SerializationModel<DataType.Message>;
-  // TODO(wittjosiah): Move to container.
-  attendableId?: string;
-  ignoreAttention?: boolean;
-}>;
-
-/**
- * Transcript component implemented using the editor.
- */
-export const Transcript = ({
-  classNames,
-  transcript: object,
-  space,
-  model,
-  attendableId,
-  ignoreAttention,
-}: TranscriptProps) => {
-  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) : undefined,
-          renderButton: createRenderer(({ onClick }) => (
-            <IconButton icon='ph--arrow-line-down--regular' iconOnly label='Scroll to bottom' onClick={onClick} />
-          )),
-        }),
-      ].filter(isNotFalsy),
-    };
-  }, [space, model]);
-
-  return (
-    <div
-      ref={parentRef}
-      className={mx('flex grow overflow-hidden', editorWidth, classNames)}
-      data-popover-collision-boundary={true}
-    />
-  );
-};

package/src/components/Transcript/deprecated/OldTranscript.tsx

@@ -1,260 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { intervalToDuration } from 'date-fns/intervalToDuration';
-import { Schema } from 'effect';
-import { yieldOrContinue } from 'main-thread-scheduling';
-import React, { type FC, useCallback, useEffect, useMemo, useRef, useState, type WheelEvent } from 'react';
-import { type OnResizeCallback, useResizeDetector } from 'react-resize-detector';
-
-import { Type } from '@dxos/echo';
-import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { useAttention } from '@dxos/react-ui-attention';
-import {
-  type DxGridCellValue,
-  type DxGridElement,
-  type DxGridAxisMeta,
-  type DxGridPlaneCells,
-  Grid,
-  toPlaneCellIndex,
-} from '@dxos/react-ui-grid';
-import { mx } from '@dxos/react-ui-theme';
-
-import { TRANSCRIPTION_PLUGIN } from '../../../meta';
-
-/**
- * Transcription fragment.
- */
-const TranscriptSegment = Schema.Struct({
-  // TODO(burdon): TS from service is not Unix TS (x1000).
-  started: Schema.String,
-  text: Schema.String,
-});
-
-type TranscriptSegment = Schema.Schema.Type<typeof TranscriptSegment>;
-
-/**
- * Transcription block (from single speaker).
- */
-const TranscriptBlock = Schema.Struct({
-  id: Schema.String,
-  authorName: Schema.optional(Schema.String), // TODO(burdon): Replace with identityDid.
-  authorHue: Schema.optional(Schema.String), // TOOD(burdon): Remove.
-  segments: Schema.Array(TranscriptSegment),
-}).pipe(
-  Type.Obj({
-    typename: 'dxos.org/type/TranscriptBlock',
-    version: '0.1.0',
-  }),
-);
-
-type TranscriptBlock = Schema.Schema.Type<typeof TranscriptBlock>;
-
-// TODO(burdon): Actions (e.g., mark, summarize, translate, label, delete).
-
-const lineHeight = 20;
-const cellSpacing = 8 + 2;
-const timestampColumnWidth = 68;
-
-const authorClasses = 'font-medium text-base leading-[20px]';
-const timestampClasses = 'text-xs leading-[20px] text-description pie-0 tabular-nums';
-const segmentTextClasses = 'text-sm whitespace-normal hyphens-auto';
-const measureClasses = mx(
-  // NOTE(thure): The `inline-start` value must equal `timestampColumnWidth` plus grid’s gap (1px)
-  'absolute inline-start-[69px] inline-end-0 invisible z-[-1] border',
-  'pli-[--dx-grid-cell-padding-inline] plb-[--dx-grid-cell-padding-block] leading-[20px]',
-  segmentTextClasses,
-);
-
-const rowDefault = {
-  grid: { size: lineHeight + cellSpacing },
-};
-
-type QueueRows = [number, number][];
-
-const mapTranscriptQueue = (blocks?: TranscriptBlock[]): QueueRows => {
-  if (!blocks || !Array.isArray(blocks) || blocks.length === 0) {
-    return [];
-  } else {
-    return blocks.flatMap((block, blockIndex) => {
-      return [
-        [blockIndex, -1],
-        ...block.segments.map((segment, segmentIndex) => {
-          return [blockIndex, segmentIndex] as [number, number];
-        }),
-      ];
-    });
-  }
-};
-
-const pad = (n = 0) => String(n).padStart(2, '0');
-
-const formatTimestamp = (start: Date, end: Date) => {
-  const { hours, minutes, seconds } = intervalToDuration({ start, end });
-  return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
-};
-
-const measureRows = async (
-  host: HTMLDivElement,
-  blocks: TranscriptBlock[],
-  queueMap: QueueRows,
-  signal: AbortSignal,
-) => {
-  const result: DxGridAxisMeta = { grid: {} };
-  for (let row = 0; row < queueMap.length; row++) {
-    await yieldOrContinue('smooth', signal);
-    const [blockIndex, segmentIndex] = queueMap[row];
-    if (segmentIndex < 0) {
-      result.grid[row] = { size: lineHeight + cellSpacing };
-    } else {
-      host.textContent = blocks[blockIndex]!.segments[segmentIndex]!.text;
-      result.grid[row] = { size: host.offsetHeight };
-    }
-  }
-  return result;
-};
-
-export type TranscriptProps = ThemedClassName<{
-  blocks?: TranscriptBlock[];
-  attendableId?: string;
-  ignoreAttention?: boolean;
-}>;
-
-/**
- * @@deprecated
- */
-export const Transcript: FC<TranscriptProps> = ({ classNames, blocks, attendableId, ignoreAttention }) => {
-  const { t } = useTranslation(TRANSCRIPTION_PLUGIN);
-  const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
-  const [rows, setRows] = useState<DxGridAxisMeta | undefined>(undefined);
-  const [columns, setColumns] = useState<DxGridAxisMeta | undefined>(undefined);
-
-  const queueMap = useMemo(() => mapTranscriptQueue(blocks), [blocks]);
-
-  const { hasAttention } = useAttention(attendableId);
-  const [autoScroll, setAutoScroll] = useState(true);
-  const handleWheel = useCallback(
-    (event: WheelEvent) => {
-      setAutoScroll(false);
-      if (!ignoreAttention && !hasAttention) {
-        event.stopPropagation();
-      }
-    },
-    [hasAttention, ignoreAttention],
-  );
-
-  const abortControllerRef = useRef<AbortController>();
-
-  const handleResize = useCallback(
-    async ({ entry }: { entry: { target: HTMLDivElement } | null }) => {
-      if (entry?.target && Array.isArray(blocks) && blocks[0] && queueMap) {
-        abortControllerRef.current?.abort();
-        abortControllerRef.current = new AbortController();
-        setColumns({ grid: { 0: { size: timestampColumnWidth }, 1: { size: entry.target.offsetWidth } } });
-        return measureRows(entry.target, blocks, queueMap, abortControllerRef.current.signal)
-          .then(setRows)
-          .catch(() => {
-            // Aborted mid-measurement by new size.
-          });
-      }
-    },
-    [blocks, queueMap],
-  );
-
-  const { width, ref: measureRef } = useResizeDetector({
-    onResize: handleResize as OnResizeCallback,
-    refreshOptions: { leading: true },
-  });
-
-  useEffect(() => {
-    if (queueMap.length !== Object.keys(rows?.grid ?? {}).length) {
-      void handleResize({ entry: { target: measureRef.current } }).then(() => {
-        if (autoScroll) {
-          // TODO(thure): Implement a deterministic way to do this when `rows` has fully settled and grid has a new `maxPosBlock`.
-          setTimeout(() => dxGrid?.scrollToEndRow(), 50);
-        }
-      });
-    }
-  }, [blocks, queueMap, width, autoScroll]);
-
-  useEffect(() => {
-    if (dxGrid && Array.isArray(blocks) && blocks[0]) {
-      const transcriptStart = blocks[0]!.segments[0]!.started;
-      dxGrid.getCells = (range, plane) => {
-        switch (plane) {
-          case 'grid': {
-            const cells: DxGridPlaneCells = {};
-            for (let row = range.start.row; row <= range.end.row && row < queueMap.length; row++) {
-              const [blockIndex, segmentIndex] = queueMap[row];
-
-              cells[toPlaneCellIndex({ col: 0, row })] = {
-                readonly: true,
-                value:
-                  segmentIndex < 0
-                    ? formatTimestamp(
-                        new Date(transcriptStart),
-                        new Date(blocks[blockIndex]!.segments[Math.max(0, segmentIndex)]!.started),
-                      )
-                    : '',
-                className: timestampClasses,
-              } satisfies DxGridCellValue;
-
-              cells[toPlaneCellIndex({ col: 1, row })] = (
-                segmentIndex < 0
-                  ? {
-                      readonly: true,
-                      accessoryHtml: `<span data-hue="${blocks[blockIndex]!.authorHue}" class="dx-text-hue">${blocks[blockIndex]!.authorName}</span>`,
-                      className: authorClasses,
-                    }
-                  : {
-                      readonly: true,
-                      value: blocks[blockIndex]!.segments[segmentIndex]!.text,
-                      className: segmentTextClasses,
-                    }
-              ) satisfies DxGridCellValue;
-            }
-            return cells;
-          }
-          default:
-            return {};
-        }
-      };
-    }
-  }, [dxGrid, blocks]);
-
-  const handleScrollToEnd = useCallback(() => {
-    setAutoScroll(true);
-    dxGrid?.scrollToEndRow();
-  }, [dxGrid, autoScroll]);
-
-  return (
-    <div role='none' className={mx('relative min-bs-0', classNames)}>
-      <Grid.Root id={`${attendableId}--transcript`}>
-        <Grid.Content
-          limitColumns={2}
-          limitRows={queueMap.length}
-          columns={columns}
-          rows={rows}
-          rowDefault={rowDefault}
-          onWheel={handleWheel}
-          className='[--dx-grid-base:var(--dx-baseSurface)] [--dx-grid-lines:var(--dx-baseSurface)] [&_.dx-grid]:min-bs-0 [&_.dx-grid]:min-is-0 [&_.dx-grid]:select-auto'
-          ref={setDxGrid}
-        />
-      </Grid.Root>
-      <div role='none' {...{ inert: '' }} aria-hidden className={measureClasses} ref={measureRef} />
-      <IconButton
-        icon='ph--arrow-line-down--regular'
-        iconOnly
-        label={t('scroll to end label')}
-        tooltipSide='left'
-        data-state={autoScroll ? 'invisible' : 'visible'}
-        classNames={[
-          'absolute inline-end-2 block-end-2 opacity-0 pointer-events-none',
-          'data-[state="visible"]:pointer-events-auto data-[state="visible"]:opacity-100 transition-opacity',
-        ]}
-        onClick={handleScrollToEnd}
-      />
-    </div>
-  );
-};

package/src/components/TranscriptContainer.tsx

@@ -1,30 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { type FC } from 'react';
-
-import { fullyQualifiedId, getSpace } from '@dxos/client/echo';
-import { useMembers, useQueue } from '@dxos/react-client/echo';
-import { StackItem } from '@dxos/react-ui-stack';
-import { type DataType } from '@dxos/schema';
-
-import { Transcript, renderMarkdown } from './Transcript';
-import { useQueueModelAdapter } from '../hooks';
-import { type TranscriptType } from '../types';
-
-export const TranscriptionContainer: FC<{ role: string; transcript: TranscriptType }> = ({ role, transcript }) => {
-  const attendableId = fullyQualifiedId(transcript);
-  const space = getSpace(transcript);
-  const members = useMembers(space?.key).map((member) => member.identity);
-  const queue = useQueue<DataType.Message>(transcript.queue.dxn, { pollInterval: 1_000 });
-  const model = useQueueModelAdapter(renderMarkdown(members), queue);
-
-  return (
-    <StackItem.Content role={role} classNames='container-max-width pli-2'>
-      <Transcript attendableId={attendableId} space={space} model={model} transcript={transcript} />
-    </StackItem.Content>
-  );
-};
-
-export default TranscriptionContainer;

package/src/components/stories/FileTranscription.stories.tsx

@@ -1,242 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import { EdgeAiServiceClient } from '@dxos/ai';
-import { AI_SERVICE_ENDPOINT } from '@dxos/ai/testing';
-import { Events, IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { scheduleTask } from '@dxos/async';
-import { Context } from '@dxos/context';
-import { Obj } from '@dxos/echo';
-import { MemoryQueue } from '@dxos/echo-db';
-import { createQueueDXN } from '@dxos/echo-schema';
-import { FunctionExecutor, ServiceContainer } from '@dxos/functions';
-import { log } from '@dxos/log';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { PreviewPlugin } from '@dxos/plugin-preview';
-import { SpacePlugin } from '@dxos/plugin-space';
-import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
-import { ThemePlugin } from '@dxos/plugin-theme';
-import { defaultTx } from '@dxos/react-ui-theme';
-import { DataType } from '@dxos/schema';
-import { seedTestData, Testing } from '@dxos/schema/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { TranscriptionStory } from './TranscriptionStory';
-import { useIsSpeaking } from './useIsSpeaking';
-import { TranscriptionPlugin } from '../../TranscriptionPlugin';
-import { useAudioFile, useQueueModelAdapter, useTranscriber } from '../../hooks';
-import { getActorId, MessageNormalizer } from '../../segments-normalization';
-import { TestItem } from '../../testing';
-import { type MediaStreamRecorderParams, type TranscriberParams } from '../../transcriber';
-import { renderMarkdown } from '../Transcript';
-
-const AudioFile = ({
-  detectSpeaking,
-  audioUrl,
-  normalizeSentences,
-  transcriberConfig,
-  recorderConfig,
-  audioConstraints,
-}: {
-  detectSpeaking?: boolean;
-  normalizeSentences?: boolean;
-  audioUrl: string;
-  transcriberConfig?: TranscriberParams['config'];
-  recorderConfig?: MediaStreamRecorderParams['config'];
-  audioConstraints?: MediaTrackConstraints;
-}) => {
-  const [running, setRunning] = useState(false);
-  const actor: DataType.Actor = useMemo(() => ({ name: 'You' }), []);
-
-  // Audio.
-  const { audio, track, stream } = useAudioFile(audioUrl, audioConstraints);
-
-  // Speaking.
-  const isSpeaking = detectSpeaking ? useIsSpeaking(track) : true;
-  const ref = useRef<HTMLAudioElement>(null);
-  useEffect(() => {
-    if (ref.current && stream) {
-      ref.current.srcObject = stream;
-    }
-  }, [stream]);
-
-  useEffect(() => {
-    if (!audio) {
-      log.warn('no audio');
-      return;
-    }
-
-    if (running) {
-      void audio.play();
-    } else {
-      void audio.pause();
-    }
-  }, [audio, running]);
-
-  // Transcriber.
-  // TODO(dmaretskyi): Use space.queues.create() instead.
-  const queueDxn = useMemo(() => createQueueDXN(), []);
-  const queue = useMemo(() => new MemoryQueue<DataType.Message>(queueDxn), [queueDxn]);
-
-  const model = useQueueModelAdapter(renderMarkdown([]), queue);
-  const handleSegments = useCallback<TranscriberParams['onSegments']>(
-    async (blocks) => {
-      const message = Obj.make(DataType.Message, { sender: actor, created: new Date().toISOString(), blocks });
-      void queue?.append([message]);
-    },
-    [queue],
-  );
-
-  const transcriber = useTranscriber({
-    audioStreamTrack: track,
-    onSegments: handleSegments,
-    transcriberConfig,
-    recorderConfig,
-  });
-
-  // Normalize sentences.
-  const normalizer = useMemo(() => {
-    if (!normalizeSentences) {
-      return;
-    }
-    const executor = new FunctionExecutor(
-      new ServiceContainer().setServices({
-        ai: {
-          client: new EdgeAiServiceClient({
-            endpoint: AI_SERVICE_ENDPOINT.REMOTE,
-            defaultGenerationOptions: {
-              model: '@anthropic/claude-3-5-sonnet-20241022',
-            },
-          }),
-        },
-      }),
-    );
-
-    return new MessageNormalizer({
-      functionExecutor: executor,
-      queue,
-      startingCursor: { actorId: getActorId(actor), timestamp: new Date().toISOString() },
-    });
-  }, [normalizeSentences, queue, actor]);
-
-  useEffect(() => {
-    if (!normalizer) {
-      return;
-    }
-    const ctx = new Context();
-    scheduleTask(ctx, async () => {
-      await normalizer.open();
-      ctx.onDispose(async () => {
-        await normalizer.close();
-      });
-    });
-    return () => {
-      void ctx.dispose();
-    };
-  }, [normalizer]);
-
-  const manageChunkRecording = () => {
-    if (running && isSpeaking) {
-      log.info('starting transcription');
-      transcriber?.startChunksRecording();
-    } else if (!isSpeaking || !running) {
-      log.info('stopping transcription');
-      transcriber?.stopChunksRecording();
-    }
-  };
-
-  useEffect(() => {
-    const ctx = new Context();
-    scheduleTask(ctx, async () => {
-      if (transcriber && running) {
-        await transcriber.open();
-      } else if (!running) {
-        await transcriber?.close();
-      }
-      manageChunkRecording();
-    });
-
-    return () => {
-      void ctx.dispose();
-    };
-  }, [transcriber, running]);
-
-  useEffect(() => {
-    manageChunkRecording();
-  }, [isSpeaking, stream]);
-
-  return <TranscriptionStory model={model} running={running} onRunningChange={setRunning} audioRef={ref} />;
-};
-
-const meta: Meta<typeof AudioFile> = {
-  title: 'plugins/plugin-transcription/FileTranscription',
-  decorators: [
-    withPluginManager({
-      plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin(),
-        ClientPlugin({
-          types: [TestItem, DataType.Person, DataType.Organization, Testing.DocumentType],
-          onClientInitialized: async (_, client) => {
-            await client.halo.createIdentity();
-            await client.spaces.waitUntilReady();
-            await client.spaces.default.waitUntilReady();
-            await seedTestData(client.spaces.default);
-          },
-        }),
-        SpacePlugin(),
-        SettingsPlugin(),
-        PreviewPlugin(),
-        IntentPlugin(),
-        TranscriptionPlugin(),
-      ],
-      fireEvents: [Events.SetupAppGraph],
-    }),
-    withTheme,
-    withLayout({ fullscreen: true, classNames: 'justify-center' }),
-  ],
-};
-
-export default meta;
-
-const TRANSCRIBER_CONFIG = {
-  transcribeAfterChunksAmount: 100,
-  prefixBufferChunksAmount: 50,
-  normalizeSentences: true,
-};
-
-const RECORDER_CONFIG = {
-  interval: 200,
-};
-
-export const Default: StoryObj<typeof AudioFile> = {
-  render: AudioFile,
-  args: {
-    detectSpeaking: true,
-    // https://learnenglish.britishcouncil.org/general-english/audio-zone/living-london
-    audioUrl: 'https://dxos.network/audio-london.m4a',
-    // textUrl: 'https://dxos.network/audio-london.txt',
-    transcriberConfig: TRANSCRIBER_CONFIG,
-    recorderConfig: RECORDER_CONFIG,
-  },
-};
-
-export const WithSentenceNormalization: StoryObj<typeof AudioFile> = {
-  render: AudioFile,
-  args: {
-    detectSpeaking: true,
-    normalizeSentences: true,
-    // https://learnenglish.britishcouncil.org/general-english/audio-zone/living-london
-    audioUrl: 'https://dxos.network/audio-london.m4a',
-    // textUrl: 'https://dxos.network/audio-london.txt',
-    transcriberConfig: TRANSCRIBER_CONFIG,
-    recorderConfig: RECORDER_CONFIG,
-  },
-};