📱(front) add responsive menu on mobile

We want to have a specific responsive menu on mobile browsers.
It also implied to refactor a bit the way the settings modals is opened
because it could be opened from this responsive menu, so in order to achive
that a specific context has been created in order to allow its opening
from any sub component of the control bar.

src/backend/core/authentication/views.py

@@ -145,7 +145,7 @@ class OIDCLogoutCallbackView(MozillaOIDCOIDCLogoutView):
 
 
 class OIDCAuthenticationCallbackView(MozillaOIDCAuthenticationCallbackView):
-    """Custom callback view for handling the silent loging flow."""
+    """Custom callback view for handling the silent login flow."""
 
     @property
     def failure_url(self):
@@ -162,7 +162,7 @@ class OIDCAuthenticationCallbackView(MozillaOIDCAuthenticationCallbackView):
 
 
 class OIDCAuthenticationRequestView(MozillaOIDCAuthenticationRequestView):
-    """Custom authentication view for handling the silent loging flow."""
+    """Custom authentication view for handling the silent login flow."""
 
     def get_extra_params(self, request):
         """Handle 'prompt' extra parameter for the silent login flow

src/backend/meet/settings.py

@@ -324,8 +324,10 @@ class Base(Configuration):
     OIDC_AUTHENTICATE_CLASS = "core.authentication.views.OIDCAuthenticationRequestView"
     OIDC_CALLBACK_CLASS = "core.authentication.views.OIDCAuthenticationCallbackView"
     OIDC_CREATE_USER = values.BooleanValue(
-        default=True,
-        environ_name="OIDC_CREATE_USER",
+        default=True, environ_name="OIDC_CREATE_USER", environ_prefix=None
+    )
+    OIDC_VERIFY_SSL = values.BooleanValue(
+        default=True, environ_name="OIDC_VERIFY_SSL", environ_prefix=None
     )
     OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION = values.BooleanValue(
         default=False,
@@ -501,9 +503,10 @@ class Base(Configuration):
                 release=get_release(),
                 integrations=[DjangoIntegration()],
             )
-            with sentry_sdk.configure_scope() as scope:
-                scope.set_extra("application", "backend")
 
+            # Add the application name to the Sentry scope
+            scope = sentry_sdk.get_global_scope()
+            scope.set_tag("application", "backend")
 
 class Build(Base):
     """Settings used when the application is built.

src/backend/pyproject.toml

@@ -25,20 +25,20 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "boto3==1.35.68",
+    "boto3==1.35.76",
     "Brotli==1.1.0",
     "celery[redis]==5.4.0",
     "django-configurations==2.5.1",
     "django-cors-headers==4.6.0",
     "django-countries==7.6.1",
     "django-parler==2.3",
-    "redis==5.2.0",
+    "redis==5.2.1",
     "django-redis==5.4.0",
     "django-storages[s3]==1.14.4",
     "django-timezone-field>=5.1",
-    "django==5.1.3",
+    "django==5.1.4",
     "djangorestframework==3.15.2",
-    "drf_spectacular==0.27.2",
+    "drf_spectacular==0.28.0",
     "dockerflow==2024.4.2",
     "easy_thumbnails==2.10",
     "factory_boy==3.3.1",
@@ -51,13 +51,13 @@ dependencies = [
     "PyJWT==2.10.0",
     "python-frontmatter==1.1.0",
     "requests==2.32.3",
-    "sentry-sdk==2.19.0",
+    "sentry-sdk==2.19.2",
     "url-normalize==1.4.3",
     "WeasyPrint>=60.2",
     "whitenoise==6.8.2",
     "mozilla-django-oidc==4.0.1",
     "livekit-api==0.8.0",
-    "aiohttp==3.11.7",
+    "aiohttp==3.11.10",
 ]
 
 [project.urls]
