@twentyhq/call-recorder 1.0.1 → 1.0.2

package/src/fields/call-recorder-preference-on-calendar-event.field.ts

@@ -1,41 +0,0 @@
-import {
-  defineField,
-  FieldType,
-  STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS,
-} from 'twenty-sdk/define';
-
-import { CallRecorderPreference } from 'src/constants/call-recorder-preference';
-import { CALL_RECORDER_PREFERENCE_OFF_OPTION_ID } from 'src/constants/call-recorder-preference-off-option-id';
-import { CALL_RECORDER_PREFERENCE_ON_OPTION_ID } from 'src/constants/call-recorder-preference-on-option-id';
-import { CALL_RECORDER_PREFERENCE_ON_CALENDAR_EVENT_FIELD_UNIVERSAL_IDENTIFIER } from 'src/constants/call-recorder-preference-on-calendar-event-field-universal-identifier';
-
-export default defineField({
-  universalIdentifier:
-    CALL_RECORDER_PREFERENCE_ON_CALENDAR_EVENT_FIELD_UNIVERSAL_IDENTIFIER,
-  objectUniversalIdentifier:
-    STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.calendarEvent.universalIdentifier,
-  type: FieldType.SELECT,
-  name: 'callRecorderPreference',
-  label: 'Recording Bot',
-  description:
-    'Call recording is on by default when the app is installed. Turn it off for this event when needed.',
-  icon: 'IconRobot',
-  isNullable: false,
-  defaultValue: `'${CallRecorderPreference.ON}'`,
-  options: [
-    {
-      id: CALL_RECORDER_PREFERENCE_ON_OPTION_ID,
-      value: CallRecorderPreference.ON,
-      label: 'On',
-      position: 0,
-      color: 'green',
-    },
-    {
-      id: CALL_RECORDER_PREFERENCE_OFF_OPTION_ID,
-      value: CallRecorderPreference.OFF,
-      label: 'Off',
-      position: 1,
-      color: 'red',
-    },
-  ],
-});

package/src/front-components/calendar-event-recording.front-component.tsx

@@ -1,13 +0,0 @@
-import { defineFrontComponent } from 'twenty-sdk/define';
-
-import { CALENDAR_EVENT_RECORDING_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER } from 'src/constants/calendar-event-recording-front-component-universal-identifier';
-import { CalendarEventRecording } from 'src/front-components/components/CalendarEventRecording';
-
-export default defineFrontComponent({
-  universalIdentifier:
-    CALENDAR_EVENT_RECORDING_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
-  name: 'calendar-event-recording',
-  description:
-    'Read-only recording viewer with synced transcript for the calendar event record page.',
-  component: CalendarEventRecording,
-});

package/src/front-components/components/CalendarEventRecording.tsx

@@ -1,39 +0,0 @@
-import styled from '@emotion/styled';
-import { isUndefined } from '@sniptt/guards';
-import { useSelectedRecordIds } from 'twenty-sdk/front-component';
-
-import { CalendarEventRecordingContent } from 'src/front-components/components/CalendarEventRecordingContent';
-import { recordingThemeCssVariables } from 'src/front-components/constants/recording-theme-css-variables';
-
-const StyledCenteredState = styled.div`
-  align-items: center;
-  box-sizing: border-box;
-  color: ${recordingThemeCssVariables.font.colorTertiary};
-  display: flex;
-  font-family: ${recordingThemeCssVariables.font.family};
-  font-size: ${recordingThemeCssVariables.font.sizeSm};
-  height: 100%;
-  justify-content: center;
-  padding: ${recordingThemeCssVariables.spacing[4]};
-`;
-
-export const CalendarEventRecording = () => {
-  const selectedRecordIds = useSelectedRecordIds();
-  const calendarEventId =
-    selectedRecordIds.length === 1 ? selectedRecordIds[0] : undefined;
-
-  if (isUndefined(calendarEventId)) {
-    return (
-      <StyledCenteredState>
-        Open a calendar event to see its recording.
-      </StyledCenteredState>
-    );
-  }
-
-  return (
-    <CalendarEventRecordingContent
-      key={calendarEventId}
-      calendarEventId={calendarEventId}
-    />
-  );
-};

package/src/front-components/components/CalendarEventRecordingBody.tsx

