Transcript component

The Transcript component displays the text transcript of a meeting that was recorded using Notetaker. It automatically formats speaker labels and transcribed text in a clear, readable way.

You can use the Transcript component to present a diarized transcript on a meeting summary page. It accepts transcript data as an array of segments, each with a speaker name and text, or as plain text.

Using the `Transcript` component

import { Transcript } from "@nylas/react";
// import '@nylas/react/style.css' // to style the component

const transcriptData = [
  {
    start: 1000,
    end: 2000,
    speaker: "Alice",
    text: "Hello world!",
  },
  {
    start: 5000,
    end: 6000,
    speaker: "Bob",
    text: "How are you?",
  },
];

function App() {
  return (
    <Transcript
      transcript={transcriptData}
      autoscroll={false}
      toolbar={true}
      emptyState={<div>No transcript available.</div>}
      showSpeaker={true}
      showTimestamps={true}
      resumeAutoscrollLabel="Scroll to active"
      onTimestampClick={(timestamp) =>
        console.log("Timestamp clicked!", timestamp)
      }
    />
  );
}


export default App;

Integrating with `VideoPlayer` component

When you use the Transcript and VideoPlayer components on the same page, they automatically synchronize. This means…

Clicking on a timestamp in the transcript will seek the video recording to that position.
The transcript will automatically scroll to and highlight the current segment as the recording plays.

`Transcript` properties

`autoscroll?`


Description	Automatically scroll to the active item as the recording plays.
Type	`boolean`
Default	`true`

`emptyState?`


Description	A custom `ReactNode` to display when there are no transcripts.
Type	`ReactNode`

`onTimestampClick?`


Description	Callback function invoked when a user clicks a timestamp (play button). Receives the timestamp in seconds.
Type	`(timestamp: number) => void`

`resumeAutoscrollLabel?`


Description	A custom label for the Resume Autoscroll button.
Type	`string`
Default	`"Resume Autoscroll"`

`showSpeaker?`


Description	Show the speaker name for each transcript item.
Type	`boolean`
Default	`true`

`showTimestamps?`


Description	Show the timestamp for each transcript item.
Type	`boolean`
Default	`true`

`toolbar?`


Description	Display the toolbar at the top of the component.
Type	`boolean`
Default	`true`

Toolbar enabled
Toolbar disabled

`transcript`


Description	An array of transcript items to display.
Type	`TranscriptData[]`