@@ -69,20 +69,20 @@ dependencies = [
 [project.optional-dependencies]
 dev = [
     "django-extensions==3.2.3",
-    "drf-spectacular-sidecar==2024.11.1",
+    "drf-spectacular-sidecar==2024.12.1",
     "freezegun==1.5.1",
     "ipdb==0.13.13",
-    "ipython==8.29.0",
-    "pyfakefs==5.7.1",
+    "ipython==8.30.0",
+    "pyfakefs==5.7.2",
     "pylint-django==2.6.1",
-    "pylint==3.3.1",
+    "pylint==3.3.2",
     "pytest-cov==6.0.0",
     "pytest-django==4.9.0",
-    "pytest==8.3.3",
+    "pytest==8.3.4",
     "pytest-icdiff==0.9",
     "pytest-xdist==3.6.1",
     "responses==0.25.3",
-    "ruff==0.8.0",
+    "ruff==0.8.2",
     "types-requests==2.32.0.20241016",
 ]
 

src/frontend/panda.config.ts

@@ -116,10 +116,10 @@ const config: Config = {
         '80%': { transform: 'rotate(20deg)' },
         '100%': { transform: 'rotate(0)' },
       },
-      pulse_mic: {
-        '0%': { color: 'primary', opacity: '1' },
-        '50%': { color: 'primary', opacity: '0.8' },
-        '100%': { color: 'primary', opacity: '1' },
+      pulse_background: {
+        '0%': { opacity: '1' },
+        '50%': { opacity: '0.65' },
+        '100%': { opacity: '1' },
       },
     },
     tokens: defineTokens({

src/frontend/src/features/analytics/hooks/useIsAnalyticsEnabled.ts

@@ -0,0 +1,6 @@
+import { useConfig } from '@/api/useConfig.ts'
+
+export const useIsAnalyticsEnabled = () => {
+  const { data } = useConfig()
+  return !!data?.analytics?.id
+}

src/frontend/src/features/notifications/MainNotificationToast.tsx

@@ -16,11 +16,11 @@ export const MainNotificationToast = () => {
       if (isMobileBrowser()) {
         return
       }
-      triggerNotificationSound(NotificationType.Joined)
+      triggerNotificationSound(NotificationType.ParticipantJoined)
       toastQueue.add(
         {
           participant,
-          type: NotificationType.Joined,
+          type: NotificationType.ParticipantJoined,
         },
         {
           timeout: 5000,
@@ -67,7 +67,7 @@ export const MainNotificationToast = () => {
       const existingToast = toastQueue.visibleToasts.find(
         (toast) =>
           toast.content.participant === participant &&
-          toast.content.type === NotificationType.Raised
+          toast.content.type === NotificationType.HandRaised
       )
 
       if (existingToast && prevMetadata.raised && !metadata.raised) {
@@ -76,11 +76,11 @@ export const MainNotificationToast = () => {
       }
 
       if (!existingToast && !prevMetadata.raised && metadata.raised) {
-        triggerNotificationSound(NotificationType.Raised)
+        triggerNotificationSound(NotificationType.HandRaised)
         toastQueue.add(
           {
             participant,
-            type: NotificationType.Raised,
+            type: NotificationType.HandRaised,
           },
           { timeout: 5000 }
         )

src/frontend/src/features/notifications/NotificationType.ts

@@ -1,6 +1,5 @@
 export enum NotificationType {
-  Joined = 'joined',
-  Default = 'default',
-  Raised = 'raised',
-  Lowered = 'lowered',
+  ParticipantJoined = 'participantJoined',
+  HandRaised = 'handRaised',
+  // todo - implement message received notification
 }

src/frontend/src/features/notifications/components/ToastRegion.tsx

@@ -17,10 +17,10 @@ export function ToastRegion({ state, ...props }: ToastRegionProps) {
   return (
     <div {...regionProps} ref={ref} className="toast-region">
       {state.visibleToasts.map((toast) => {
-        if (toast.content?.type === NotificationType.Joined) {
+        if (toast.content?.type === NotificationType.ParticipantJoined) {
           return <ToastJoined key={toast.key} toast={toast} state={state} />
         }
-        if (toast.content?.type === NotificationType.Raised) {
+        if (toast.content?.type === NotificationType.HandRaised) {
           return <ToastRaised key={toast.key} toast={toast} state={state} />
         }
         return <Toast key={toast.key} toast={toast} state={state} />

src/frontend/src/features/notifications/hooks/useSoundNotification.tsx

@@ -1,18 +1,24 @@
 import useSound from 'use-sound'
+import { useSnapshot } from 'valtio'
+import { notificationsStore } from '@/stores/notifications'
+import { NotificationType } from '@/features/notifications/NotificationType'
 
 // fixme - handle dynamic audio output changes
 export const useNotificationSound = () => {
+  const notificationsSnap = useSnapshot(notificationsStore)
   const [play] = useSound('./sounds/notifications.mp3', {
     sprite: {
-      joined: [0, 1150],
-      raised: [1400, 180],
-      message: [1580, 300],
+      participantJoined: [0, 1150],
+      handRaised: [1400, 180],
+      messageReceived: [1580, 300],
       waiting: [2039, 710],
       success: [2740, 1304],
     },
+    volume: notificationsSnap.soundNotificationVolume,
   })
-  const triggerNotificationSound = (type: string) => {
-    play({ id: type })
+  const triggerNotificationSound = (type: NotificationType) => {
+    const isSoundEnabled = notificationsSnap.soundNotifications.get(type)
+    if (isSoundEnabled) play({ id: type })
   }
   return { triggerNotificationSound }
 }

src/frontend/src/features/rooms/components/Conference.tsx

@@ -65,6 +65,11 @@ export const Conference = ({
 
   const roomOptions = useMemo((): RoomOptions => {
     return {
+      adaptiveStream: true,
+      dynacast: true,
+      publishDefaults: {
+        videoCodec: 'vp9',
+      },
       videoCaptureDefaults: {
         deviceId: userConfig.videoDeviceId ?? undefined,
       },

src/frontend/src/features/rooms/components/Rating.tsx

@@ -121,7 +121,13 @@ const OpenFeedback = ({
         >
           {t('submit')}
         </Button>
-        <Button invisible size="sm" fullWidth onPress={onNext}>
+        <Button
+          invisible
+          variant="secondary"
+          size="sm"
+          fullWidth
+          onPress={onNext}
+        >
           {t('skip')}
         </Button>
       </VStack>

src/frontend/src/features/rooms/livekit/components/RecordingStateToast.tsx

@@ -0,0 +1,43 @@
+import { css } from '@/styled-system/css'
+import { RiRecordCircleLine } from '@remixicon/react'
+import { Text } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+import { useRoomContext } from '@livekit/components-react'
+
+export const RecordingStateToast = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'recording' })
+
+  const room = useRoomContext()
+
+  if (!room?.isRecording) return
+
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        position: 'fixed',
+        top: '10px',
+        left: '10px',
+        paddingY: '0.25rem',
+        paddingX: '0.25rem 0.35rem',
+        backgroundColor: 'primaryDark.200',
+        borderColor: 'primaryDark.400',
+        border: '1px solid',
+        color: 'white',
+        borderRadius: '4px',
+        gap: '0.5rem',
+      })}
+    >
+      <RiRecordCircleLine
+        size={20}
+        className={css({
+          color: 'white',
+          backgroundColor: 'danger.700',
+          padding: '3px',
+          borderRadius: '3px',
+        })}
+      />
+      <Text variant={'sm'}>{t('label')}</Text>
+    </div>
+  )
+}

src/frontend/src/features/rooms/livekit/components/SidePanel.tsx

@@ -10,6 +10,7 @@ import { useSidePanel } from '../hooks/useSidePanel'
 import { ReactNode } from 'react'
 import { Effects } from './Effects'
 import { Chat } from '../prefabs/Chat'
+import { Transcript } from './Transcript'
 
 type StyledSidePanelProps = {
   title: string
@@ -106,6 +107,7 @@ export const SidePanel = () => {
     isEffectsOpen,
     isChatOpen,
     isSidePanelOpen,
+    isTranscriptOpen,
   } = useSidePanel()
   const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
 
@@ -127,6 +129,9 @@ export const SidePanel = () => {
       <Panel isOpen={isChatOpen}>
         <Chat />
       </Panel>
+      <Panel isOpen={isTranscriptOpen}>
+        <Transcript />
+      </Panel>
     </StyledSidePanel>
   )
 }

src/frontend/src/features/rooms/livekit/components/Transcript.tsx

@@ -0,0 +1,100 @@
+import { Button, Div, H, 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 {
+  RecordingMode,
+  useStartRecording,
+} from '@/features/rooms/api/startRecording'
+import { useStopRecording } from '@/features/rooms/api/stopRecording'
+import { useEffect, useState } from 'react'
+import { RoomEvent } from 'livekit-client'
+import { useTranslation } from 'react-i18next'
+
+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 room = useRoomContext()
+
+  useEffect(() => {
+    const handleRecordingStatusChanged = () => {
+      setIsLoading(false)
+    }
+    room.on(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
+    return () => {
+      room.off(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
+    }
+  }, [room])
+
+  const handleTranscript = async () => {
+    if (!roomId) {
+      console.warn('No room ID found')
+      return
+    }
+    try {
+      setIsLoading(true)
+      if (room.isRecording) {
+        await stopRecordingRoom({ id: roomId })
+      } else {
+        await startRecordingRoom({ id: roomId, mode: RecordingMode.Transcript })
+      }
+    } catch (error) {
+      console.error('Failed to handle transcript:', error)
+      setIsLoading(false)
+    }
+  }
+
+  if (!hasTranscriptAccess) return
+
+  return (
+    <Div
+      display="flex"
+      overflowY="scroll"
+      padding="0 1.5rem"
+      flexGrow={1}
+      flexDirection="column"
+      alignItems="center"
+    >
+      <img src={thirdSlide} alt={'wip'} />
+      {room.isRecording ? (
+        <>
+          <H lvl={2}>{t('stop.heading')}</H>
+          <Text variant="sm" centered wrap="balance">
+            {t('stop.body')}
+          </Text>
+          <div className={css({ height: '2rem' })} />
+          <Button isDisabled={isLoading} onPress={() => handleTranscript()}>
+            <RiStopCircleLine style={{ marginRight: '0.5rem' }} />{' '}
+            {t('stop.button')}
+          </Button>
+        </>
+      ) : (
+        <>
+          <H lvl={2}>{t('start.heading')}</H>
+          <Text variant="sm" centered wrap="balance">
+            {t('start.body')}
+          </Text>
+          <div className={css({ height: '2rem' })} />
+          <Button isDisabled={isLoading} onPress={() => handleTranscript()}>
+            <RiRecordCircleLine style={{ marginRight: '0.5rem' }} />{' '}
+            {t('start.button')}
+          </Button>
+        </>
+      )}
+    </Div>
+  )
+}

src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx

@@ -5,8 +5,12 @@ import { css } from '@/styled-system/css'
 import { ToggleButton } from '@/primitives'
 import { chatStore } from '@/stores/chat'
 import { useSidePanel } from '../../hooks/useSidePanel'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
-export const ChatToggle = () => {
+export const ChatToggle = ({
+  onPress,
+  ...props
+}: Partial<ToggleButtonProps>) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat' })
 
   const chatSnap = useSnapshot(chatStore)
@@ -27,8 +31,12 @@ export const ChatToggle = () => {
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isChatOpen}
-        onPress={() => toggleChat()}
+        onPress={(e) => {
+          toggleChat()
+          onPress?.(e)
+        }}
         data-attr={`controls-chat-${tooltipLabel}`}
+        {...props}
       >
         <RiChat1Line />
       </ToggleButton>

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx

@@ -1,16 +1,11 @@
 import { useTranslation } from 'react-i18next'
 import { RiMore2Line } from '@remixicon/react'
 import { Button, Menu } from '@/primitives'
-
-import { useState } from 'react'
 import { OptionsMenuItems } from '@/features/rooms/livekit/components/controls/Options/OptionsMenuItems'
-import { SettingsDialogExtended } from '@/features/settings/components/SettingsDialogExtended'
-
-export type DialogState = 'username' | 'settings' | null
 
 export const OptionsButton = () => {
   const { t } = useTranslation('rooms')
-  const [dialogOpen, setDialogOpen] = useState<DialogState>(null)
+
   return (
     <>
       <Menu>
@@ -22,12 +17,8 @@ export const OptionsButton = () => {
         >
           <RiMore2Line />
         </Button>
-        <OptionsMenuItems onOpenDialog={setDialogOpen} />
+        <OptionsMenuItems />
       </Menu>
-      <SettingsDialogExtended
-        isOpen={dialogOpen === 'settings'}
-        onOpenChange={(v) => !v && setDialogOpen(null)}
-      />
     </>
   )
 }

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx

@@ -5,21 +5,16 @@ import {
 } from '@remixicon/react'
 import { MenuItem, Menu as RACMenu, Section } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
-import { Dispatch, SetStateAction } from 'react'
-import { DialogState } from './OptionsButton'
 import { Separator } from '@/primitives/Separator'
 import { useSidePanel } from '../../../hooks/useSidePanel'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
-import { TranscriptMenuItem } from './TranscriptMenuItem'
+import { useSettingsDialog } from '../SettingsDialogContext'
 
 // @todo try refactoring it to use MenuList component
-export const OptionsMenuItems = ({
-  onOpenDialog,
-}: {
-  onOpenDialog: Dispatch<SetStateAction<DialogState>>
-}) => {
+export const OptionsMenuItems = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
   const { toggleEffects } = useSidePanel()
+  const { setDialogOpen } = useSettingsDialog()
   return (
     <RACMenu
       style={{
@@ -35,7 +30,6 @@ export const OptionsMenuItems = ({
           <RiAccountBoxLine size={20} />
           {t('effects')}
         </MenuItem>
-        <TranscriptMenuItem />
       </Section>
       <Separator />
       <Section>
@@ -49,7 +43,7 @@ export const OptionsMenuItems = ({
         </MenuItem>
         <MenuItem
           className={menuRecipe({ icon: true }).item}
-          onAction={() => onOpenDialog('settings')}
+          onAction={() => setDialogOpen(true)}
         >
           <RiSettings3Line size={20} />
           {t('settings')}

src/frontend/src/features/rooms/livekit/components/controls/Options/TranscriptMenuItem.tsx

@@ -1,71 +0,0 @@
-import { RiRecordCircleLine, RiStopCircleLine } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { menuRecipe } from '@/primitives/menuRecipe'
-import { MenuItem } from 'react-aria-components'
-import {
-  RecordingMode,
-  useStartRecording,
-} from '@/features/rooms/api/startRecording'
-import { useStopRecording } from '@/features/rooms/api/stopRecording'
-import { useRoomContext } from '@livekit/components-react'
-import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
-import { useConfig } from '@/api/useConfig'
-
-export const TranscriptMenuItem = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-
-  const apiRoomData = useRoomData()
-
-  const { mutateAsync: startRecordingRoom } = useStartRecording()
-  const { mutateAsync: stopRecordingRoom } = useStopRecording()
-
-  const { data } = useConfig()
-
-  const room = useRoomContext()
-
-  const handleTranscript = async () => {
-    const roomId = apiRoomData?.livekit?.room
-
-    if (!roomId) {
-      console.warn('No room ID found')
-      return
-    }
-
-    try {
-      if (room.isRecording) {
-        await stopRecordingRoom({ id: roomId })
-      } else {
-        await startRecordingRoom({ id: roomId, mode: RecordingMode.Transcript })
-      }
-    } catch (error) {
-      console.error('Failed to handle transcript:', error)
-    }
-  }
-
-  if (
-    !data?.recording?.is_enabled ||
-    !data?.recording?.available_modes?.includes(RecordingMode.Transcript) ||
-    !apiRoomData?.is_administrable
-  ) {
-    return
-  }
-
-  return (
-    <MenuItem
-      className={menuRecipe({ icon: true }).item}
-      onAction={async () => await handleTranscript()}
-    >
-      {room.isRecording ? (
-        <>
-          <RiRecordCircleLine size={20} />
-          {t('transcript.stop')}
-        </>
-      ) : (
-        <>
-          <RiStopCircleLine size={20} />
-          {t('transcript.start')}
-        </>
-      )}
-    </MenuItem>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx

@@ -84,9 +84,12 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
           <RiMicOffFill color={'gray'} />
         ) : (
           <RiMicFill
-            style={{
-              animation: isSpeaking ? 'pulse_mic 800ms infinite' : undefined,
-            }}
+            className={css({
+              color: isSpeaking ? 'primaryDark.300' : 'primaryDark.50',
+              animation: isSpeaking
+                ? 'pulse_background 800ms infinite'
+                : undefined,
+            })}
           />
         )}
       </Button>

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx

@@ -4,8 +4,12 @@ import { ToggleButton } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { useParticipants } from '@livekit/components-react'
 import { useSidePanel } from '../../../hooks/useSidePanel'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
-export const ParticipantsToggle = () => {
+export const ParticipantsToggle = ({
+  onPress,
+  ...props
+}: ToggleButtonProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.participants' })
 
   /**
@@ -33,8 +37,12 @@ export const ParticipantsToggle = () => {
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isParticipantsOpen}
-        onPress={() => toggleParticipants()}
+        onPress={(e) => {
+          toggleParticipants()
+          onPress?.(e)
+        }}
         data-attr={`controls-participants-${tooltipLabel}`}
+        {...props}
       >
         <RiGroupLine />
       </ToggleButton>

src/frontend/src/features/rooms/livekit/components/controls/ScreenShareToggle.tsx

@@ -4,13 +4,21 @@ import { useTranslation } from 'react-i18next'
 import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
 import { Track } from 'livekit-client'
 import React from 'react'
+import { type ButtonRecipeProps } from '@/primitives/buttonRecipe'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
-export const ScreenShareToggle = (
-  props: Omit<
-    UseTrackToggleProps<Track.Source.ScreenShare>,
-    'source' | 'captureOptions'
-  >
-) => {
+type Props = Omit<
+  UseTrackToggleProps<Track.Source.ScreenShare>,
+  'source' | 'captureOptions'
+> &
+  Pick<NonNullable<ButtonRecipeProps>, 'variant'> &
+  ToggleButtonProps
+
+export const ScreenShareToggle = ({
+  variant = 'primaryDark',
+  onPress,
+  ...props
+}: Props) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.screenShare' })
   const { buttonProps, enabled } = useTrackToggle({
     ...props,
@@ -26,18 +34,16 @@ export const ScreenShareToggle = (
     <ToggleButton
       isSelected={enabled}
       square
-      variant="primaryDark"
+      variant={variant}
       tooltip={t(tooltipLabel)}
-      onPress={(e) =>
+      onPress={(e) => {
         buttonProps.onClick?.(
           e as unknown as React.MouseEvent<HTMLButtonElement, MouseEvent>
         )
-      }
-      style={{
-        maxWidth: '46px',
-        maxHeight: '46px',
+        onPress?.(e)
       }}
       data-attr={`controls-screenshare-${tooltipLabel}`}
+      {...props}
     >
       <Div position="relative">
         <RiRectangleLine size={28} />

src/frontend/src/features/rooms/livekit/components/controls/SettingsDialogContext.tsx

@@ -0,0 +1,36 @@
+import { SettingsDialogExtended } from '@/features/settings/components/SettingsDialogExtended'
+import React, { createContext, useContext, useState } from 'react'
+
+const SettingsDialogContext = createContext<
+  | {
+      dialogOpen: boolean
+      setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>
+    }
+  | undefined
+>(undefined)
+
+export const SettingsDialogProvider: React.FC<{
+  children: React.ReactNode
+}> = ({ children }) => {
+  const [dialogOpen, setDialogOpen] = useState(false)
+  return (
+    <SettingsDialogContext.Provider value={{ dialogOpen, setDialogOpen }}>
+      {children}
+      <SettingsDialogExtended
+        isOpen={dialogOpen}
+        onOpenChange={(v) => !v && setDialogOpen(false)}
+      />
+    </SettingsDialogContext.Provider>
+  )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useSettingsDialog = () => {
+  const context = useContext(SettingsDialogContext)
+  if (!context) {
+    throw new Error(
+      'useSettingsDialog must be used within a SettingsDialogProvider'
+    )
+  }
+  return context
+}

src/frontend/src/features/rooms/livekit/components/controls/SupportToggle.tsx

@@ -3,8 +3,9 @@ import { RiQuestionLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { Crisp } from 'crisp-sdk-web'
 import { useEffect, useState } from 'react'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
-export const SupportToggle = () => {
+export const SupportToggle = ({ onPress, ...props }: ToggleButtonProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls' })
   const [isOpened, setIsOpened] = useState($crisp.is('chat:opened'))
 
@@ -32,8 +33,16 @@ export const SupportToggle = () => {
       tooltip={t('support')}
       aria-label={t('support')}
       isSelected={isOpened}
-      onPress={() => (isOpened ? Crisp.chat.close() : Crisp.chat.open())}
+      onPress={(e) => {
+        if (isOpened) {
+          Crisp.chat.close()
+        } else {
+          Crisp.chat.open()
+        }
+        onPress?.(e)
+      }}
       data-attr="controls-support"
+      {...props}
     >
       <RiQuestionLine />
     </ToggleButton>

src/frontend/src/features/rooms/livekit/components/controls/TranscriptToggle.tsx

@@ -0,0 +1,46 @@
+import { ToggleButton } from '@/primitives'
+import { RiBardLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useSidePanel } from '../../hooks/useSidePanel'
+import { useHasTranscriptAccess } from '../../hooks/useHasTranscriptAccess'
+import { css } from '@/styled-system/css'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
+
+export const TranscriptToggle = ({
+  variant = 'primaryDark',
+  onPress,
+  ...props
+}: ToggleButtonProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.transcript' })
+
+  const { isTranscriptOpen, toggleTranscript } = useSidePanel()
+  const tooltipLabel = isTranscriptOpen ? 'open' : 'closed'
+
+  const hasTranscriptAccess = useHasTranscriptAccess()
+
+  if (!hasTranscriptAccess) return
+
+  return (
+    <div
+      className={css({
+        position: 'relative',
+        display: 'inline-block',
+      })}
+    >
+      <ToggleButton
+        square
+        variant={variant}
+        aria-label={t(tooltipLabel)}
+        tooltip={t(tooltipLabel)}
+        isSelected={isTranscriptOpen}
+        onPress={(e) => {
+          toggleTranscript()
+          onPress?.(e)
+        }}
+        {...props}
+      >
+        <RiBardLine />
+      </ToggleButton>
+    </div>
+  )
+}

src/frontend/src/features/rooms/livekit/hooks/useHasTranscriptAccess.ts

@@ -0,0 +1,17 @@
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
+import { useIsTranscriptEnabled } from './useIsTranscriptEnabled'
+import { useIsAdminOrOwner } from './useIsAdminOrOwner'
+
+export const useHasTranscriptAccess = () => {
+  const featureEnabled = useFeatureFlagEnabled('transcription-summary')
+  const isAnalyticsEnabled = useIsAnalyticsEnabled()
+  const isTranscriptEnabled = useIsTranscriptEnabled()
+  const isAdminOrOwner = useIsAdminOrOwner()
+
+  return (
+    (featureEnabled || !isAnalyticsEnabled) &&
+    isAdminOrOwner &&
+    isTranscriptEnabled
+  )
+}

src/frontend/src/features/rooms/livekit/hooks/useIsAdminOrOwner.ts

@@ -0,0 +1,6 @@
+import { useRoomData } from './useRoomData'
+
+export const useIsAdminOrOwner = () => {
+  const apiRoomData = useRoomData()
+  return apiRoomData?.is_administrable
+}

src/frontend/src/features/rooms/livekit/hooks/useIsTranscriptEnabled.ts

@@ -0,0 +1,11 @@
+import { RecordingMode } from '@/features/rooms/api/startRecording'
+import { useConfig } from '@/api/useConfig'
+
+export const useIsTranscriptEnabled = () => {
+  const { data } = useConfig()
+
+  return (
+    data?.recording?.is_enabled &&
+    data?.recording?.available_modes?.includes(RecordingMode.Transcript)
+  )
+}

src/frontend/src/features/rooms/livekit/hooks/useRoomId.ts

@@ -0,0 +1,6 @@
+import { useRoomData } from './useRoomData'
+
+export const useRoomId = () => {
+  const apiRoomData = useRoomData()
+  return apiRoomData?.livekit?.room
+}

src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts

@@ -5,6 +5,7 @@ export enum PanelId {
   PARTICIPANTS = 'participants',
   EFFECTS = 'effects',
   CHAT = 'chat',
+  TRANSCRIPT = 'transcript',
 }
 
 export const useSidePanel = () => {
@@ -14,6 +15,7 @@ export const useSidePanel = () => {
   const isParticipantsOpen = activePanelId == PanelId.PARTICIPANTS
   const isEffectsOpen = activePanelId == PanelId.EFFECTS
   const isChatOpen = activePanelId == PanelId.CHAT
+  const isTranscriptOpen = activePanelId == PanelId.TRANSCRIPT
   const isSidePanelOpen = !!activePanelId
 
   const toggleParticipants = () => {
@@ -28,14 +30,20 @@ export const useSidePanel = () => {
     layoutStore.activePanelId = isEffectsOpen ? null : PanelId.EFFECTS
   }
 
+  const toggleTranscript = () => {
+    layoutStore.activePanelId = isTranscriptOpen ? null : PanelId.TRANSCRIPT
+  }
+
   return {
     activePanelId,
     toggleParticipants,
     toggleChat,
     toggleEffects,
+    toggleTranscript,
     isChatOpen,
     isParticipantsOpen,
     isEffectsOpen,
     isSidePanelOpen,
+    isTranscriptOpen,
   }
 }

src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx

@@ -1,163 +0,0 @@
-import { Track } from 'livekit-client'
-import * as React from 'react'
-
-import { supportsScreenSharing } from '@livekit/components-core'
-
-import { usePersistentUserChoices } from '@livekit/components-react'
-
-import { StartMediaButton } from '../components/controls/StartMediaButton'
-import { OptionsButton } from '../components/controls/Options/OptionsButton'
-import { ParticipantsToggle } from '../components/controls/Participants/ParticipantsToggle'
-import { ChatToggle } from '../components/controls/ChatToggle'
-import { HandToggle } from '../components/controls/HandToggle'
-import { SelectToggleDevice } from '../components/controls/SelectToggleDevice'
-import { LeaveButton } from '../components/controls/LeaveButton'
-import { ScreenShareToggle } from '../components/controls/ScreenShareToggle'
-import { css } from '@/styled-system/css'
-import { SupportToggle } from '@/features/rooms/livekit/components/controls/SupportToggle.tsx'
-
-/** @public */
-export type ControlBarControls = {
-  microphone?: boolean
-  camera?: boolean
-  chat?: boolean
-  screenShare?: boolean
-  leave?: boolean
-  settings?: boolean
-}
-
-/** @public */
-export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
-  onDeviceError?: (error: { source: Track.Source; error: Error }) => void
-  variation?: 'minimal' | 'verbose' | 'textOnly'
-  controls?: ControlBarControls
-  /**
-   * If `true`, the user's device choices will be persisted.
-   * This will enable the user to have the same device choices when they rejoin the room.
-   * @defaultValue true
-   * @alpha
-   */
-  saveUserChoices?: boolean
-}
-
-/**
- * The `ControlBar` prefab gives the user the basic user interface to control their
- * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
- *
- * @remarks
- * This component is build with other LiveKit components like `TrackToggle`,
- * `DeviceSelectorButton`, `DisconnectButton` and `StartAudio`.
- *
- * @example
- * ```tsx
- * <LiveKitRoom>
- *   <ControlBar />
- * </LiveKitRoom>
- * ```
- * @public
- */
-export function ControlBar({
-  saveUserChoices = true,
-  onDeviceError,
-}: ControlBarProps) {
-  const browserSupportsScreenSharing = supportsScreenSharing()
-
-  const {
-    saveAudioInputEnabled,
-    saveVideoInputEnabled,
-    saveAudioInputDeviceId,
-    saveVideoInputDeviceId,
-  } = usePersistentUserChoices({ preventSave: !saveUserChoices })
-
-  const microphoneOnChange = React.useCallback(
-    (enabled: boolean, isUserInitiated: boolean) =>
-      isUserInitiated ? saveAudioInputEnabled(enabled) : null,
-    [saveAudioInputEnabled]
-  )
-
-  const cameraOnChange = React.useCallback(
-    (enabled: boolean, isUserInitiated: boolean) =>
-      isUserInitiated ? saveVideoInputEnabled(enabled) : null,
-    [saveVideoInputEnabled]
-  )
-
-  return (
-    <div
-      className={css({
-        width: '100vw',
-        display: 'flex',
-        position: 'absolute',
-        padding: '1.125rem',
-        bottom: 0,
-        left: 0,
-        right: 0,
-      })}
-    >
-      <div
-        className={css({
-          display: 'flex',
-          justifyContent: 'flex-start',
-          flex: '1 1 33%',
-          alignItems: 'center',
-          gap: '0.5rem',
-          marginLeft: '0.5rem',
-        })}
-      ></div>
-      <div
-        className={css({
-          flex: '1 1 33%',
-          alignItems: 'center',
-          justifyContent: 'center',
-          display: 'flex',
-          gap: '0.65rem',
-        })}
-      >
-        <SelectToggleDevice
-          source={Track.Source.Microphone}
-          onChange={microphoneOnChange}
-          onDeviceError={(error) =>
-            onDeviceError?.({ source: Track.Source.Microphone, error })
-          }
-          onActiveDeviceChange={(deviceId) =>
-            saveAudioInputDeviceId(deviceId ?? '')
-          }
-        />
-        <SelectToggleDevice
-          source={Track.Source.Camera}
-          onChange={cameraOnChange}
-          onDeviceError={(error) =>
-            onDeviceError?.({ source: Track.Source.Camera, error })
-          }
-          onActiveDeviceChange={(deviceId) =>
-            saveVideoInputDeviceId(deviceId ?? '')
-          }
-        />
-        {browserSupportsScreenSharing && (
-          <ScreenShareToggle
-            onDeviceError={(error) =>
-              onDeviceError?.({ source: Track.Source.ScreenShare, error })
-            }
-          />
-        )}
-        <HandToggle />
-        <OptionsButton />
-        <LeaveButton />
-        <StartMediaButton />
-      </div>
-      <div
-        className={css({
-          display: 'flex',
-          justifyContent: 'flex-end',
-          flex: '1 1 33%',
-          alignItems: 'center',
-          gap: '0.5rem',
-          paddingRight: '0.25rem',
-        })}
-      >
-        <ChatToggle />
-        <ParticipantsToggle />
-        <SupportToggle />
-      </div>
-    </div>
-  )
-}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/ControlBar.tsx

@@ -0,0 +1,103 @@
+import { Track } from 'livekit-client'
+import * as React from 'react'
+import { usePersistentUserChoices } from '@livekit/components-react'
+
+import { MobileControlBar } from './MobileControlBar'
+import { DesktopControlBar } from './DesktopControlBar'
+import { SettingsDialogProvider } from '../../components/controls/SettingsDialogContext'
+import { useIsMobile } from '@/utils/useIsMobile'
+
+/** @public */
+export type ControlBarControls = {
+  microphone?: boolean
+  camera?: boolean
+  chat?: boolean
+  screenShare?: boolean
+  leave?: boolean
+  settings?: boolean
+}
+
+/** @public */
+export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  onDeviceError?: (error: { source: Track.Source; error: Error }) => void
+  variation?: 'minimal' | 'verbose' | 'textOnly'
+  controls?: ControlBarControls
+  /**
+   * If `true`, the user's device choices will be persisted.
+   * This will enable the user to have the same device choices when they rejoin the room.
+   * @defaultValue true
+   * @alpha
+   */
+  saveUserChoices?: boolean
+}
+
+/**
+ * The `ControlBar` prefab gives the user the basic user interface to control their
+ * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
+ *
+ * @remarks
+ * This component is build with other LiveKit components like `TrackToggle`,
+ * `DeviceSelectorButton`, `DisconnectButton` and `StartAudio`.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <ControlBar />
+ * </LiveKitRoom>
+ * ```
+ * @public
+ */
+export function ControlBar({
+  saveUserChoices = true,
+  onDeviceError,
+}: ControlBarProps) {
+  const {
+    saveAudioInputEnabled,
+    saveVideoInputEnabled,
+    saveAudioInputDeviceId,
+    saveVideoInputDeviceId,
+  } = usePersistentUserChoices({ preventSave: !saveUserChoices })
+
+  const microphoneOnChange = React.useCallback(
+    (enabled: boolean, isUserInitiated: boolean) =>
+      isUserInitiated ? saveAudioInputEnabled(enabled) : null,
+    [saveAudioInputEnabled]
+  )
+
+  const cameraOnChange = React.useCallback(
+    (enabled: boolean, isUserInitiated: boolean) =>
+      isUserInitiated ? saveVideoInputEnabled(enabled) : null,
+    [saveVideoInputEnabled]
+  )
+
+  const barProps = {
+    onDeviceError,
+    microphoneOnChange,
+    cameraOnChange,
+    saveAudioInputDeviceId,
+    saveVideoInputDeviceId,
+  }
+
+  const isMobile = useIsMobile()
+
+  return (
+    <SettingsDialogProvider>
+      {isMobile ? (
+        <MobileControlBar {...barProps} />
+      ) : (
+        <DesktopControlBar {...barProps} />
+      )}
+    </SettingsDialogProvider>
+  )
+}
+
+export interface ControlBarAuxProps {
+  onDeviceError: ControlBarProps['onDeviceError']
+  microphoneOnChange: (
+    enabled: boolean,
+    isUserInitiated: boolean
+  ) => void | null
+  cameraOnChange: (enabled: boolean, isUserInitiated: boolean) => void | null
+  saveAudioInputDeviceId: (deviceId: string) => void
+  saveVideoInputDeviceId: (deviceId: string) => void
+}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx

@@ -0,0 +1,106 @@
+import { supportsScreenSharing } from '@livekit/components-core'
+import { ControlBarAuxProps } from './ControlBar'
+import { css } from '@/styled-system/css'
+import { LeaveButton } from '../../components/controls/LeaveButton'
+import { SelectToggleDevice } from '../../components/controls/SelectToggleDevice'
+import { Track } from 'livekit-client'
+import { HandToggle } from '../../components/controls/HandToggle'
+import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle'
+import { OptionsButton } from '../../components/controls/Options/OptionsButton'
+import { StartMediaButton } from '../../components/controls/StartMediaButton'
+import { ChatToggle } from '../../components/controls/ChatToggle'
+import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
+import { SupportToggle } from '../../components/controls/SupportToggle'
+import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
+
+export function DesktopControlBar({
+  onDeviceError,
+  microphoneOnChange,
+  cameraOnChange,
+  saveAudioInputDeviceId,
+  saveVideoInputDeviceId,
+}: ControlBarAuxProps) {
+  const browserSupportsScreenSharing = supportsScreenSharing()
+  return (
+    <>
+      <div
+        className={css({
+          width: '100vw',
+          display: 'flex',
+          position: 'absolute',
+          padding: '1.125rem',
+          bottom: 0,
+          left: 0,
+          right: 0,
+        })}
+      >
+        <div
+          className={css({
+            display: 'flex',
+            justifyContent: 'flex-start',
+            flex: '1 1 33%',
+            alignItems: 'center',
+            gap: '0.5rem',
+            marginLeft: '0.5rem',
+          })}
+        ></div>
+        <div
+          className={css({
+            flex: '1 1 33%',
+            alignItems: 'center',
+            justifyContent: 'center',
+            display: 'flex',
+            gap: '0.65rem',
+          })}
+        >
+          <SelectToggleDevice
+            source={Track.Source.Microphone}
+            onChange={microphoneOnChange}
+            onDeviceError={(error) =>
+              onDeviceError?.({ source: Track.Source.Microphone, error })
+            }
+            onActiveDeviceChange={(deviceId) =>
+              saveAudioInputDeviceId(deviceId ?? '')
+            }
+          />
+          <SelectToggleDevice
+            source={Track.Source.Camera}
+            onChange={cameraOnChange}
+            onDeviceError={(error) =>
+              onDeviceError?.({ source: Track.Source.Camera, error })
+            }
+            onActiveDeviceChange={(deviceId) =>
+              saveVideoInputDeviceId(deviceId ?? '')
+            }
+          />
+          {browserSupportsScreenSharing && (
+            <ScreenShareToggle
+              onDeviceError={(error) =>
+                onDeviceError?.({ source: Track.Source.ScreenShare, error })
+              }
+            />
+          )}
+          <HandToggle />
+          <OptionsButton />
+          <LeaveButton />
+          <StartMediaButton />
+        </div>
+        <div
+          className={css({
+            display: 'flex',
+            justifyContent: 'flex-end',
+            flex: '1 1 33%',
+            alignItems: 'center',
+            gap: '0.5rem',
+            paddingRight: '0.25rem',
+          })}
+        >
+          <ChatToggle />
+          <ParticipantsToggle />
+          <TranscriptToggle />
+          <SupportToggle />
+        </div>
+      </div>
+    </>
+  )
+}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx

@@ -0,0 +1,182 @@
+import { supportsScreenSharing } from '@livekit/components-core'
+import { useTranslation } from 'react-i18next'
+import { ControlBarAuxProps } from './ControlBar'
+import React from 'react'
+import { css } from '@/styled-system/css'
+import { LeaveButton } from '../../components/controls/LeaveButton'
+import { SelectToggleDevice } from '../../components/controls/SelectToggleDevice'
+import { Track } from 'livekit-client'
+import { HandToggle } from '../../components/controls/HandToggle'
+import { Button } from '@/primitives/Button'
+import {
+  RiAccountBoxLine,
+  RiMegaphoneLine,
+  RiMore2Line,
+  RiSettings3Line,
+} from '@remixicon/react'
+import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle'
+import { ChatToggle } from '../../components/controls/ChatToggle'
+import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
+import { SupportToggle } from '../../components/controls/SupportToggle'
+import { useSidePanel } from '../../hooks/useSidePanel'
+import { LinkButton } from '@/primitives'
+import { useSettingsDialog } from '../../components/controls/SettingsDialogContext'
+import { ResponsiveMenu } from './ResponsiveMenu'
+import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
+
+export function MobileControlBar({
+  onDeviceError,
+  microphoneOnChange,
+  cameraOnChange,
+  saveAudioInputDeviceId,
+  saveVideoInputDeviceId,
+}: ControlBarAuxProps) {
+  const { t } = useTranslation('rooms')
+  const [isMenuOpened, setIsMenuOpened] = React.useState(false)
+  const browserSupportsScreenSharing = supportsScreenSharing()
+  const { toggleEffects } = useSidePanel()
+  const { setDialogOpen } = useSettingsDialog()
+
+  return (
+    <>
+      <div
+        className={css({
+          width: '100vw',
+          display: 'flex',
+          position: 'absolute',
+          padding: '1.125rem',
+          justifyContent: 'center',
+          bottom: 0,
+          left: 0,
+          right: 0,
+        })}
+      >
+        <div
+          className={css({
+            display: 'flex',
+            justifyContent: 'space-between',
+            width: '422px',
+          })}
+        >
+          <LeaveButton />
+          <SelectToggleDevice
+            source={Track.Source.Microphone}
+            onChange={microphoneOnChange}
+            onDeviceError={(error) =>
+              onDeviceError?.({ source: Track.Source.Microphone, error })
+            }
+            onActiveDeviceChange={(deviceId) =>
+              saveAudioInputDeviceId(deviceId ?? '')
+            }
+          />
+          <SelectToggleDevice
+            source={Track.Source.Camera}
+            onChange={cameraOnChange}
+            onDeviceError={(error) =>
+              onDeviceError?.({ source: Track.Source.Camera, error })
+            }
+            onActiveDeviceChange={(deviceId) =>
+              saveVideoInputDeviceId(deviceId ?? '')
+            }
+          />
+          <HandToggle />
+          <Button
+            square
+            variant="primaryDark"
+            aria-label={t('options.buttonLabel')}
+            tooltip={t('options.buttonLabel')}
+            onPress={() => setIsMenuOpened(true)}
+          >
+            <RiMore2Line />
+          </Button>
+        </div>
+      </div>
+      <ResponsiveMenu
+        isOpened={isMenuOpened}
+        onClosed={() => setIsMenuOpened(false)}
+      >
+        <div
+          className={css({
+            display: 'flex',
+            justifyContent: 'center',
+          })}
+        >
+          <div
+            className={css({
+              flexGrow: 1,
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
+              gridGap: '1rem',
+              '& > *': {
+                alignSelf: 'center',
+                justifySelf: 'center',
+              },
+            })}
+          >
+            {browserSupportsScreenSharing && (
+              <ScreenShareToggle
+                onDeviceError={(error) =>
+                  onDeviceError?.({ source: Track.Source.ScreenShare, error })
+                }
+                variant="primaryTextDark"
+                description={true}
+                onPress={() => setIsMenuOpened(false)}
+              />
+            )}
+            <ChatToggle
+              description={true}
+              onPress={() => setIsMenuOpened(false)}
+            />
+            <ParticipantsToggle
+              description={true}
+              onPress={() => setIsMenuOpened(false)}
+            />
+            <TranscriptToggle
+              description={true}
+              onPress={() => setIsMenuOpened(false)}
+            />
+            <SupportToggle
+              description={true}
+              onPress={() => setIsMenuOpened(false)}
+            />
+            <Button
+              onPress={() => {
+                toggleEffects()
+                setIsMenuOpened(false)
+              }}
+              variant="primaryTextDark"
+              aria-label={t('options.items.effects')}
+              tooltip={t('options.items.effects')}
+              description={true}
+            >
+              <RiAccountBoxLine size={20} />
+            </Button>
+            <LinkButton
+              href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
+              variant="primaryTextDark"
+              tooltip={t('options.items.feedbacks')}
+              aria-label={t('options.items.feedbacks')}
+              description={true}
+              target="_blank"
+              onPress={() => setIsMenuOpened(false)}
+            >
+              <RiMegaphoneLine size={20} />
+            </LinkButton>
+            <Button
+              onPress={() => {
+                setDialogOpen(true)
+                setIsMenuOpened(false)
+              }}
+              variant="primaryTextDark"
+              aria-label={t('options.items.settings')}
+              tooltip={t('options.items.settings')}
+              description={true}
+            >
+              <RiSettings3Line size={20} />
+            </Button>
+          </div>
+        </div>
+      </ResponsiveMenu>
+    </>
+  )
+}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/ResponsiveMenu.tsx

@@ -0,0 +1,56 @@
+import { css } from '@/styled-system/css'
+import { PropsWithChildren } from 'react'
+import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
+
+interface ResponsiveMenuProps extends PropsWithChildren {
+  isOpened: boolean
+  onClosed: () => void
+}
+
+export function ResponsiveMenu({
+  isOpened,
+  onClosed,
+  children,
+}: ResponsiveMenuProps) {
+  return (
+    <ModalOverlay
+      isDismissable
+      isOpen={isOpened}
+      onOpenChange={(isOpened) => {
+        if (!isOpened) {
+          onClosed()
+        }
+      }}
+      className={css({
+        width: '100vw',
+        height: 'var(--visual-viewport-height)',
+        zIndex: 100,
+        justifyContent: 'center',
+        alignItems: 'flex-end',
+        display: 'flex',
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        padding: '1.5rem 1.5rem 1rem 1.5rem',
+        boxSizing: 'border-box',
+      })}
+    >
+      <Modal
+        className={css({
+          backgroundColor: 'primaryDark.200',
+          borderRadius: '20px',
+          flexGrow: 1,
+          padding: '1.5rem',
+          '&[data-entering]': {
+            animation: 'slide-full 200ms',
+          },
+          '&[data-exiting]': {
+            animation: 'slide-full 200ms reverse',
+          },
+        })}
+      >
+        <Dialog>{children}</Dialog>
+      </Modal>
+    </ModalOverlay>
+  )
+}

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -20,7 +20,7 @@ import {
   useCreateLayoutContext,
 } from '@livekit/components-react'
 
-import { ControlBar } from './ControlBar'
+import { ControlBar } from './ControlBar/ControlBar'
 import { styled } from '@/styled-system/jsx'
 import { cva } from '@/styled-system/css'
 import { MainNotificationToast } from '@/features/notifications/MainNotificationToast'
@@ -28,6 +28,7 @@ import { FocusLayout } from '../components/FocusLayout'
 import { ParticipantTile } from '../components/ParticipantTile'
 import { SidePanel } from '../components/SidePanel'
 import { useSidePanel } from '../hooks/useSidePanel'
+import { RecordingStateToast } from '../components/RecordingStateToast'
 
 const LayoutWrapper = styled(
   'div',
@@ -212,6 +213,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
       )}
       <RoomAudioRenderer />
       <ConnectionStateToast />
+      <RecordingStateToast />
     </div>
   )
 }

src/frontend/src/features/settings/components/SettingsDialogExtended.tsx

@@ -6,12 +6,14 @@ import { Heading } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import {
   RiAccountCircleLine,
+  RiNotification3Line,
   RiSettings3Line,
   RiSpeakerLine,
 } from '@remixicon/react'
 import { AccountTab } from './tabs/AccountTab'
-import { GeneralTab } from '@/features/settings/components/tabs/GeneralTab.tsx'
-import { AudioTab } from '@/features/settings/components/tabs/AudioTab.tsx'
+import { NotificationsTab } from './tabs/NotificationsTab'
+import { GeneralTab } from './tabs/GeneralTab'
+import { AudioTab } from './tabs/AudioTab'
 import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
 import { useRef } from 'react'
 
@@ -81,12 +83,17 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
               <RiSettings3Line />
               {isWideScreen && t('tabs.general')}
             </Tab>
+            <Tab icon highlight id="4">
+              <RiNotification3Line />
+              {isWideScreen && t('tabs.notifications')}
+            </Tab>
           </TabList>
         </div>
         <div className={tabPanelContainerStyle}>
           <AccountTab id="1" onOpenChange={props.onOpenChange} />
           <AudioTab id="2" />
           <GeneralTab id="3" />
+          <NotificationsTab id="4" />
         </div>
       </Tabs>
     </Dialog>

src/frontend/src/features/settings/components/tabs/NotificationsTab.tsx

@@ -0,0 +1,41 @@
+import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
+import { H, Switch } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { useTranslation } from 'react-i18next'
+import { useSnapshot } from 'valtio'
+import { notificationsStore } from '@/stores/notifications'
+
+export type NotificationsTabProps = Pick<TabPanelProps, 'id'>
+
+export const NotificationsTab = ({ id }: NotificationsTabProps) => {
+  const { t } = useTranslation('settings', { keyPrefix: 'notifications' })
+  const notificationsSnap = useSnapshot(notificationsStore)
+  return (
+    <TabPanel padding={'md'} flex id={id}>
+      <H lvl={2}>{t('heading')}</H>
+      <ul
+        className={css({
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+        })}
+      >
+        {Array.from(notificationsSnap.soundNotifications).map(
+          ([key, value]) => (
+            <li key={key}>
+              <Switch
+                aria-label={`${t(`actions.${value ? 'disable' : 'enable'}`)} ${t('label')} "${t(`items.${key}`)}"`}
+                isSelected={value}
+                onChange={(v) => {
+                  notificationsStore.soundNotifications.set(key, v)
+                }}
+              >
+                {t(`items.${key}`)}
+              </Switch>
+            </li>
+          )
+        )}
+      </ul>
+    </TabPanel>
+  )
+}

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

@@ -71,6 +71,10 @@
       "open": "",
       "closed": ""
     },
+    "transcript": {
+      "open": "",
+      "closed": ""
+    },
     "support": ""
   },
   "options": {
@@ -79,11 +83,7 @@
       "feedbacks": "",
       "settings": "",
       "username": "",
-      "effects": "",
-      "transcript": {
-        "start": "",
-        "stop": ""
-      }
+      "effects": ""
     }
   },
   "effects": {
@@ -102,18 +102,32 @@
     "heading": {
       "participants": "",
       "effects": "",
-      "chat": ""
+      "chat": "",
+      "transcript": ""
     },
     "content": {
       "participants": "",
       "effects": "",
-      "chat": ""
+      "chat": "",
+      "transcript": ""
     },
     "closeButton": ""
   },
   "chat": {
     "disclaimer": ""
   },
+  "transcript": {
+    "start": {
+      "heading": "",
+      "body": "",
+      "button": ""
+    },
+    "stop": {
+      "heading": "",
+      "body": "",
+      "button": ""
+    }
+  },
   "rating": {
     "submit": "",
     "question": "",
@@ -150,5 +164,8 @@
     "raisedHands": "",
     "lowerParticipantHand": "",
     "lowerParticipantsHand": ""
+  },
+  "recording": {
+    "label": ""
   }
 }

src/frontend/src/locales/de/settings.json

@@ -19,6 +19,19 @@
     },
     "permissionsRequired": ""
   },
+  "notifications": {
+    "heading": "",
+    "label": "",
+    "actions": {
+      "disable": "",
+      "enable": ""
+    },
+    "items": {
+      "participantJoined": "",
+      "handRaised": "",
+      "messageReceived": ""
+    }
+  },
   "dialog": {
     "heading": ""
   },
@@ -30,6 +43,7 @@
   "tabs": {
     "account": "",
     "audio": "",
-    "general": ""
+    "general": "",
+    "notifications": ""
   }
 }

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

@@ -70,6 +70,10 @@
       "open": "Hide everyone",
       "closed": "See everyone"
     },
+    "transcript": {
+      "open": "Hide AI assistant",
+      "closed": "Show AI assistant"
+    },
     "support": "Support"
   },
   "options": {
@@ -78,11 +82,7 @@
       "feedbacks": "Give us feedbacks",
       "settings": "Settings",
       "username": "Update Your Name",
-      "effects": "Apply effects",
-      "transcript": {
-        "start": "Start meeting transcription",
-        "stop": "Stop ongoing transcription"
-      }
+      "effects": "Apply effects"
     }
   },
   "effects": {
@@ -101,18 +101,32 @@
     "heading": {
       "participants": "Participants",
       "effects": "Effects",
-      "chat": "Messages in the chat"
+      "chat": "Messages in the chat",
+      "transcript": "AI Assistant"
     },
     "content": {
       "participants": "participants",
       "effects": "effects",
-      "chat": "messages"
+      "chat": "messages",
+      "transcript": "AI assistant"
     },
     "closeButton": "Hide {{content}}"
   },
   "chat": {
     "disclaimer": "The messages are visible to participants only at the time they are sent. All messages are deleted at the end of the call."
   },
+  "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"
+    },
+    "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"
+    }
+  },
   "rating": {
     "submit": "Submit",
     "question": "What do you think about the quality of your call?",
@@ -149,5 +163,8 @@
     "raisedHands": "Raised hands",
     "lowerParticipantHand": "Lower {{name}}'s hand",
     "lowerParticipantsHand": "Lower all hands"
+  },
+  "recording": {
+    "label": "Recording"
   }
 }

src/frontend/src/locales/en/settings.json

@@ -19,6 +19,19 @@
     },
     "permissionsRequired": "Permissions required"
   },
+  "notifications": {
+    "heading": "Sound notifications",
+    "label": "sound notifications for",
+    "actions": {
+      "disable": "Disable",
+      "enable": "Enable"
+    },
+    "items": {
+      "participantJoined": "Participant joined",
+      "handRaised": "Hand raised",
+      "messageReceived": "Message received"
+    }
+  },
   "dialog": {
     "heading": "Settings"
   },
@@ -30,6 +43,7 @@
   "tabs": {
     "account": "Profile",
     "audio": "Audio",
-    "general": "General"
+    "general": "General",
+    "notifications": "Notifications"
   }
 }

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

@@ -70,6 +70,10 @@
       "open": "Masquer les participants",
       "closed": "Afficher les participants"
     },
+    "transcript": {
+      "open": "Masquer l'assistant IA",
+      "closed": "Afficher l'assistant IA"
+    },
     "support": "Support"
   },
   "options": {
@@ -78,11 +82,7 @@
       "feedbacks": "Partager votre avis",
       "settings": "Paramètres",
       "username": "Choisir votre nom",
-      "effects": "Appliquer des effets",
-      "transcript": {
-        "start": "Démarrer la transcription",
-        "stop": "Arrêter la transcription en cours"
-      }
+      "effects": "Appliquer des effets"
     }
   },
   "effects": {
@@ -101,18 +101,32 @@
     "heading": {
       "participants": "Participants",
       "effects": "Effets",
-      "chat": "Messages dans l'appel"
+      "chat": "Messages dans l'appel",
+      "transcript": "Assistant IA"
     },
     "content": {
       "participants": "les participants",
       "effects": "les effets",
-      "chat": "les messages"
+      "chat": "les messages",
+      "transcript": "l'assistant IA"
     },
     "closeButton": "Masquer {{content}}"
   },
   "chat": {
     "disclaimer": "Les messages sont visibles par les participants uniquement au moment de\nleur envoi. Tous les messages sont supprimés à la fin de l'appel."
   },
+  "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"
+    },
+    "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"
+    }
+  },
   "rating": {
     "submit": "Envoyer",
     "question": "Que pensez-vous de la qualité de votre appel ?",
@@ -149,5 +163,8 @@
     "raisedHands": "Mains levées",
     "lowerParticipantHand": "Baisser la main de {{name}}",
     "lowerParticipantsHand": "Baisser la main de tous les participants"
+  },
+  "recording": {
+    "label": "Enregistrement"
   }
 }

src/frontend/src/locales/fr/settings.json

@@ -19,6 +19,19 @@
     },
     "permissionsRequired": "Autorisations nécessaires"
   },
