diff --git a/src/frontend/src/features/rooms/livekit/components/Transcript.tsx b/src/frontend/src/features/rooms/livekit/components/Transcript.tsx index 5b7fb648..a3c4344b 100644 --- a/src/frontend/src/features/rooms/livekit/components/Transcript.tsx +++ b/src/frontend/src/features/rooms/livekit/components/Transcript.tsx @@ -1,10 +1,7 @@ -import { Button, Div, H, Text } from '@/primitives' +import { A, Button, Div, LinkButton, Text } from '@/primitives' import thirdSlide from '@/assets/intro-slider/3_resume.png' import { css } from '@/styled-system/css' - -import { useHasTranscriptAccess } from '../hooks/useHasTranscriptAccess' -import { RiRecordCircleLine, RiStopCircleLine } from '@remixicon/react' import { useRoomId } from '@/features/rooms/livekit/hooks/useRoomId' import { useRoomContext } from '@livekit/components-react' import { @@ -12,22 +9,34 @@ import { useStartRecording, } from '@/features/rooms/api/startRecording' import { useStopRecording } from '@/features/rooms/api/stopRecording' -import { useEffect, useState } from 'react' +import { useEffect, useMemo, useState } from 'react' import { RoomEvent } from 'livekit-client' import { useTranslation } from 'react-i18next' +import { NotificationPayload } from '@/features/notifications/NotificationPayload' +import { NotificationType } from '@/features/notifications/NotificationType' +import { useSnapshot } from 'valtio/index' +import { + TranscriptionStatus, + transcriptionStore, +} from '@/stores/transcription.ts' +import { useHasTranscriptAccess } from '../hooks/useHasTranscriptAccess' +import { + BETA_USERS_FORM_URL, + CRISP_HELP_ARTICLE_TRANSCRIPT, +} from '@/utils/constants' export const Transcript = () => { const [isLoading, setIsLoading] = useState(false) - const { t } = useTranslation('rooms', { keyPrefix: 'transcript' }) const hasTranscriptAccess = useHasTranscriptAccess() - const roomId = useRoomId() const { mutateAsync: startRecordingRoom } = useStartRecording() const { mutateAsync: stopRecordingRoom } = useStopRecording() + const transcriptionSnap = useSnapshot(transcriptionStore) + const room = useRoomContext() useEffect(() => { @@ -40,6 +49,17 @@ export const Transcript = () => { } }, [room]) + const notifyParticipant = async (status: NotificationType) => { + const encoder = new TextEncoder() + const payload: NotificationPayload = { + type: status, + } + const data = encoder.encode(JSON.stringify(payload)) + await room.localParticipant.publishData(data, { + reliable: true, + }) + } + const handleTranscript = async () => { if (!roomId) { console.warn('No room ID found') @@ -49,8 +69,12 @@ export const Transcript = () => { setIsLoading(true) if (room.isRecording) { await stopRecordingRoom({ id: roomId }) + await notifyParticipant(NotificationType.TranscriptionStopped) + transcriptionStore.status = TranscriptionStatus.STOPPING } else { await startRecordingRoom({ id: roomId, mode: RecordingMode.Transcript }) + await notifyParticipant(NotificationType.TranscriptionStarted) + transcriptionStore.status = TranscriptionStatus.STARTING } } catch (error) { console.error('Failed to handle transcript:', error) @@ -58,7 +82,13 @@ export const Transcript = () => { } } - if (!hasTranscriptAccess) return + const isDisabled = useMemo( + () => + isLoading || + transcriptionSnap.status === TranscriptionStatus.STARTING || + transcriptionSnap.status === TranscriptionStatus.STOPPING, + [isLoading, transcriptionSnap] + ) return (
{ flexDirection="column" alignItems="center" > - {'wip'} - {room.isRecording ? ( + {''} + {!hasTranscriptAccess ? ( <> - {t('stop.heading')} - - {t('stop.body')} - -
- + {t('beta.body')}{' '} + + {t('start.linkMore')} + + + + {t('beta.button')} + ) : ( <> - {t('start.heading')} - - {t('start.body')} - -
- + {room.isRecording ? ( + <> + {t('stop.heading')} + + {t('stop.body')} + + + + ) : ( + <> + {t('start.heading')} + + {t('start.body')}
{' '} + + {t('start.linkMore')} + + + + + )} )}
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index 2fb23e80..61bc6701 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -199,12 +199,18 @@ "start": { "heading": "", "body": "", - "button": "" + "button": "", + "linkMore": "" }, "stop": { "heading": "", "body": "", "button": "" + }, + "beta": { + "heading": "", + "body": "", + "button": "" } }, "admin": { diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index b6dbbc88..07cb7820 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -196,14 +196,20 @@ }, "transcript": { "start": { - "heading": "Start the Assistant!", - "body": "The assistant automatically starts recording your meeting audio (limited to 1 hour). At the end, you'll receive a clear and concise summary of the discussion directly via email.", - "button": "Start" + "heading": "Transcribe this call", + "body": "Automatically transcribe this call and receive the summary in Docs.", + "button": "Start transcription", + "linkMore": "Learn more" }, "stop": { - "heading": "Recording in Progress...", - "body": "Your meeting is currently being recorded. You will receive a summary via email once the meeting ends.", - "button": "Stop Recording" + "heading": "Transcription in progress...", + "body": "The transcription of your meeting is in progress. You will receive the result by email once the meeting is finished.", + "button": "Stop transcription" + }, + "beta": { + "heading": "Become a beta tester", + "body": "Record your meeting for later. You will receive a summary by email once the meeting is finished.", + "button": "Sign up" } }, "admin": { diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index 42d51af5..a502924c 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -196,14 +196,20 @@ }, "transcript": { "start": { - "heading": "Démarrer l'assistant !", - "body": "L'assistant démarre automatiquement l'enregistrement sonore de votre réunion (limité à 1h). À la fin, vous recevrez un résumé clair et concis des échanges directement par e-mail.", - "button": "Démarrer" + "heading": "Transcrire cet appel", + "body": "Transcrivez cet appel automatiquement et recevez le compte rendu dans Docs.", + "button": "Démarrer la transcription", + "linkMore": "En savoir plus" }, "stop": { - "heading": "Enregistrement en cours …", - "body": "L'enregistrement de votre réunion est en cours. Vous recevrez un compte-rendu par email une fois la réunion terminée.", - "button": "Arrêter l'enregistrement" + "heading": "Transcription en cours …", + "body": "La transcription de votre réunion est en cours. Vous recevrez le resultat par email une fois la réunion terminée.", + "button": "Arrêter la transcription" + }, + "beta": { + "heading": "Devenez beta testeur", + "body": "Enregistrer votre réunion pour plus tard. Vous recevrez un compte-rendu par email une fois la réunion terminée.", + "button": "Inscrivez-vous" } }, "admin": { diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json index ebccbfb5..7b6911b9 100644 --- a/src/frontend/src/locales/nl/rooms.json +++ b/src/frontend/src/locales/nl/rooms.json @@ -196,14 +196,20 @@ }, "transcript": { "start": { - "heading": "Start de assistent!", - "body": "De assistent begint automatisch de audio van uw vergadering op te nemen (beperkt tot 1 uur). Na afloop krijgt u direct een heldere en beknopte samenvatting van de discussies in uw e-mail.", - "button": "Start" + "heading": "Transcribeer dit gesprek", + "body": "Transcribeer dit gesprek automatisch en ontvang het verslag in Docs.", + "button": "Transcriptie starten", + "linkMore": "Meer informatie" }, "stop": { - "heading": "Opname loopt ...", - "body": "Uw vergadering wordt momenteel opgenomen. U ontvangt een samenvatting via e-mail, zo gauw de vergarding gesloten wordt.", - "button": "Stop met opname" + "heading": "Transcriptie bezig...", + "body": "De transcriptie van uw vergadering is bezig. U ontvangt het resultaat per e-mail zodra de vergadering is afgelopen.", + "button": "Transcriptie stoppen" + }, + "beta": { + "heading": "Word betatester", + "body": "Neem uw vergadering op voor later. U ontvangt een samenvatting per e-mail zodra de vergadering is afgelopen.", + "button": "Aanmelden" } }, "admin": { diff --git a/src/frontend/src/utils/constants.ts b/src/frontend/src/utils/constants.ts index 55b469d3..34a5bba0 100644 --- a/src/frontend/src/utils/constants.ts +++ b/src/frontend/src/utils/constants.ts @@ -6,3 +6,6 @@ export const BETA_USERS_FORM_URL = export const CRISP_HELP_ARTICLE_MORE_TOOLS = 'https://lasuite.crisp.help/fr/article/visio-tools-bvxj23' as const + +export const CRISP_HELP_ARTICLE_TRANSCRIPT = + 'https://lasuite.crisp.help/fr/article/visio-transcript-1sjq43x' as const