@@ -1,96 +0,0 @@
-import styled from '@emotion/styled';
-import { isUndefined } from '@sniptt/guards';
-
-import { RecordingTranscript } from 'src/front-components/components/RecordingTranscript';
-import { RecordingVideoPlayer } from 'src/front-components/components/RecordingVideoPlayer';
-import { TranscriptErrorBox } from 'src/front-components/components/TranscriptErrorBox';
-import { recordingThemeCssVariables } from 'src/front-components/constants/recording-theme-css-variables';
-import { type CalendarEventRecordingParticipant } from 'src/front-components/types/calendar-event-recording-participant.type';
-
-const StyledCenteredState = styled.div`
-  align-items: center;
-  box-sizing: border-box;
-  color: ${recordingThemeCssVariables.font.colorTertiary};
-  display: flex;
-  font-family: ${recordingThemeCssVariables.font.family};
-  font-size: ${recordingThemeCssVariables.font.sizeSm};
-  justify-content: center;
-  min-height: 240px;
-  padding: ${recordingThemeCssVariables.spacing[4]};
-`;
-
-const StyledRecordingContainer = styled.div<{
-  $hasVideo?: boolean;
-}>`
-  display: grid;
-  gap: ${recordingThemeCssVariables.spacing[2]};
-  grid-template-rows: ${({ $hasVideo }) =>
-    $hasVideo ? 'auto minmax(0, 1fr)' : 'minmax(0, 1fr)'};
-  min-height: 0;
-`;
-
-type CalendarEventRecordingBodyProps = {
-  transcript: unknown;
-  videoFileUrl: string | undefined;
-  isCalendarEventRecordingQueryLoading: boolean;
-  errorMessage: string | undefined;
-  currentTimeSeconds: number;
-  calendarEventParticipants: CalendarEventRecordingParticipant[];
-  onVideoTimeUpdate: (videoCurrentTimeSeconds: number) => void;
-};
-
-export const CalendarEventRecordingBody = ({
-  transcript,
-  videoFileUrl,
-  isCalendarEventRecordingQueryLoading,
-  errorMessage,
-  currentTimeSeconds,
-  calendarEventParticipants,
-  onVideoTimeUpdate,
-}: CalendarEventRecordingBodyProps) => {
-  const hasVideo = !isUndefined(videoFileUrl);
-
-  if (!isUndefined(errorMessage)) {
-    return (
-      <TranscriptErrorBox
-        title="Failed to load the recording"
-        description={errorMessage}
-      />
-    );
-  }
-
-  if (isCalendarEventRecordingQueryLoading) {
-    return (
-      <StyledRecordingContainer $hasVideo={false}>
-        <RecordingVideoPlayer
-          src={undefined}
-          onTimeUpdate={onVideoTimeUpdate}
-        />
-      </StyledRecordingContainer>
-    );
-  }
-
-  if (isUndefined(transcript) && !hasVideo) {
-    return (
-      <StyledCenteredState>
-        No recording for this calendar event yet.
-      </StyledCenteredState>
-    );
-  }
-
-  return (
-    <StyledRecordingContainer $hasVideo={hasVideo}>
-      {hasVideo && (
-        <RecordingVideoPlayer
-          src={videoFileUrl}
-          onTimeUpdate={onVideoTimeUpdate}
-        />
-      )}
-      <RecordingTranscript
-        transcript={transcript}
-        currentTimeSeconds={currentTimeSeconds}
-        calendarEventParticipants={calendarEventParticipants}
-      />
-    </StyledRecordingContainer>
-  );
-};

package/src/front-components/components/CalendarEventRecordingContent.tsx

