🚧(frontend) add a temporary items to interact with transcription

This is totally temporary, only to test transcription recording.
In the upcoming commits, a proper side panel with all activities
will be created.

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

@@ -10,6 +10,7 @@ import { DialogState } from './OptionsButton'
 import { Separator } from '@/primitives/Separator'
 import { useSidePanel } from '../../../hooks/useSidePanel'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
+import { TranscriptMenuItem } from './TranscriptMenuItem'
 
 // @todo try refactoring it to use MenuList component
 export const OptionsMenuItems = ({
@@ -34,6 +35,7 @@ export const OptionsMenuItems = ({
           <RiAccountBoxLine size={20} />
           {t('effects')}
         </MenuItem>
+        <TranscriptMenuItem />
       </Section>
       <Separator />
       <Section>

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

@@ -0,0 +1,60 @@
+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'
+
+export const TranscriptMenuItem = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+
+  const data = useRoomData()
+
+  const { mutateAsync: startRecordingRoom } = useStartRecording()
+  const { mutateAsync: stopRecordingRoom } = useStopRecording()
+
+  const room = useRoomContext()
+
+  const handleTranscript = async () => {
+    const roomId = data?.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)
+    }
+  }
+
+  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/locales/de/rooms.json

@@ -79,7 +79,11 @@
       "support": "",
       "settings": "",
       "username": "",
-      "effects": ""
+      "effects": "",
+      "transcript": {
+        "start": "",
+        "stop": ""
+      }
     }
   },
   "effects": {

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

@@ -78,7 +78,11 @@
       "support": "Get Help on Tchap",
       "settings": "Settings",
       "username": "Update Your Name",
-      "effects": "Apply effects"
+      "effects": "Apply effects",
+      "transcript": {
+        "start": "Start meeting transcription",
+        "stop": "Stop ongoing transcription"
+      }
     }
   },
   "effects": {

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

@@ -78,7 +78,11 @@
       "support": "Obtenir de l'aide sur Tchap",
       "settings": "Paramètres",
       "username": "Choisir votre nom",
-      "effects": "Appliquer des effets"
+      "effects": "Appliquer des effets",
+      "transcript": {
+        "start": "Démarrer la transcription",
+        "stop": "Arrêter la transcription en cours"
+      }
     }
   },
   "effects": {