✨(frontend) initialize transcript sidebar panel

Setup base structure and styling for transcript menu sidebar

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,14 @@
+import { Div } from '@/primitives'
+
+export const Transcript = () => {
+  return (
+    <Div
+      overflowY="scroll"
+      padding={'0 1.5rem'}
+      flexGrow={1}
+      flexDirection={'column'}
+    >
+      wip
+    </Div>
+  )
+}

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

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

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

@@ -13,8 +13,10 @@ 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 { SupportToggle } from '../components/controls/SupportToggle'
+import { TranscriptToggle } from '../components/controls/TranscriptToggle'
+
 import { css } from '@/styled-system/css'
-import { SupportToggle } from '@/features/rooms/livekit/components/controls/SupportToggle.tsx'
 
 /** @public */
 export type ControlBarControls = {
@@ -156,6 +158,7 @@ export function ControlBar({
       >
         <ChatToggle />
         <ParticipantsToggle />
+        <TranscriptToggle />
         <SupportToggle />
       </div>
     </div>

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

@@ -71,6 +71,10 @@
       "open": "",
       "closed": ""
     },
+    "transcript": {
+      "open": "",
+      "closed": ""
+    },
     "support": ""
   },
   "options": {
@@ -102,12 +106,14 @@
     "heading": {
       "participants": "",
       "effects": "",
-      "chat": ""
+      "chat": "",
+      "transcript": ""
     },
     "content": {
       "participants": "",
       "effects": "",
-      "chat": ""
+      "chat": "",
+      "transcript": ""
     },
     "closeButton": ""
   },

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": {
@@ -101,12 +105,14 @@
     "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}}"
   },

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": {
@@ -101,12 +105,14 @@
     "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}}"
   },