🚸(frontend) rework the transcription side panel

Inspired by proprietary solutions, add clearer details on how transcription
works and what users can expect from the feature. This new presentation is much
simpler to read, parse, and understand than the previous large block of text
that users were not reading at all.

Using icons helps users quickly understand where the transcription is sent, how
they are notified, and which meeting language is used.

Some information is currently hardcoded and will be parameterized in upcoming
commits. This work is ongoing.

src/frontend/src/features/recording/components/TranscriptSidePanel.tsx

@@ -6,7 +6,6 @@ import { useRoomContext } from '@livekit/components-react'
 import {
   RecordingMode,
   useHasRecordingAccess,
-  useIsRecordingTransitioning,
   useStartRecording,
   useStopRecording,
   useHasFeatureWithoutAdminRights,
@@ -29,6 +28,8 @@ import humanizeDuration from 'humanize-duration'
 import i18n from 'i18next'
 import { useUser } from '@/features/auth'
 import { LoginButton } from '@/components/LoginButton'
+import { HStack, VStack } from '@/styled-system/jsx'
+import { Checkbox } from '@/primitives/Checkbox.tsx'
 
 export const TranscriptSidePanel = () => {
   const { data } = useConfig()
@@ -76,8 +77,6 @@ export const TranscriptSidePanel = () => {
     }
   }, [recordingSnap])
 
-  const isRecordingTransitioning = useIsRecordingTransitioning()
-
   const room = useRoomContext()
   const isRoomConnected = room.state == ConnectionState.Connected
 
@@ -122,15 +121,6 @@ export const TranscriptSidePanel = () => {
     }
   }
 
