# Transcript

Source: https://developer.nylas.com/docs/v3/components/notetaker-components/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

```jsx

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`](/docs/v3/components/notetaker-components/videoplayer-component/) 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`                                           |

<br />

Toolbar enabled (`toolbar={true}`):

```jsx

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}`):

```jsx

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[]`](#transcriptdata-properties) |

### `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.                                      |