@@ -1,111 +0,0 @@
-import styled from '@emotion/styled';
-import { useCallback, useState } from 'react';
-
-import { CalendarEventRecordingBody } from 'src/front-components/components/CalendarEventRecordingBody';
-import { recordingThemeCssVariables } from 'src/front-components/constants/recording-theme-css-variables';
-import { useCalendarEventParticipants } from 'src/front-components/hooks/use-calendar-event-participants';
-import { useCalendarEventRecording } from 'src/front-components/hooks/use-calendar-event-recording';
-
-const TRANSCRIPT_TIME_UPDATE_INTERVAL_SECONDS = 0.25;
-
-const StyledRecordingShell = styled.div`
-  background: ${recordingThemeCssVariables.background.primary};
-  border: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  border-radius: ${recordingThemeCssVariables.border.radiusMd};
-  box-sizing: border-box;
-  font-family: ${recordingThemeCssVariables.font.family};
-  padding: ${recordingThemeCssVariables.spacing[4]};
-  position: relative;
-  width: 100%;
-`;
-
-const StyledRecordingHeader = styled.div`
-  align-items: center;
-  box-sizing: border-box;
-  display: flex;
-  height: ${recordingThemeCssVariables.spacing[6]};
-`;
-
-const StyledRecordingTitle = styled.h2`
-  color: ${recordingThemeCssVariables.font.colorPrimary};
-  flex: 1;
-  font-size: ${recordingThemeCssVariables.font.sizeMd};
-  font-weight: ${recordingThemeCssVariables.font.weightMedium};
-  margin: 0;
-  overflow: hidden;
-  padding-inline: ${recordingThemeCssVariables.spacing[1]};
-  user-select: none;
-`;
-
-const StyledRecordingBody = styled.div`
-  box-sizing: border-box;
-  margin-top: ${recordingThemeCssVariables.spacing[2]};
-`;
-
-const StyledRecordingContentFrame = styled.div`
-  background-color: ${recordingThemeCssVariables.background.secondary};
-  border: 1px solid ${recordingThemeCssVariables.border.colorMedium};
-  border-radius: ${recordingThemeCssVariables.border.radiusMd};
-  box-sizing: border-box;
-  padding: ${recordingThemeCssVariables.spacing[2]};
-`;
-
-type CalendarEventRecordingContentProps = {
-  calendarEventId: string;
-};
-
-export const CalendarEventRecordingContent = ({
-  calendarEventId,
-}: CalendarEventRecordingContentProps) => {
-  const [currentTimeSeconds, setCurrentTimeSeconds] = useState(0);
-  const updateCurrentTimeSeconds = useCallback(
-    (videoCurrentTimeSeconds: number) => {
-      const nextCurrentTimeSeconds =
-        Math.floor(
-          videoCurrentTimeSeconds / TRANSCRIPT_TIME_UPDATE_INTERVAL_SECONDS,
-        ) * TRANSCRIPT_TIME_UPDATE_INTERVAL_SECONDS;
-
-      setCurrentTimeSeconds((previousCurrentTimeSeconds) =>
-        previousCurrentTimeSeconds === nextCurrentTimeSeconds
-          ? previousCurrentTimeSeconds
-          : nextCurrentTimeSeconds,
-      );
-    },
-    [],
-  );
-
-  const {
-    transcript,
-    videoFile,
-    isCalendarEventRecordingQueryLoading,
-    errorMessage,
-  } = useCalendarEventRecording(calendarEventId);
-  const { calendarEventParticipants } =
-    useCalendarEventParticipants(calendarEventId);
-
-  const videoFileUrl = videoFile?.url ?? undefined;
-
-  return (
-    <StyledRecordingShell>
-      <StyledRecordingHeader>
-        <StyledRecordingTitle>Recording and Transcript</StyledRecordingTitle>
-      </StyledRecordingHeader>
-      <StyledRecordingBody>
-        <StyledRecordingContentFrame>
-          <CalendarEventRecordingBody
-            transcript={transcript}
-            videoFileUrl={videoFileUrl}
-            isCalendarEventRecordingQueryLoading={
-              isCalendarEventRecordingQueryLoading
-            }
-            errorMessage={errorMessage}
-            currentTimeSeconds={currentTimeSeconds}
-            calendarEventParticipants={calendarEventParticipants}
-            onVideoTimeUpdate={updateCurrentTimeSeconds}
-          />
-        </StyledRecordingContentFrame>
-      </StyledRecordingBody>
-    </StyledRecordingShell>
-  );
-};

package/src/front-components/components/RecordingTranscript.tsx

