@dxos/plugin-transcription 0.8.0 → 0.8.1-main.013e445

package/src/components/Transcript/Transcript.stories.tsx

@@ -5,31 +5,58 @@
 import '@dxos-theme';
 
 import { type StoryObj, type Meta } from '@storybook/react';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { faker } from '@dxos/random';
-import { ScrollContainer } from '@dxos/react-ui-components';
+import { hues } from '@dxos/react-ui-theme';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { Transcript } from './Transcript';
 import translations from '../../translations';
 
+let start = new Date(Date.now() - 24 * 60 * 60 * 10_000);
+const next = () => {
+  start = new Date(start.getTime() + Math.random() * 10_000);
+  return start;
+};
+
+const users = Array.from({ length: 5 }, () => ({
+  authorName: faker.person.fullName(),
+  authorHue: faker.helpers.arrayElement(hues),
+}));
+
+const createBlock = () => {
+  const author = faker.helpers.arrayElement(users);
+  return {
+    id: faker.string.uuid(),
+    ...author,
+    segments: Array.from({ length: 1 + Math.floor(Math.random() * 2) }, () => ({
+      started: next(),
+      text: faker.lorem.paragraph(),
+    })),
+  };
+};
+
 const meta: Meta<typeof Transcript> = {
   title: 'plugins/plugin-transcription/Transcript',
   component: Transcript,
-  render: (args) => (
-    <div className='flex w-[30rem] p-2'>
-      <ScrollContainer>
-        <Transcript {...args} />
-      </ScrollContainer>
-    </div>
-  ),
+  render: ({ blocks: initialBlocks = [], ...args }) => {
+    const [blocks, setBlocks] = useState(initialBlocks);
+    useEffect(() => {
+      const i = setInterval(() => {
+        setBlocks((blocks) => [...blocks, createBlock()]);
+      }, 1_000);
+
+      return () => clearInterval(i);
+    }, []);
+
+    return <Transcript {...args} blocks={blocks} />;
+  },
   decorators: [
     withTheme,
     withLayout({
       tooltips: true,
       fullscreen: true,
-      classNames: 'justify-center',
     }),
   ],
   parameters: {
@@ -41,25 +68,17 @@ export default meta;
 
 type Story = StoryObj<typeof Transcript>;
 
-let start = new Date();
-const next = () => {
-  start = new Date(start.getTime() - Math.random() * 30_000);
-  return start;
-};
-
-const names = Array.from({ length: 3 }, () => faker.person.fullName());
-
 export const Default: Story = {
   args: {
-    blocks: Array.from({ length: 6 + Math.floor(Math.random()) * 15 }, () => ({
-      id: faker.string.uuid(),
-      author: faker.helpers.arrayElement(names),
-      segments: Array.from({ length: 1 + Math.floor(Math.random() * 3) }, () => ({
-        started: next(),
-        text: faker.lorem.paragraph(),
-      })),
-    })).reverse(),
+    ignoreAttention: true,
+    attendableId: 'story',
+    blocks: Array.from({ length: 10 }, createBlock),
   },
 };
 
-export const Empty: Story = {};
+export const Empty: Story = {
+  args: {
+    ignoreAttention: true,
+    attendableId: 'story',
+  },
+};

package/src/components/Transcript/Transcript.tsx

@@ -2,68 +2,224 @@
 // Copyright 2023 DXOS.org
 //
 
-import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
-import React, { type FC } from 'react';
+import { intervalToDuration } from 'date-fns/intervalToDuration';
+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 { Icon, IconButton, useTranslation } from '@dxos/react-ui';
+import { IconButton, 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';
 import { type TranscriptBlock } from '../../types';
 
-// TODO(burdon): react-ui-list.
 // 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,
+);
+
 export type TranscriptProps = {
   blocks?: TranscriptBlock[];
+  attendableId?: string;
+  ignoreAttention?: boolean;
+};
+
+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 const Transcript: FC<TranscriptProps> = ({ blocks }) => {
+export const Transcript: FC<TranscriptProps> = ({ blocks, attendableId, ignoreAttention }) => {
   const { t } = useTranslation(TRANSCRIPTION_PLUGIN);
-  const hoverButton = 'p-1 min-bs-1 transition-opacity duration-250 opacity-10 group-hover:opacity-100';
+  const { hasAttention } = useAttention(attendableId);
+  const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
+  const [rows, setRows] = useState<DxGridAxisMeta | undefined>(undefined);
+  const [columns, setColumns] = useState<DxGridAxisMeta | undefined>(undefined);
+  const [autoScroll, setAutoScroll] = useState(true);
+
+  const queueMap = useMemo(() => mapTranscriptQueue(blocks), [blocks]);
+
+  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(transcriptStart, 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='list' className='flex flex-col grow gap-2 m-1'>
-      {blocks?.map((block) => (
-        <div
-          role='listitem'
-          key={block.id}
-          className='flex flex-col py-1 border border-transparent hover:border-separator rounded'
-        >
-          <div className='group flex items-center px-2'>
-            <Icon icon='ph--user--regular' />
-            <div className='px-2 text-sm text-subdued'>{block.author}</div>
-            <div className='grow' />
-            <IconButton
-              disabled
-              icon='ph--x--regular'
-              label={t('delete button')}
-              iconOnly
-              size={4}
-              classNames={hoverButton}
-            />
-          </div>
-
-          {block.segments.map((segment, i) => (
-            <div key={i} className='group flex flex-col'>
-              <div className='px-2'>{segment.text}</div>
-              <div className='flex gap-1 items-center justify-between px-2'>
-                <div className='grow' />
-                <div className='truncate text-xs text-subdued'>
-                  {formatDistanceToNow(segment.started, { addSuffix: true })}
-                </div>
-                <IconButton
-                  disabled
-                  icon='ph--bookmark-simple--regular'
-                  label={t('bookmark button')}
-                  iconOnly
-                  size={4}
-                  classNames={hoverButton}
-                />
-              </div>
-            </div>
-          ))}
-        </div>
-      ))}
-    </div>
+    <>
+      <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}
+      />
+    </>
   );
 };

package/src/components/TranscriptContainer.tsx

@@ -2,166 +2,31 @@
 // Copyright 2024 DXOS.org
 //
 
-import { pipe } from 'effect';
-import React, { useCallback, useMemo, useState, type FC } from 'react';
+import React, { type FC, Fragment } from 'react';
 
-import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
-import { Message } from '@dxos/artifact';
-import { AIServiceClientImpl, DEFAULT_LLM_MODEL, MixedStreamParser, type AIServiceClient } from '@dxos/assistant';
-import { create, getSpace, makeRef } from '@dxos/client/echo';
-import { QueueImpl } from '@dxos/echo-db';
-import { createStatic, isInstanceOf } from '@dxos/echo-schema';
-import { invariant } from '@dxos/invariant';
+import { fullyQualifiedId } from '@dxos/client/echo';
 import { DXN } from '@dxos/keys';
-import { log } from '@dxos/log';
-import { DocumentType } from '@dxos/plugin-markdown/types';
-import { CollectionType, SpaceAction } from '@dxos/plugin-space/types';
-import { useConfig } from '@dxos/react-client';
-import { useEdgeClient, useQueue, type EdgeHttpClient } from '@dxos/react-edge-client';
-import { IconButton, Toolbar, useTranslation } from '@dxos/react-ui';
-import { ScrollContainer } from '@dxos/react-ui-components';
+import { useQueue } from '@dxos/react-client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
-import { TextType } from '@dxos/schema';
 
 import { Transcript } from './Transcript';
-import { TRANSCRIPTION_PLUGIN } from '../meta';
-import { TranscriptBlock, type TranscriptType } from '../types';
+import { type TranscriptBlock, type TranscriptType } from '../types';
 
-export const TranscriptionContainer: FC<{ transcript: TranscriptType }> = ({ transcript }) => {
-  const { t } = useTranslation(TRANSCRIPTION_PLUGIN);
-  const edge = useEdgeClient();
-  const aiService = useAiServiceClient();
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+export const TranscriptionContainer: FC<{ transcript: TranscriptType; role: string }> = ({ transcript, role }) => {
+  const attendableId = fullyQualifiedId(transcript);
 
-  const queue = useQueue<TranscriptBlock>(edge, transcript.queue ? DXN.parse(transcript.queue) : undefined, {
+  const queue = useQueue<TranscriptBlock>(transcript.queue ? DXN.parse(transcript.queue) : undefined, {
     pollInterval: 1_000,
   });
 
-  // TODO(dmaretskyi): Pending state and errors should be handled by the framework!!!
-  const [isSummarizing, setIsSummarizing] = useState(false);
-  const handleSummarize = useCallback(async () => {
-    setIsSummarizing(true);
-    try {
-      const document = await summarizeTranscript(edge, aiService, transcript);
-      const space = getSpace(transcript);
-      const target = space?.properties[CollectionType.typename]?.target;
-      await dispatch(
-        pipe(
-          createIntent(SpaceAction.AddObject, { object: document, target }),
-          chain(LayoutAction.Open, { part: 'main' }),
-        ),
-      );
-    } finally {
-      setIsSummarizing(false);
-    }
-  }, [transcript, edge]);
+  const Root = role === 'article' ? StackItem.Content : Fragment;
+  const rootProps = role === 'article' ? { toolbar: false } : {};
 
-  // TODO(dmaretskyi): Move action to menu.
   return (
-    <StackItem.Content toolbar={true}>
-      <StackItem.Heading>
-        <Toolbar.Root classNames='flex gap-2'>
-          <IconButton
-            icon='ph--subtitles--regular'
-            iconOnly
-            size={5}
-            disabled={isSummarizing}
-            onClick={handleSummarize}
-            label={t('summary button')}
-          />
-          {isSummarizing && <div className='text-sm'>{t('summarizing label')}</div>}
-        </Toolbar.Root>
-      </StackItem.Heading>
-      <ScrollContainer>
-        <Transcript blocks={queue?.items} />
-      </ScrollContainer>
-    </StackItem.Content>
+    <Root {...(rootProps as any)}>
+      <Transcript blocks={queue?.items} attendableId={attendableId} />
+    </Root>
   );
 };
 
 export default TranscriptionContainer;
-
-// TODO(dmaretskyi): Extract to the new file once transcript refactoring has settled.
-const summarizeTranscript = async (
-  edgeClient: EdgeHttpClient,
-  aiService: AIServiceClient,
-  transcript: TranscriptType,
-) => {
-  invariant(transcript.queue, 'No queue found for transcript');
-
-  const queue = new QueueImpl(edgeClient, DXN.parse(transcript.queue));
-  await queue.refresh();
-  const content = queue.items
-    .filter((block) => isInstanceOf(TranscriptBlock, block))
-    .map((block) => `${block.author}: ${block.segments.map((segment) => segment.text).join('\n')}`)
-    .join('\n\n');
-
-  const parser = new MixedStreamParser();
-
-  log.info('summarizing transcript', { blockCount: queue.items.length });
-  const output = await parser.parse(
-    await aiService.exec({
-      model: DEFAULT_LLM_MODEL,
-      systemPrompt: SUMMARIZE_PROMPT,
-      history: [createStatic(Message, { role: 'user', content: [{ type: 'text', text: content }] })],
-    }),
-  );
-
-  log.info('transcript summary', { output });
-  invariant(output[0].content[0].type === 'text', 'Expected text content');
-  const summary = output[0].content[0].text;
-
-  // TODO(dmaretskyi): .started is missing.
-  const name = `Summary ${(transcript.started ?? new Date()).toLocaleString('en-US', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  })}`;
-
-  return create(DocumentType, {
-    name,
-    content: makeRef(create(TextType, { content: summary })),
-    threads: [],
-  });
-};
-
-// TODO(dmaretskyi): Add example to set consistent structure for the summary.
-const SUMMARIZE_PROMPT = `
-  # Goal
-  Create a markdown summary of the transcript provided.
-
-  # Formatting
-  - Format the summary as a markdown document without extra comments like "Here is the summary of the transcript:".
-  - Use markdown formatting for headings and bullet points.
-  - Format the summary as a list of key points and takeaways.
-  - All names of people should be in bold.
-
-  # Note Taking
-  - Correlate items in the summary with the person of origin to build a coherent narrative.
-  - Include short quotes verbatim where appropriate. Especially when concerned with design decisions and problem descriptions.
-
-  # Tasks
-  At the end of the summary include tasks.
-  Extract only the tasks that are:
-  - Directly actionable
-  - Clearly assigned to a person or team (or can easily be inferred)
-  - Strongly implied by the conversation and/or user note (no speculative tasks)
-  - Specific enough that someone reading them would know exactly what to do next
-
-  Format all tasks as markdown checkboxes using the syntax:
-  - [ ] Task description
-
-  Additional information can be included (indented).
-
-  If no actionable tasks are found, omit this tasks section.
-`;
-
-// TODO(dmaretskyi): Extract?
-//  Also this conflicts with plugin automation providing the ai client via a capability. Need to reconcile.
-const useAiServiceClient = (): AIServiceClient => {
-  const config = useConfig();
-  const endpoint = config.values.runtime?.services?.ai?.server ?? 'http://localhost:8788'; // TOOD(burdon): Standardize consts.
-  return useMemo(() => new AIServiceClientImpl({ endpoint }), [endpoint]);
-};

package/src/components/transcription.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import React, {
   type Dispatch,
   type FC,
@@ -20,19 +20,19 @@ import { createStatic } from '@dxos/echo-schema';
 import { type DXN } from '@dxos/keys';
 import { log } from '@dxos/log';
 import { Config } from '@dxos/react-client';
+import { useQueue } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { useEdgeClient, useQueue } from '@dxos/react-edge-client';
 import { IconButton, Toolbar } from '@dxos/react-ui';
 import { ScrollContainer } from '@dxos/react-ui-components';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Transcript } from './Transcript';
-import { useTranscriber, useAudioFile, useAudioTrack } from '../hooks';
+import { useAudioFile, useAudioTrack, useTranscriber } from '../hooks';
 import { type TranscriberParams } from '../transcriber';
 import { TranscriptBlock } from '../types';
 import { randomQueueDxn } from '../util';
 
-const UX: FC<{
+const TranscriptionStory: FC<{
   playing: boolean;
   setPlaying: Dispatch<SetStateAction<boolean>>;
   blocks?: TranscriptBlock[];
@@ -48,7 +48,7 @@ const UX: FC<{
         />
       </Toolbar.Root>
       <ScrollContainer>
-        <Transcript blocks={blocks} />
+        <Transcript blocks={blocks} attendableId='story' />
       </ScrollContainer>
     </div>
   );
@@ -62,8 +62,7 @@ const Microphone = () => {
 
   // Queue.
   const queueDxn = useMemo(() => randomQueueDxn(), []);
-  const echoClient = useEdgeClient();
-  const queue = useQueue<TranscriptBlock>(echoClient, queueDxn, { pollInterval: 500 });
+  const queue = useQueue<TranscriptBlock>(queueDxn, { pollInterval: 500 });
 
   // Transcriber.
   const handleSegments = useCallback<TranscriberParams['onSegments']>(
@@ -90,7 +89,7 @@ const Microphone = () => {
     }
   }, [transcriber, playing, transcriber?.isOpen]);
 
-  return <UX playing={playing} setPlaying={setPlaying} blocks={queue?.items} />;
+  return <TranscriptionStory playing={playing} setPlaying={setPlaying} blocks={queue?.items} />;
 };
 
 const AudioFile = ({ queueDxn, audioUrl }: { queueDxn: DXN; audioUrl: string; transcriptUrl: string }) => {
@@ -119,11 +118,10 @@ const AudioFile = ({ queueDxn, audioUrl }: { queueDxn: DXN; audioUrl: string; tr
   }, [audio, playing]);
 
   // Transcriber.
-  const echoClient = useEdgeClient();
-  const queue = useQueue<TranscriptBlock>(echoClient, queueDxn, { pollInterval: 500 });
+  const queue = useQueue<TranscriptBlock>(queueDxn, { pollInterval: 500 });
   const handleSegments = useCallback<TranscriberParams['onSegments']>(
     async (segments) => {
-      const block = createStatic(TranscriptBlock, { author: 'test', segments });
+      const block = createStatic(TranscriptBlock, { authorName: 'test', authorHue: 'cyan', segments });
       queue?.append([block]);
     },
     [queue],
@@ -153,7 +151,7 @@ const AudioFile = ({ queueDxn, audioUrl }: { queueDxn: DXN; audioUrl: string; tr
     }
   }, [transcriber, track?.readyState, transcriber?.isOpen]);
 
-  return <UX playing={playing} setPlaying={setPlaying} blocks={queue?.items} />;
+  return <TranscriptionStory playing={playing} setPlaying={setPlaying} blocks={queue?.items} />;
 };
 
 const meta: Meta<typeof AudioFile> = {

package/src/hooks/index.ts

@@ -4,6 +4,5 @@
 
 export * from './useAudioFile';
 export * from './useAudioTrack';
-export * from './useIsSpeaking';
 export * from './useTranscriber';
 export * from './useVoiceInput';

package/src/index.ts

@@ -7,5 +7,6 @@ export * from './components';
 export * from './hooks';
 export * from './meta';
 export * from './transcriber';
+export * from './transcription-manager';
 
 export * from './TranscriptionPlugin';

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type PluginMeta } from '@dxos/app-framework';
 
 export const TRANSCRIPTION_PLUGIN = 'dxos.org/plugin/transcription';
 
-export const meta = {
+export const meta: PluginMeta = {
   id: TRANSCRIPTION_PLUGIN,
   name: 'Transcription',
   description: 'Voice transcription.',
@@ -14,4 +14,4 @@ export const meta = {
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/experimental/plugin-transcription',
   tags: ['experimental'],
   screenshots: [],
-} satisfies PluginMeta;
+};

package/src/transcriber/index.ts

@@ -4,4 +4,5 @@
 
 export * from './audio-recorder';
 export * from './media-stream-recorder';
+export * from './summarize';
 export * from './transcriber';