Transcript

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={true}):

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;

Toolbar disabled (toolbar={false}):

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={false}
      emptyState={<div>No transcript available.</div>}
      showSpeaker={true}
      showTimestamps={true}
      resumeAutoscrollLabel="Scroll to active"
      onTimestampClick={(timestamp) =>
        console.log("Timestamp clicked!", timestamp)
      }
    />
  );
}

export default App;

transcript

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

transcriptComponent?

Description	A custom component that renders the transcript text. If not provided, uses the default Text component.
Type	ComponentType<{ highlight: ...; text: ...; }>

TranscriptData properties

Property	Type	Description
speaker	string	The speaker label.
start	number	A timestamp indicating when the transcript item begins in the recording.
end	number	A timestamp indicating when the transcript item ends in the recording.
text	string	The content of the transcript item.