@@ -1,92 +0,0 @@
-import styled from '@emotion/styled';
-import { isUndefined } from '@sniptt/guards';
-import { useMemo } from 'react';
-
-import { TranscriptEntryList } from 'src/front-components/components/TranscriptEntryList';
-import { TranscriptErrorBox } from 'src/front-components/components/TranscriptErrorBox';
-import { recordingThemeCssVariables } from 'src/front-components/constants/recording-theme-css-variables';
-import { type CalendarEventRecordingParticipant } from 'src/front-components/types/calendar-event-recording-participant.type';
-import { parseTranscriptEntries } from 'src/front-components/utils/parse-transcript-entries.util';
-import { parseTranscriptMarker } from 'src/logic-functions/domain/parse-transcript-marker.util';
-import { isNonEmptyString } from 'src/logic-functions/utils/is-non-empty-string.util';
-
-const StyledTranscriptCenteredState = styled.div`
-  align-items: center;
-  color: ${recordingThemeCssVariables.font.colorTertiary};
-  display: flex;
-  flex: 1;
-  font-size: ${recordingThemeCssVariables.font.sizeSm};
-  justify-content: center;
-`;
-
-type RecordingTranscriptProps = {
-  transcript: unknown;
-  currentTimeSeconds: number;
-  calendarEventParticipants: CalendarEventRecordingParticipant[];
-};
-
-export const RecordingTranscript = ({
-  transcript,
-  currentTimeSeconds,
-  calendarEventParticipants,
-}: RecordingTranscriptProps) => {
-  const marker = useMemo(() => parseTranscriptMarker(transcript), [transcript]);
-  const entries = useMemo(
-    () => parseTranscriptEntries(transcript),
-    [transcript],
-  );
-
-  if (isUndefined(transcript)) {
-    return (
-      <StyledTranscriptCenteredState>
-        No transcript for this calendar event yet.
-      </StyledTranscriptCenteredState>
-    );
-  }
-
-  if (marker?.status === 'PENDING') {
-    return (
-      <StyledTranscriptCenteredState>
-        The transcript is being generated. Check back in a few minutes.
-      </StyledTranscriptCenteredState>
-    );
-  }
-
-  if (marker?.status === 'FAILED') {
-    return (
-      <TranscriptErrorBox
-        title="Transcription failed"
-        description={
-          isNonEmptyString(marker.subCode)
-            ? `The transcription provider could not process this recording (${marker.subCode}).`
-            : 'The transcription provider could not process this recording.'
-        }
-      />
-    );
-  }
-
-  if (isUndefined(entries)) {
-    return (
-      <TranscriptErrorBox
-        title="Unrecognized transcript format"
-        description="The stored transcript does not match the expected diarized format."
-      />
-    );
-  }
-
-  if (entries.length === 0) {
-    return (
-      <StyledTranscriptCenteredState>
-        The transcript is empty.
-      </StyledTranscriptCenteredState>
-    );
-  }
-
-  return (
-    <TranscriptEntryList
-      entries={entries}
-      currentTimeSeconds={currentTimeSeconds}
-      calendarEventParticipants={calendarEventParticipants}
-    />
-  );
-};

package/src/front-components/components/RecordingVideoPlayer.tsx

@@ -1,52 +0,0 @@
-import styled from '@emotion/styled';
-import { memo, type SyntheticEvent } from 'react';
-
-import { recordingThemeCssVariables } from 'src/front-components/constants/recording-theme-css-variables';
-
-const DEFAULT_VIDEO_ASPECT_RATIO = '16 / 9';
-
-const StyledVideoViewport = styled.div`
-  aspect-ratio: ${DEFAULT_VIDEO_ASPECT_RATIO};
-  background: ${recordingThemeCssVariables.background.primary};
-  border-radius: ${recordingThemeCssVariables.border.radiusSm};
-  overflow: hidden;
-  width: 100%;
-`;
-
-const StyledVideo = styled.video`
-  accent-color: ${recordingThemeCssVariables.accent.primary};
-  background: ${recordingThemeCssVariables.background.primary};
-  color-scheme: light dark;
-  display: block;
-  height: 100%;
-  object-fit: contain;
-  width: 100%;
-`;
-
-type RecordingVideoPlayerProps = {
-  src: string | undefined;
-  onTimeUpdate: (currentTimeSeconds: number) => void;
-};
-
-const RecordingVideoPlayerComponent = ({
-  src,
-  onTimeUpdate,
-}: RecordingVideoPlayerProps) => {
-  const handleTimeUpdate = (event: SyntheticEvent<HTMLVideoElement>) => {
-    onTimeUpdate(event.currentTarget.currentTime);
-  };
-
-  return (
-    <StyledVideoViewport>
-      <StyledVideo
-        controls
-        playsInline
-        preload="metadata"
-        src={src}
-        onTimeUpdate={handleTimeUpdate}
-      />
-    </StyledVideoViewport>
-  );
-};
-
-export const RecordingVideoPlayer = memo(RecordingVideoPlayerComponent);