-  const isDisabled = useMemo(
-    () =>
-      isLoading ||
-      isRecordingTransitioning ||
-      statuses.isAnotherModeStarted ||
-      !isRoomConnected,
-    [isLoading, isRecordingTransitioning, statuses, isRoomConnected]
-  )
-
   if (hasFeatureWithoutAdminRights) {
     return (
       <Div
@@ -320,142 +310,195 @@ export const TranscriptSidePanel = () => {
     >
       <img
         src="/assets/intro-slider/3.png"
-        alt={''}
+        alt=""
         className={css({
-          minHeight: '309px',
+          minHeight: '250px',
-          height: '309px',
+          height: '250px',
           marginBottom: '1rem',
-          '@media (max-height: 700px)': {
+          marginTop: '-16px',
+          '@media (max-height: 900px)': {
             height: 'auto',
             minHeight: 'auto',
-            maxHeight: '45%',
+            maxHeight: '25%',
-            marginBottom: '0.3rem',
+            marginBottom: '0.75rem',
           },
-          '@media (max-height: 530px)': {
+          '@media (max-height: 770px)': {
-            height: 'auto',
+            display: 'none',
-            minHeight: 'auto',
-            maxHeight: '40%',
-            marginBottom: '0.1rem',
           },
         })}
       />
-      <>
+      <VStack gap={0} marginBottom={30}>
-        {statuses.isStarted ? (
+        <H lvl={1} margin={'sm'}>
-          <>
+          {t('heading')}
-            <H lvl={3} margin={false}>
+        </H>
-              {t('stop.heading')}
+        <Text variant="body" fullWidth>
-            </H>
+          {data?.recording?.max_duration
-            <Text
+            ? t('body', {
-              variant="note"
+                max_duration: humanizeDuration(data?.recording?.max_duration, {
-              wrap={'pretty'}
+                  language: i18n.language,
-              centered
+                }),
-              className={css({
+              })
-                textStyle: 'sm',
+            : t('bodyWithoutMaxDuration')}{' '}
-                marginBottom: '2.5rem',
+          {data?.support?.help_article_transcript && (
-                marginTop: '0.25rem',
+            <A href={data.support.help_article_transcript} target="_blank">
-                '@media (max-height: 700px)': {
+              {t('linkMore')}
-                  marginBottom: '1rem',
+            </A>
-                },
+          )}
-              })}
+        </Text>
-            >
+      </VStack>
-              {t('stop.body')}
+      <VStack gap={0} marginBottom={40}>
+        <div
+          className={css({
+            width: '100%',
+            // border: '1px solid black',
+            background: 'gray.100',
+            borderRadius: '4px 4px 0 0',
+            paddingLeft: '4px',
+            padding: '8px',
+            display: 'flex',
+          })}
+        >
+          <div
+            className={css({
+              flex: 1,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            })}
+          >
+            <span className="material-icons">article</span>
+          </div>
+          <div
+            className={css({
+              flex: 5,
+            })}
+          >
+            <Text variant="sm">
+              {t('details.destination')}{' '}
+              <A
+                href="https://docs.numerique.gouv.fr"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                docs.numerique.gouv.fr
+              </A>
             </Text>
-            <Button
+          </div>
-              isDisabled={isDisabled}
+        </div>
-              onPress={() => handleTranscript()}
+        <div
-              data-attr="stop-transcript"
+          className={css({
-              size="sm"
+            width: '100%',
-              variant="tertiary"
+            // border: '1px solid black',
-            >
+            background: 'gray.100',
-              {t('stop.button')}
+            paddingLeft: '4px',
-            </Button>
+            padding: '8px',
-          </>
+            display: 'flex',
+            marginTop: '4px',
+          })}
+        >
+          <div
+            className={css({
+              flex: 1,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            })}
+          >
+            <span className="material-icons">mail</span>
+          </div>
+          <div
+            className={css({
+              flex: 5,
+            })}
+          >
+            <Text variant="sm">{t('details.receiver')}</Text>
+          </div>
+        </div>
+        <div
+          className={css({
+            width: '100%',
+            background: 'gray.100',
+            borderRadius: '0 0 4px 4px',
+            paddingLeft: '4px',
+            padding: '8px',
+            display: 'flex',
+            marginTop: '4px',
+          })}
+        >
+          <div
+            className={css({
+              flex: 1,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            })}
+          >
+            <span className="material-icons">language</span>
+          </div>
+          <div
+            className={css({
+              flex: 5,
+            })}
+          >
+            <Text variant="sm">{t('details.language')}</Text>
+          </div>
+        </div>
+
+        <div className={css({ height: '15px' })} />
+
+        <div
+          className={css({
+            width: '100%',
+            marginLeft: '20px',
+          })}
+        >
+          <Checkbox
+            size="sm"
+            isDisabled={
+              statuses.isStarting || statuses.isStarted || isPendingToStart
+            }
+          >
+            <Text variant="sm">{t('details.recording')}</Text>
+          </Checkbox>
+        </div>
+      </VStack>
+      <div
+        className={css({
+          marginBottom: '80px',
+          width: '100%',
+        })}
+      >
+        {statuses.isStopping || isPendingToStop ? (
+          <HStack width={'100%'} height={'46px'} justify="center">
+            <Spinner size={30} />
+            <Text variant="body">{t('button.saving')}</Text>
+          </HStack>
         ) : (
           <>
-            {statuses.isStopping || isPendingToStop ? (
+            {statuses.isStarted || statuses.isStarting || room.isRecording ? (
-              <>
+              <Button
-                <H lvl={3} margin={false}>
+                variant="tertiary"
-                  {t('stopping.heading')}
+                fullWidth
-                </H>
+                onPress={() => handleTranscript()}
-                <Text
+                isDisabled={statuses.isStopping || isPendingToStop || isLoading}
-                  variant="note"
+                data-attr="stop-transcript"
-                  wrap={'pretty'}
+              >
-                  centered
+                {t('button.stop')}
-                  className={css({
+              </Button>
-                    textStyle: 'sm',
-                    maxWidth: '90%',
-                    marginBottom: '2.5rem',
-                    marginTop: '0.25rem',
-                    '@media (max-height: 700px)': {
-                      marginBottom: '1rem',
-                    },
-                  })}
-                >
-                  {t('stopping.body')}
-                </Text>
-                <Spinner />
-              </>
             ) : (
-              <>
+              <Button
-                <H lvl={3} margin={false}>
+                variant="tertiary"
-                  {t('start.heading')}
+                fullWidth
-                </H>
+                onPress={() => handleTranscript()}
-                <Text
+                isDisabled={isPendingToStart || !isRoomConnected || isLoading}
-                  variant="note"
+                data-attr="start-transcript"
-                  wrap="balance"
+              >
-                  centered
+                {t('button.start')}
-                  className={css({
+              </Button>
-                    textStyle: 'sm',
-                    maxWidth: '90%',
-                    marginBottom: '2.5rem',
-                    marginTop: '0.25rem',
-                    '@media (max-height: 700px)': {
-                      marginBottom: '1rem',
-                    },
-                  })}
-                >
-                  {t('start.body', {
-                    duration_message: data?.recording?.max_duration
-                      ? t('durationMessage', {
-                          max_duration: humanizeDuration(
-                            data?.recording?.max_duration,
-                            {
-                              language: i18n.language,
-                            }
-                          ),
-                        })
-                      : '',
-                  })}{' '}
-                  {data?.support?.help_article_transcript && (
-                    <A
-                      href={data.support.help_article_transcript}
-                      target="_blank"
-                    >
-                      {t('start.linkMore')}
-                    </A>
-                  )}
-                </Text>
-                <Button
-                  isDisabled={isDisabled}
-                  onPress={() => handleTranscript()}
-                  data-attr="start-transcript"
-                  size="sm"
-                  variant="tertiary"
-                >
-                  {statuses.isStarting || isPendingToStart ? (
-                    <>
-                      <Spinner size={20} />
-                      {t('start.loading')}
-                    </>
-                  ) : (
-                    t('start.button')
-                  )}
-                </Button>
-              </>
             )}
           </>
         )}
-      </>
+      </div>
       <Dialog
         isOpen={!!isErrorDialogOpen}
         role="alertdialog"

src/frontend/src/locales/de/rooms.json

@@ -310,13 +310,21 @@
     }
   },
   "transcript": {
-    "start": {
+    "heading": "Transkribieren Sie Ihr Meeting mit dem KI-Assistenten",
-      "heading": "Dieses Gespräch transkribieren",
+    "body": "Transkribieren Sie bis zu {{max_duration}} Meetingdauer.",
-      "body": "Dieses Gespräch automatisch transkribieren {{duration_message}} und die Zusammenfassung in Docs erhalten.",
+    "bodyWithoutMaxDuration": "Transkribieren Sie Ihr Meeting ohne Begrenzung.",
-      "button": "Transkription starten",
+    "details": {
-      "loading": "Transkription wird gestartet",
+      "receiver": "Das Transkript wird an den Organisator und die Mitorganisatoren gesendet.",
-      "linkMore": "Mehr erfahren"
+      "destination": "Ein neues Dokument wird erstellt auf",
+      "language": "Meeting-Sprachen: Französisch (fr)",
+      "recording": "Auch eine Aufzeichnung starten"
     },
+    "button": {
+      "start": "Meeting transkribieren starten",
+      "stop": "Meeting transkribieren beenden",
+      "saving": "Speichern…"
+    },
+    "linkMore": "Mehr erfahren",
     "notAdminOrOwner": {
       "heading": "Zugriff eingeschränkt",
       "body": "Aus Sicherheitsgründen kann nur der Ersteller oder ein Administrator des Meetings eine Transkription (Beta) starten.",
@@ -326,15 +334,6 @@
         "body": "Nur der Ersteller des Meetings oder ein Administrator kann die Transkription starten. Melden Sie sich an, um Ihre Berechtigungen zu überprüfen."
       }
     },
-    "stop": {
-      "heading": "Transkription läuft...",
-      "body": "Die Transkription deines Meetings läuft. Du erhältst das Ergebnis per E-Mail, sobald das Meeting beendet ist.",
-      "button": "Transkription stoppen"
-    },
-    "stopping": {
-      "heading": "Daten werden gespeichert…",
-      "body": "Sie können das Meeting verlassen, wenn Sie möchten; die Aufzeichnung wird automatisch beendet."
-    },
     "premium": {
       "heading": "Premium-Funktion",
       "body": "Diese Funktion ist öffentlichen Bediensteten vorbehalten. Wenn Ihre E-Mail-Adresse nicht autorisiert ist, kontaktieren Sie bitte den Support, um Zugriff zu erhalten.",
@@ -350,8 +349,7 @@
         "start": "Die Transkription konnte nicht gestartet werden. Bitte versuche es in einem Moment erneut."
       },
       "button": "OK"
-    },
+    }
-    "durationMessage": "(begrenzt auf {{max_duration}}) "
   },
   "screenRecording": {
     "start": {

src/frontend/src/locales/en/rooms.json

@@ -310,13 +310,21 @@
     }
   },
   "transcript": {
-    "start": {
+    "heading": "Transcribe your meeting with the AI Assistant",
-      "heading": "Transcribe this call",
+    "body": "Transcribe up to {{max_duration}} of meeting time.",
-      "body": "Automatically transcribe this call {{duration_message}} and receive the summary in Docs.",
+    "bodyWithoutMaxDuration": "Transcribe your meeting without limits.",
-      "button": "Start transcription",
+    "details": {
-      "loading": "Transcription starting",
+      "receiver": "The transcript will be sent to the host and co-hosts.",
-      "linkMore": "Learn more"
+      "destination": "A new document will be created on",
+      "language": "Meeting language: French (fr)",
+      "recording": "Also start a recording"
     },
+    "button": {
+      "start": "Start transcribing the meeting",
+      "stop": "Stop transcribing the meeting",
+      "saving": "Saving…"
+    },
+    "linkMore": "Learn more",
     "notAdminOrOwner": {
       "heading": "Restricted Access",
       "body": "For security reasons, only the meeting creator or an admin can start a transcription (beta).",
@@ -326,15 +334,6 @@
         "body": "Only the meeting creator or an admin can start a transcription. Log in to verify your permissions."
       }
     },
-    "stop": {
-      "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"
-    },
-    "stopping": {
-      "heading": "Saving your data…",
-      "body": "You can leave the meeting if you wish; the recording will finish automatically."
-    },
     "premium": {
       "heading": "Premium feature",
       "body": "This feature is reserved for public agents. If your email address is not authorized, please contact support to get access.",
@@ -350,8 +349,7 @@
         "start": "We were unable to start the transcription. Please try again in a moment."
       },
       "button": "OK"
-    },
+    }
-    "durationMessage": "(limited to {{max_duration}}) "
   },
   "screenRecording": {
     "start": {

src/frontend/src/locales/fr/rooms.json

@@ -310,13 +310,21 @@
     }
   },
   "transcript": {
-    "start": {
+    "heading": "Transcrivez votre réunion avec l'Assistant IA",
-      "heading": "Transcrire cet appel",
+    "body": "Transcrivez jusqu'à {{max_duration}} de réunion.",
-      "body": "Transcrivez cet appel automatiquement {{duration_message}} et recevez le compte rendu dans Docs.",
+    "bodyWithoutMaxDuration": "Transcrivez votre réunion sans limite.",
-      "button": "Démarrer la transcription",
+    "details": {
-      "loading": "Démarrage de la transcription",
+      "receiver": "La transcription sera envoyée à l'organisateur et aux coorganisateurs.",
-      "linkMore": "En savoir plus"
+      "destination": "Un nouveau document sera créé sur",
+      "language": "Langues de la réunion : Français (fr)",
+      "recording": "Démarrer aussi un enregistrement"
     },
+    "button": {
+      "start": "Commencer à transcrire la réunion",
+      "stop": "Arrêter de transcrire la réunion",
+      "saving": "Sauvegarde…"
+    },
+    "linkMore": "En savoir plus",
     "notAdminOrOwner": {
       "heading": "Accès restreint",
       "body": "Pour des raisons de sécurité, seul le créateur ou un administrateur de la réunion peut lancer une transcription (beta).",
@@ -326,15 +334,6 @@
         "body": "Seul le créateur de la réunion ou un administrateur peut démarrer la transcription. Connectez-vous pour vérifier vos autorisations."
       }
     },
-    "stop": {
-      "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"
-    },
-    "stopping": {
-      "heading": "Sauvegarde de vos données…",
-      "body": "Vous pouvez quitter la réunion si vous le souhaitez, la sauvegarde se terminera automatiquement."
-    },
     "premium": {
       "heading": "Fonctionnalité premium",
       "body": "Cette fonctionnalité est réservée aux agents publics. Si votre adresse email n’est pas autorisée, contactez le support pour obtenir l'accès.",
@@ -350,8 +349,7 @@
         "start": "Nous n'avons pas pu démarrer la transcription. Veuillez réessayer dans quelques instants."
       },
       "button": "OK"
-    },
+    }
-    "durationMessage": "(limité à {{max_duration}}) "
   },
   "screenRecording": {
     "start": {

src/frontend/src/locales/nl/rooms.json

@@ -310,13 +310,21 @@
     }
   },
   "transcript": {
-    "start": {
+    "heading": "Transcribeer uw vergadering met de AI-assistent",
-      "heading": "Transcribeer dit gesprek",
+    "body": "Transcribeer tot {{max_duration}} aan vergadertijd.",
-      "body": "Transcribeer dit gesprek automatisch {{duration_message}} en ontvang het verslag in Docs.",
+    "bodyWithoutMaxDuration": "Transcribeer uw vergadering zonder limiet.",
-      "button": "Transcriptie starten",
+    "details": {
-      "loading": "Transcriptie begint",
+      "receiver": "Het transcript wordt verzonden naar de organisator en medeorganisatoren.",
-      "linkMore": "Meer informatie"
+      "destination": "Er wordt een nieuw document aangemaakt op",
+      "language": "Vergadertalen: Frans (fr)",
+      "recording": "Start ook een opname"
     },
+    "button": {
+      "start": "Begin met het transcriberen van de vergadering",
+      "stop": "Stop met het transcriberen van de vergadering",
+      "saving": "Opslaan…"
+    },
+    "linkMore": "Meer informatie",
     "notAdminOrOwner": {
       "heading": "Toegang beperkt",
       "body": "Om veiligheidsredenen kan alleen de maker of een beheerder van de vergadering een transcriptie starten (beta).",
@@ -326,15 +334,6 @@
         "body": "Alleen de maker van de vergadering of een beheerder kan de transcriptie starten. Log in om uw machtigingen te controleren."
       }
     },
-    "stop": {
-      "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"
-    },
-    "stopping": {
-      "heading": "Uw gegevens worden opgeslagen…",
-      "body": "U kunt de vergadering verlaten als u dat wilt; de opname wordt automatisch voltooid."
-    },
     "premium": {
       "heading": "Premiumfunctie",
       "body": "Deze functie is voorbehouden aan openbare medewerkers. Als uw e-mailadres niet is toegestaan, neem dan contact op met de support om toegang te krijgen.",
@@ -350,8 +349,7 @@
         "start": "We konden de transcriptie niet starten. Probeer het over enkele ogenblikken opnieuw."
       },
       "button": "Opnieuw proberen"
-    },
+    }
-    "durationMessage": "(beperkt tot {{max_duration}}) "
   },
   "screenRecording": {
     "start": {