+  "notifications": {
+    "heading": "Notifications sonores",
+    "label": "la notification sonore pour",
+    "actions": {
+      "disable": "Désactiver",
+      "enable": "Activer"
+    },
+    "items": {
+      "participantJoined": "Un nouveau participant",
+      "handRaised": "Une main levée",
+      "messageReceived": "Un message reçu"
+    }
+  },
   "dialog": {
     "heading": "Paramètres"
   },
@@ -30,6 +43,7 @@
   "tabs": {
     "account": "Profile",
     "audio": "Audio",
-    "general": "Général"
+    "general": "Général",
+    "notifications": "Notifications"
   }
 }

src/frontend/src/primitives/Button.tsx

@@ -5,10 +5,14 @@ import {
 import { type RecipeVariantProps } from '@/styled-system/css'
 import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
 import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
+import { ReactNode } from 'react'
 
 export type ButtonProps = RecipeVariantProps<ButtonRecipe> &
   RACButtonsProps &
-  TooltipWrapperProps
+  TooltipWrapperProps & {
+    // Use tooltip as description below the button.
+    description?: boolean
+  }
 
 export const Button = ({
   tooltip,
@@ -22,7 +26,10 @@ export const Button = ({
       <RACButton
         className={buttonRecipe(variantProps)}
         {...(componentProps as RACButtonsProps)}
-      />
+      >
+        {componentProps.children as ReactNode}
+        {props.description && <span>{tooltip}</span>}
+      </RACButton>
     </TooltipWrapper>
   )
 }

src/frontend/src/primitives/LinkButton.tsx

@@ -2,10 +2,14 @@ import { Link, LinkProps } from 'react-aria-components'
 import { type RecipeVariantProps } from '@/styled-system/css'
 import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
 import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
+import { ReactNode } from 'react'
 
 type LinkButtonProps = RecipeVariantProps<ButtonRecipe> &
   LinkProps &
-  TooltipWrapperProps
+  TooltipWrapperProps & {
+    // Use tooltip as description below the button.
+    description?: boolean
+  }
 
 export const LinkButton = ({
   tooltip,
@@ -16,7 +20,12 @@ export const LinkButton = ({
 
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
-      <Link className={buttonRecipe(variantProps)} {...componentProps} />
+      <Link className={buttonRecipe(variantProps)} {...componentProps}>
+        <>
+          {componentProps.children as ReactNode}
+          {props.description && <span>{tooltip}</span>}
+        </>
+      </Link>
     </TooltipWrapper>
   )
 }

src/frontend/src/primitives/Switch.tsx

@@ -0,0 +1,69 @@
+import {
+  Switch as RACSwitch,
+  SwitchProps as RACSwitchProps,
+} from 'react-aria-components'
+import { styled } from '@/styled-system/jsx'
+import { StyledVariantProps } from '@/styled-system/types'
+import { ReactNode } from 'react'
+
+export const StyledSwitch = styled(RACSwitch, {
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.571rem',
+    color: 'black',
+    forcedColorAdjust: 'none',
+    '& .indicator': {
+      width: '2.6rem',
+      height: '1.563rem',
+      border: '0.125rem solid',
+      borderColor: 'primary.800',
+      borderRadius: '1.143rem',
+      transition: 'all 200ms, outline 200ms',
+      _before: {
+        content: '""',
+        display: 'block',
+        margin: '0.125rem',
+        width: '1.063rem',
+        height: '1.063rem',
+        borderRadius: '1.063rem',
+        background: 'primary.800',
+        transition: 'all 200ms',
+      },
+    },
+    '&[data-selected] .indicator': {
+      borderColor: 'primary.800',
+      background: 'primary.800',
+      _before: {
+        background: 'white',
+        transform: 'translateX(100%)',
+      },
+    },
+    '&[data-disabled] .indicator': {
+      borderColor: 'primary.200',
+      background: 'transparent',
+      _before: {
+        background: 'primary.200',
+      },
+    },
+    '&[data-focus-visible] .indicator': {
+      outline: '2px solid!',
+      outlineColor: 'focusRing!',
+      outlineOffset: '2px!',
+    },
+  },
+  variants: {},
+})
+
+export type SwitchProps = StyledVariantProps<typeof StyledSwitch> &
+  RACSwitchProps & { children: ReactNode }
+
+/**
+ * Styled RAC Switch.
+ */
+export const Switch = ({ children, ...props }: SwitchProps) => (
+  <StyledSwitch {...props}>
+    <div className="indicator" />
+    {children}
+  </StyledSwitch>
+)

src/frontend/src/primitives/Text.tsx

@@ -55,6 +55,14 @@ export const text = cva({
         textAlign: 'inherit',
       },
     },
+    wrap: {
+      balance: {
+        textWrap: 'balance',
+      },
+      pretty: {
+        textWrap: 'pretty',
+      },
+    },
     bold: {
       true: {
         fontWeight: 'bold',

src/frontend/src/primitives/ToggleButton.tsx

@@ -1,9 +1,17 @@
 import {
   ToggleButton as RACToggleButton,
-  ToggleButtonProps,
+  ToggleButtonProps as RACToggleButtonProps,
 } from 'react-aria-components'
 import { type ButtonRecipeProps, buttonRecipe } from './buttonRecipe'
 import { TooltipWrapper, TooltipWrapperProps } from './TooltipWrapper'
+import { ReactNode } from 'react'
+
+export type ToggleButtonProps = RACToggleButtonProps &
+  ButtonRecipeProps &
+  TooltipWrapperProps & {
+    // Use tooltip as description below the button.
+    description?: boolean
+  }
 
 /**
  * React aria ToggleButton with our button styles, that can take a tooltip if needed
@@ -12,14 +20,20 @@ export const ToggleButton = ({
   tooltip,
   tooltipType,
   ...props
-}: ToggleButtonProps & ButtonRecipeProps & TooltipWrapperProps) => {
+}: ToggleButtonProps) => {
   const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
+
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
       <RACToggleButton
         {...componentProps}
         className={buttonRecipe(variantProps)}
-      />
+      >
+        <>
+          {componentProps.children as ReactNode}
+          {props.description && <span>{tooltip}</span>}
+        </>
+      </RACToggleButton>
     </TooltipWrapper>
   )
 }

src/frontend/src/primitives/buttonRecipe.ts

@@ -1,9 +1,5 @@
 import { type RecipeVariantProps, cva } from '@/styled-system/css'
 
-export type ButtonRecipe = typeof buttonRecipe
-
-export type ButtonRecipeProps = RecipeVariantProps<ButtonRecipe>
-
 export const buttonRecipe = cva({
   base: {
     display: 'flex',
@@ -222,6 +218,16 @@ export const buttonRecipe = cva({
     shySelected: {
       true: {},
     },
+    description: {
+      true: {
+        flexDirection: 'column',
+        gap: '0.5rem',
+        '& span': {
+          fontSize: '13px',
+          textAlign: 'center',
+        },
+      },
+    },
     // if the button is next to other ones to make a "button group", tell where the button is to handle radius
     groupPosition: {
       left: {
@@ -255,3 +261,7 @@ export const buttonRecipe = cva({
     variant: 'primary',
   },
 })
+
+export type ButtonRecipe = typeof buttonRecipe
+
+export type ButtonRecipeProps = RecipeVariantProps<ButtonRecipe>

src/frontend/src/primitives/index.ts

@@ -29,3 +29,4 @@ export { ToggleButton } from './ToggleButton'
 export { Ul } from './Ul'
 export { VerticallyOffCenter } from './VerticallyOffCenter'
 export { TextArea } from './TextArea'
+export { Switch } from './Switch'

src/frontend/src/stores/notifications.ts

@@ -0,0 +1,44 @@
+import { proxy, subscribe } from 'valtio'
+import { proxyMap } from 'valtio/utils'
+import { deserializeToProxyMap, serializeProxyMap } from '@/utils/valtio'
+import { STORAGE_KEYS } from '@/utils/storageKeys'
+import { NotificationType } from '@/features/notifications/NotificationType'
+
+type State = {
+  soundNotifications: Map<NotificationType, boolean>
+  soundNotificationVolume: number
+}
+
+const DEFAULT_STATE: State = {
+  soundNotifications: proxyMap(
+    new Map([
+      [NotificationType.ParticipantJoined, true],
+      [NotificationType.HandRaised, true],
+    ])
+  ),
+  soundNotificationVolume: 0.1,
+}
+
+function getNotificationsState(): State {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEYS.NOTIFICATIONS)
+    if (!stored) return DEFAULT_STATE
+    const parsed = JSON.parse(stored, deserializeToProxyMap)
+    return parsed || DEFAULT_STATE
+  } catch (error: unknown) {
+    console.error(
+      '[NotificationsStore] Failed to parse stored settings:',
+      error
+    )
+    return DEFAULT_STATE
+  }
+}
+
+export const notificationsStore = proxy<State>(getNotificationsState())
+
+subscribe(notificationsStore, () => {
+  localStorage.setItem(
+    STORAGE_KEYS.NOTIFICATIONS,
+    JSON.stringify(notificationsStore, serializeProxyMap)
+  )
+})

src/frontend/src/styles/index.css

@@ -29,3 +29,12 @@ body,
 body:has(.lk-video-conference) #crisp-chatbox > div > a {
   display: none !important;
 }
+
+@keyframes slide-full {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}

src/frontend/src/utils/storageKeys.tsx

@@ -0,0 +1,6 @@
+/**
+ * Object containing all localStorage keys used across the app
+ */
+export const STORAGE_KEYS = {
+  NOTIFICATIONS: 'app_notification_settings',
+} as const

src/frontend/src/utils/useIsMobile.ts

@@ -0,0 +1,20 @@
+import { isMobileBrowser } from '@livekit/components-core'
+import { useEffect, useState } from 'react'
+
+export const useIsMobile = () => {
+  const [isMobile, setIsMobile] = useState(isMobileBrowser())
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(isMobileBrowser())
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return isMobile
+}

src/frontend/src/utils/valtio.ts

@@ -0,0 +1,28 @@
+import { proxyMap } from 'valtio/utils'
+
+/**
+ * Serializes Map objects into a JSON-friendly format while preserving valtio proxyMap compatibility
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function serializeProxyMap(_: string, value: any) {
+  if (value instanceof Map) {
+    return {
+      dataType: 'Map',
+      value: Array.from(value.entries()),
+    }
+  }
+  return value
+}
+
+/**
+ * Custom JSON reviver function for deserializing Map objects and wrapping them in valtio proxyMap
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function deserializeToProxyMap(_: string, value: any) {
+  if (typeof value === 'object' && value !== null) {
+    if (value.dataType === 'Map') {
+      return proxyMap(new Map(value.value))
+    }
+  }
+  return value
+}

src/helm/env.d/dev/values.meet.yaml.gotmpl

@@ -125,6 +125,9 @@ summary:
     AWS_S3_ACCESS_KEY_ID: meet
     AWS_S3_SECRET_ACCESS_KEY: password
     OPENAI_API_KEY: password
+    OPENAI_BASE_URL: https://albertine.beta.numerique.gouv.fr/v1
+    OPENAI_ASR_MODEL: openai/whisper-large-v3
+    OPENAI_LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
     AWS_S3_SECURE_ACCESS: False
     WEBHOOK_API_TOKEN: password
     WEBHOOK_URL: https://www.mock-impress.com/webhook/
@@ -155,6 +158,9 @@ celery:
     AWS_S3_ACCESS_KEY_ID: meet
     AWS_S3_SECRET_ACCESS_KEY: password
     OPENAI_API_KEY: password
+    OPENAI_BASE_URL: https://albertine.beta.numerique.gouv.fr/v1
+    OPENAI_ASR_MODEL: openai/whisper-large-v3
+    OPENAI_LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
     AWS_S3_SECURE_ACCESS: False
     WEBHOOK_API_TOKEN: password
     WEBHOOK_URL: https://www.mock-impress.com/webhook/

src/helm/env.d/staging/values.meet.yaml.gotmpl

@@ -216,6 +216,9 @@ summary:
       secretKeyRef:
         name: summary
         key: OPENAI_API_KEY
+    OPENAI_BASE_URL: https://albertine.beta.numerique.gouv.fr/v1
+    OPENAI_ASR_MODEL: openai/whisper-large-v3
+    OPENAI_LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
     WEBHOOK_API_TOKEN:
       secretKeyRef:
         name: summary
@@ -264,6 +267,9 @@ celery:
       secretKeyRef:
         name: summary
         key: OPENAI_API_KEY
+    OPENAI_BASE_URL: https://albertine.beta.numerique.gouv.fr/v1
+    OPENAI_ASR_MODEL: openai/whisper-large-v3
+    OPENAI_LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
     WEBHOOK_API_TOKEN:
       secretKeyRef:
         name: summary

src/summary/pyproject.toml

@@ -8,16 +8,16 @@ dependencies = [
     "pydantic>=2.5.0",
     "pydantic-settings>=2.1.0",
     "celery==5.4.0",
-    "redis==4.5.4",
-    "minio==7.2.9",
-    "openai==1.55.3",
+    "redis==5.2.1",
+    "minio==7.2.12",
+    "openai==1.57.1",
     "requests==2.32.3",
     "sentry-sdk[fastapi, celery]==2.19.0",
 ]
 
 [project.optional-dependencies]
 dev = [
-    "ruff==0.7.4",
+    "ruff==0.8.2",
 ]
 
 [build-system]

src/summary/summary/core/celery_worker.py

@@ -1,6 +1,7 @@
 """Celery workers."""
 
 import json
+import os
 import tempfile
 from pathlib import Path
 
@@ -28,6 +29,7 @@ celery = Celery(
 )
 
 if settings.sentry_dsn and settings.sentry_is_enabled:
+
     @signals.celeryd_init.connect
     def init_sentry(**_kwargs):
         """Initialize sentry."""
@@ -100,15 +102,20 @@ def process_audio_transcribe_summarize(filename: str, email: str, sub: str):
         api_key=settings.openai_api_key, base_url=settings.openai_base_url
     )
 
-    logger.debug("Querying transcription …")
-    with open(temp_file_path, "rb") as audio_file:
-        transcription = openai_client.audio.transcriptions.create(
-            model=settings.openai_asr_model, file=audio_file
-        )
+    try:
+        logger.debug("Querying transcription …")
+        with open(temp_file_path, "rb") as audio_file:
+            transcription = openai_client.audio.transcriptions.create(
+                model=settings.openai_asr_model, file=audio_file
+            )
 
-        transcription = transcription.text
+            transcription = transcription.text
 
-        logger.debug("Transcription: \n %s", transcription)
+            logger.debug("Transcription: \n %s", transcription)
+    finally:
+        if os.path.exists(temp_file_path):
+            os.remove(temp_file_path)
+            logger.debug("Temporary file removed: %s", temp_file_path)
 
     instructions = get_instructions(transcription)
     summary_response = openai_client.chat.completions.create(