package/src/front-components/components/TranscriptEntryList.tsx

@@ -1,61 +0,0 @@
-import styled from '@emotion/styled';
-import { useMemo } from 'react';
-
-import { TranscriptEntryListItem } from 'src/front-components/components/TranscriptEntryListItem';
-import { recordingThemeCssVariables } from 'src/front-components/constants/recording-theme-css-variables';
-import { type CalendarEventRecordingParticipant } from 'src/front-components/types/calendar-event-recording-participant.type';
-import { type TranscriptEntry } from 'src/front-components/types/transcript-entry.type';
-import { buildCalendarEventParticipantBySpeakerName } from 'src/front-components/utils/build-calendar-event-participant-by-speaker-name.util';
-import { findActiveTranscriptEntryIndex } from 'src/front-components/utils/find-active-transcript-entry-index.util';
-import { getCalendarEventParticipantForSpeakerName } from 'src/front-components/utils/get-calendar-event-participant-for-speaker-name.util';
-
-const StyledTranscriptContainer = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: ${recordingThemeCssVariables.spacing[2]};
-  min-height: 0;
-`;
-
-type TranscriptEntryListProps = {
-  entries: TranscriptEntry[];
-  currentTimeSeconds: number;
-  calendarEventParticipants: CalendarEventRecordingParticipant[];
-};
-
-export const TranscriptEntryList = ({
-  entries,
-  currentTimeSeconds,
-  calendarEventParticipants,
-}: TranscriptEntryListProps) => {
-  const activeEntryIndex = findActiveTranscriptEntryIndex(
-    entries,
-    currentTimeSeconds,
-  );
-  const calendarEventParticipantBySpeakerName = useMemo(
-    () => buildCalendarEventParticipantBySpeakerName(calendarEventParticipants),
-    [calendarEventParticipants],
-  );
-
-  return (
-    <StyledTranscriptContainer>
-      {entries.map((entry, entryIndex) => {
-        const calendarEventParticipant =
-          getCalendarEventParticipantForSpeakerName({
-            speakerName: entry.speakerName,
-            calendarEventParticipantBySpeakerName,
-          });
-
-        return (
-          <TranscriptEntryListItem
-            key={entryIndex}
-            entry={entry}
-            isActive={entryIndex === activeEntryIndex}
-            currentTimeSeconds={currentTimeSeconds}
-            calendarEventParticipant={calendarEventParticipant}
-          />
-        );
-      })}
-    </StyledTranscriptContainer>
-  );
-};

package/src/front-components/components/TranscriptEntryListItem.tsx

@@ -1,115 +0,0 @@
-import styled from '@emotion/styled';
-import { isUndefined } from '@sniptt/guards';
-
-import { TranscriptSpeakerChip } from 'src/front-components/components/TranscriptSpeakerChip';
-import { recordingThemeCssVariables } from 'src/front-components/constants/recording-theme-css-variables';
-import { type CalendarEventRecordingParticipant } from 'src/front-components/types/calendar-event-recording-participant.type';
-import {
-  type TranscriptEntry,
-  type TranscriptWord,
-} from 'src/front-components/types/transcript-entry.type';
-import { formatTranscriptTimestamp } from 'src/front-components/utils/format-transcript-timestamp.util';
-
-const StyledEntry = styled.div<{ $isActive: boolean }>`
-  align-items: flex-start;
-  background: ${({ $isActive }) =>
-    $isActive
-      ? recordingThemeCssVariables.background.transparentBlue
-      : 'transparent'};
-  border-radius: ${recordingThemeCssVariables.border.radiusSm};
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: ${recordingThemeCssVariables.spacing[2]};
-  justify-content: center;
-  padding: ${recordingThemeCssVariables.spacing[2]};
-  width: 100%;
-`;
-
-const StyledEntryHeader = styled.div`
-  align-items: center;
-  align-self: stretch;
-  display: flex;
-  gap: ${recordingThemeCssVariables.spacing[2]};
-  min-height: ${recordingThemeCssVariables.spacing[6]};
-  min-width: 0;
-`;
-
-const StyledTimestamp = styled.span`
-  color: ${recordingThemeCssVariables.font.colorTertiary};
-  font-size: ${recordingThemeCssVariables.font.sizeXs};
-  line-height: 1.4;
-`;
-
-const StyledEntryText = styled.p`
-  align-self: stretch;
-  color: ${recordingThemeCssVariables.font.colorSecondary};
-  font-size: ${recordingThemeCssVariables.font.sizeSm};
-  line-height: 1.4;
-  margin: 0;
-`;
-
-const StyledWord = styled.span<{ $isSpoken: boolean }>`
-  color: ${({ $isSpoken }) =>
-    $isSpoken
-      ? recordingThemeCssVariables.font.colorPrimary
-      : recordingThemeCssVariables.font.colorSecondary};
-  line-height: 1.4;
-  transition: color 0.15s ease;
-`;
-
-type TranscriptEntryListItemProps = {
-  entry: TranscriptEntry;
-  isActive: boolean;
-  currentTimeSeconds: number;
-  calendarEventParticipant: CalendarEventRecordingParticipant | undefined;
-};
-
-export const TranscriptEntryListItem = ({
-  entry,
-  isActive,
-  currentTimeSeconds,
-  calendarEventParticipant,
-}: TranscriptEntryListItemProps) => {
-  const speakerDisplayName =
-    calendarEventParticipant?.displayName ?? entry.speakerName;
-
-  return (
-    <StyledEntry $isActive={isActive}>
-      <StyledEntryHeader>
-        <TranscriptSpeakerChip
-          speakerName={speakerDisplayName}
-          avatarUrl={calendarEventParticipant?.avatarUrl}
-          placeholderColorSeed={
-            calendarEventParticipant?.placeholderColorSeed ?? speakerDisplayName
-          }
-        />
-        {!isUndefined(entry.startSeconds) && (
-          <StyledTimestamp>
-            {formatTranscriptTimestamp(entry.startSeconds)}
-          </StyledTimestamp>
-        )}
-      </StyledEntryHeader>
-      <StyledEntryText>
-        {entry.words.map((word, wordIndex) => (
-          <StyledWord
-            key={wordIndex}
-            $isSpoken={isWordSpoken({ word, currentTimeSeconds })}
-          >
-            {wordIndex > 0 ? ' ' : ''}
-            {word.text}
-          </StyledWord>
-        ))}
-      </StyledEntryText>
-    </StyledEntry>
-  );
-};
-
-const isWordSpoken = ({
-  word,
-  currentTimeSeconds,
-}: {
-  word: TranscriptWord;
-  currentTimeSeconds: number;
-}): boolean =>
-  !isUndefined(word.startSeconds) && currentTimeSeconds >= word.startSeconds;

package/src/front-components/components/TranscriptErrorBox.tsx

@@ -1,48 +0,0 @@
-import styled from '@emotion/styled';
-
-import { recordingThemeCssVariables } from 'src/front-components/constants/recording-theme-css-variables';
-
-const StyledStateContainer = styled.div`
-  box-sizing: border-box;
-  font-family: ${recordingThemeCssVariables.font.family};
-  height: 100%;
-  padding: ${recordingThemeCssVariables.spacing[4]};
-`;
-
-const StyledErrorBox = styled.div`
-  background: ${recordingThemeCssVariables.background.transparentDanger};
-  border: 1px solid ${recordingThemeCssVariables.border.colorDanger};
-  border-radius: ${recordingThemeCssVariables.border.radiusMd};
-  display: flex;
-  flex-direction: column;
-  gap: ${recordingThemeCssVariables.spacing[1]};
-  padding: ${recordingThemeCssVariables.spacing[3]};
-`;
-
-const StyledErrorTitle = styled.span`
-  color: ${recordingThemeCssVariables.font.colorDanger};
-  font-size: ${recordingThemeCssVariables.font.sizeSm};
-  font-weight: ${recordingThemeCssVariables.font.weightMedium};
-`;
-
-const StyledErrorDescription = styled.span`
-  color: ${recordingThemeCssVariables.font.colorSecondary};
-  font-size: ${recordingThemeCssVariables.font.sizeSm};
-`;
-
-type TranscriptErrorBoxProps = {
-  title: string;
-  description: string;
-};
-
-export const TranscriptErrorBox = ({
-  title,
-  description,
-}: TranscriptErrorBoxProps) => (
-  <StyledStateContainer>
-    <StyledErrorBox>
-      <StyledErrorTitle>{title}</StyledErrorTitle>
-      <StyledErrorDescription>{description}</StyledErrorDescription>
-    </StyledErrorBox>
-  </StyledStateContainer>
-);