♻️(frontend) refactor the transcription side panel into a sub menu

Add a new level of nesting while handling side panel.
Code quality is quite poor, we need a better interface.

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

@@ -3,7 +3,7 @@ import { css } from '@/styled-system/css'
 import { Heading } from 'react-aria-components'
 import { text } from '@/primitives/Text'
 import { Button, Div } from '@/primitives'
-import { RiCloseLine } from '@remixicon/react'
+import { RiArrowLeftLine, RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { ParticipantsList } from './controls/Participants/ParticipantsList'
 import { useSidePanel } from '../hooks/useSidePanel'
@@ -19,6 +19,8 @@ type StyledSidePanelProps = {
   onClose: () => void
   isClosed: boolean
   closeButtonTooltip: string
+  isSubmenu: boolean
+  onBack: () => void
 }
 
 const StyledSidePanel = ({
@@ -27,6 +29,8 @@ const StyledSidePanel = ({
   onClose,
   isClosed,
   closeButtonTooltip,
+  isSubmenu = false,
+  onBack,
 }: StyledSidePanelProps) => (
   <div
     className={css({
@@ -61,9 +65,22 @@ const StyledSidePanel = ({
       style={{
         paddingLeft: '1.5rem',
         paddingTop: '1rem',
-        display: isClosed ? 'none' : undefined,
+        display: isClosed ? 'none' : 'flex',
+        justifyContent: 'start',
+        alignItems: 'center',
       }}
     >
+      {isSubmenu && (
+        <Button
+          variant="secondaryText"
+          size={'sm'}
+          square
+          className={css({ marginRight: '0.5rem' })}
+          onPress={onBack}
+        >
+          <RiArrowLeftLine size={20} />
+        </Button>
+      )}
       {title}
     </Heading>
     <Div
@@ -116,17 +133,24 @@ export const SidePanel = () => {
     isSidePanelOpen,
     isToolsOpen,
     isAdminOpen,
+    isSubPanelOpen,
+    activeSubPanelId,
   } = useSidePanel()
   const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
 
   return (
     <StyledSidePanel
-      title={t(`heading.${activePanelId}`)}
-      onClose={() => (layoutStore.activePanelId = null)}
+      title={t(`heading.${activeSubPanelId || activePanelId}`)}
+      onClose={() => {
+        layoutStore.activePanelId = null
+        layoutStore.activeSubPanelId = null
+      }}
       closeButtonTooltip={t('closeButton', {
-        content: t(`content.${activePanelId}`),
+        content: t(`content.${activeSubPanelId || activePanelId}`),
       })}
       isClosed={!isSidePanelOpen}
+      isSubmenu={isSubPanelOpen}
+      onBack={() => (layoutStore.activeSubPanelId = null)}
     >
       <Panel isOpen={isParticipantsOpen}>
         <ParticipantsList />

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

@@ -4,6 +4,10 @@ import { Button as RACButton } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { CRISP_HELP_ARTICLE_MORE_TOOLS } from '@/utils/constants'
 import { ReactNode } from 'react'
+import { Transcript } from './Transcript'
+import { RiFileTextFill } from '@remixicon/react'
+import { useIsTranscriptEnabled } from '../hooks/useIsTranscriptEnabled'
+import { useSidePanel } from '../hooks/useSidePanel'
 
 export interface ToolsButtonProps {
   icon: ReactNode
@@ -64,7 +68,14 @@ const ToolButton = ({
 }
 
 export const Tools = () => {
+  const { openTranscript, isTranscriptOpen } = useSidePanel()
   const { t } = useTranslation('rooms', { keyPrefix: 'moreTools' })
+  const isTranscriptEnabled = useIsTranscriptEnabled()
+
+  if (isTranscriptOpen && isTranscriptEnabled) {
+    return <Transcript />
+  }
+
   return (
     <Div
       display="flex"
@@ -89,7 +100,14 @@ export const Tools = () => {
         </A>
         .
       </Text>
-      WIP
+      {isTranscriptEnabled && (
+        <ToolButton
+          icon={<RiFileTextFill size={24} color="white" />}
+          title={t('tools.transcript.title')}
+          description={t('tools.transcript.body')}
+          onPress={() => openTranscript()}
+        />
+      )}
     </Div>
   )
 }

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

@@ -9,49 +9,70 @@ export enum PanelId {
   ADMIN = 'admin',
 }
 
+export enum SubPanelId {
+  TRANSCRIPT = 'transcript',
+}
+
 export const useSidePanel = () => {
   const layoutSnap = useSnapshot(layoutStore)
   const activePanelId = layoutSnap.activePanelId
+  const activeSubPanelId = layoutSnap.activeSubPanelId
 
   const isParticipantsOpen = activePanelId == PanelId.PARTICIPANTS
   const isEffectsOpen = activePanelId == PanelId.EFFECTS
   const isChatOpen = activePanelId == PanelId.CHAT
   const isToolsOpen = activePanelId == PanelId.TOOLS
   const isAdminOpen = activePanelId == PanelId.ADMIN
+  const isTranscriptOpen = activeSubPanelId == SubPanelId.TRANSCRIPT
   const isSidePanelOpen = !!activePanelId
+  const isSubPanelOpen = !!activeSubPanelId
 
   const toggleAdmin = () => {
     layoutStore.activePanelId = isAdminOpen ? null : PanelId.ADMIN
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
   }
 
   const toggleParticipants = () => {
     layoutStore.activePanelId = isParticipantsOpen ? null : PanelId.PARTICIPANTS
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
   }
 
   const toggleChat = () => {
     layoutStore.activePanelId = isChatOpen ? null : PanelId.CHAT
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
   }
 
   const toggleEffects = () => {
     layoutStore.activePanelId = isEffectsOpen ? null : PanelId.EFFECTS
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
   }
 
   const toggleTools = () => {
     layoutStore.activePanelId = isToolsOpen ? null : PanelId.TOOLS
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
+  }
+
+  const openTranscript = () => {
+    layoutStore.activeSubPanelId = SubPanelId.TRANSCRIPT
+    layoutStore.activePanelId = PanelId.TOOLS
   }
 
   return {
     activePanelId,
+    activeSubPanelId,
     toggleParticipants,
     toggleChat,
     toggleEffects,
     toggleTools,
     toggleAdmin,
+    openTranscript,
+    isSubPanelOpen,
     isChatOpen,
     isParticipantsOpen,
     isEffectsOpen,
     isSidePanelOpen,
     isToolsOpen,
     isAdminOpen,
+    isTranscriptOpen,
   }
 }

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

@@ -188,7 +188,12 @@
   "moreTools": {
     "body": "",
     "moreLink": "",
-    "tools": {}
+    "tools": {
+      "transcript": {
+        "title": "",
+        "body": ""
+      }
+    }
   },
   "transcript": {
     "start": {

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

@@ -167,7 +167,7 @@
       "participants": "Participants",
       "effects": "Effects",
       "chat": "Messages in the chat",
-      "transcript": "AI Assistant",
+      "transcript": "Transcription",
       "admin": "Admin settings",
       "tools": "More tools"
     },
@@ -175,7 +175,7 @@
       "participants": "participants",
       "effects": "effects",
       "chat": "messages",
-      "transcript": "AI assistant",
+      "transcript": "Transcription",
       "admin": "admin settings",
       "tools": "more tools"
     },
@@ -187,7 +187,12 @@
   "moreTools": {
     "body": "Access more tools in Visio to enhance your meetings,",
     "moreLink": "learn more",
-    "tools": {}
+    "tools": {
+      "transcript": {
+        "title": "Transcription",
+        "body": "Transcribe your meeting for later"
+      }
+    }
   },
   "transcript": {
     "start": {

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

@@ -167,7 +167,7 @@
       "participants": "Participants",
       "effects": "Effets",
       "chat": "Messages dans l'appel",
-      "transcript": "Assistant IA",
+      "transcript": "Transcription",
       "admin": "Commandes de l'organisateur",
       "tools": "Plus d'outils"
     },
@@ -175,7 +175,7 @@
       "participants": "les participants",
       "effects": "les effets",
       "chat": "les messages",
-      "transcript": "l'assistant IA",
+      "transcript": "transcription",
       "admin": "commandes de l'organisateur",
       "tools": "plus d'outils"
     },
@@ -187,7 +187,12 @@
   "moreTools": {
     "body": "Accèder à d'avantage d'outils dans Visio pour améliorer vos réunions,",
     "moreLink": "en savoir plus",
-    "tools": {}
+    "tools": {
+      "transcript": {
+        "title": "Transcription",
+        "body": "Transcrivez votre réunion pour plus tard"
+      }
+    }
   },
   "transcript": {
     "start": {

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

@@ -167,7 +167,7 @@
       "participants": "Deelnemers",
       "effects": "Effecten",
       "chat": "Berichten in de chat",
-      "transcript": "AI-assistent",
+      "transcript": "Transcriptie",
       "admin": "Beheerdersbediening",
       "tools": "Meer tools"
     },
@@ -175,7 +175,7 @@
       "participants": "deelnemers",
       "effects": "effecten",
       "chat": "berichten",
-      "transcript": "AI-assistent",
+      "transcript": "transcriptie",
       "admin": "beheerdersbediening",
       "tools": "meer tools"
     },
@@ -187,7 +187,12 @@
   "moreTools": {
     "body": "Toegang tot meer tools in Visio om je vergaderingen te verbeteren,",
     "moreLink": "lees meer",
-    "tools": {}
+    "tools": {
+      "transcript": {
+        "title": "Transcriptie",
+        "body": "Transcribeer je vergadering voor later"
+      }
+    }
   },
   "transcript": {
     "start": {

src/frontend/src/stores/layout.ts

@@ -1,14 +1,19 @@
 import { proxy } from 'valtio'
-import { PanelId } from '@/features/rooms/livekit/hooks/useSidePanel'
+import {
+  PanelId,
+  SubPanelId,
+} from '@/features/rooms/livekit/hooks/useSidePanel'
 
 type State = {
   showHeader: boolean
   showFooter: boolean
   activePanelId: PanelId | null
+  activeSubPanelId: SubPanelId | null
 }
 
 export const layoutStore = proxy<State>({
   showHeader: false,
   showFooter: false,
   activePanelId: null,
+  activeSubPanelId: null,
 })