wip draft

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

@@ -12,6 +12,7 @@ import { Chat } from '../prefabs/Chat'
 import { Transcript } from './Transcript'
 import { Effects } from './effects/Effects'
 import { Admin } from './Admin'
+import { Tools } from '@/features/rooms/livekit/components/Tools.tsx'
 
 type StyledSidePanelProps = {
   title: string
@@ -114,7 +115,7 @@ export const SidePanel = () => {
     isEffectsOpen,
     isChatOpen,
     isSidePanelOpen,
-    isTranscriptOpen,
+    isToolsOpen,
     isAdminOpen,
   } = useSidePanel()
   const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
@@ -137,8 +138,8 @@ export const SidePanel = () => {
       <Panel isOpen={isChatOpen}>
         <Chat />
       </Panel>
-      <Panel isOpen={isTranscriptOpen}>
-        <Transcript />
+      <Panel isOpen={isToolsOpen}>
+        <Tools />
       </Panel>
       <Panel isOpen={isAdminOpen}>
         <Admin />

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

@@ -0,0 +1,90 @@
+import { A, Div, H, P, Text } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { Button as RACButton } from 'react-aria-components'
+import { RiFileTextFill, RiLiveFill } from '@remixicon/react'
+
+const ActionButton = ({ icon, title, description, onPress }) => {
+  return (
+    <RACButton
+      className={css({
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'start',
+        paddingY: '0.5rem',
+        paddingX: '0.75rem 1.5rem',
+        borderRadius: '5px',
+        gap: '1.25rem',
+        width: 'full',
+        textAlign: 'start',
+        '&[data-hovered]': {
+          backgroundColor: 'primary.50',
+          cursor: 'pointer',
+        },
+      })}
+      onPress={onPress}
+    >
+      <div
+        className={css({
+          height: '50px',
+          minWidth: '50px',
+          borderRadius: '25px',
+          backgroundColor: 'primary.800',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        })}
+      >
+        {icon}
+      </div>
+      <div>
+        <Text margin={false} as="h3">
+          {title}
+        </Text>
+        <Text as={'p'} variant={'smNote'} wrap={'pretty'}>
+          {description}
+        </Text>
+      </div>
+    </RACButton>
+  )
+}
+
+export const Tools = () => {
+  return (
+    <Div
+      display="flex"
+      overflowY="scroll"
+      padding="0 0.75rem"
+      flexGrow={1}
+      flexDirection="column"
+      alignItems="start"
+    >
+      <Text
+        variant="note"
+        wrap="balance"
+        className={css({
+          textStyle: 'sm',
+          paddingX: '0.75rem',
+        })}
+        margin={'md'}
+      >
+        Nous essayons d'intégrer plus d'outils dans visio blablabzlab,{' '}
+        <A href="/">En savoir plus</A>.
+      </Text>
+      <ActionButton
+        icon={<RiFileTextFill size={24} color={'white'} />}
+        title={'Transcription'}
+        description={
+          'Transcrivez votre réunion et recevez son résultat à la fin.'
+        }
+      />
+      <ActionButton
+        icon={<RiLiveFill size={24} color={'white'} />}
+        title={'Enregistrement'}
+        description={'Enregistrer votre réunion pour la rejouer à la demande.'}
+      />
+      {/*<ActionButton />*/}
+      {/*<ActionButton />*/}
+    </Div>
+  )
+}

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

@@ -1,24 +1,19 @@
 import { ToggleButton } from '@/primitives'
-import { RiBardLine } from '@remixicon/react'
+import { RiShapesLine } 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 = ({
+export const ToolsToggle = ({
   variant = 'primaryTextDark',
   onPress,
   ...props
 }: ToggleButtonProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.transcript' })
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.tools' })
 
-  const { isTranscriptOpen, toggleTranscript } = useSidePanel()
-  const tooltipLabel = isTranscriptOpen ? 'open' : 'closed'
-
-  const hasTranscriptAccess = useHasTranscriptAccess()
-
-  if (!hasTranscriptAccess) return
+  const { isToolsOpen, toggleTools } = useSidePanel()
+  const tooltipLabel = isToolsOpen ? 'open' : 'closed'
 
   return (
     <div
@@ -32,15 +27,15 @@ export const TranscriptToggle = ({
         variant={variant}
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
-        isSelected={isTranscriptOpen}
+        isSelected={isToolsOpen}
         onPress={(e) => {
-          toggleTranscript()
+          toggleTools()
           onPress?.(e)
         }}
         {...props}
-        data-attr="toggle-transcript"
+        data-attr="toggle-tools"
       >
-        <RiBardLine />
+        <RiShapesLine />
       </ToggleButton>
     </div>
   )

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

@@ -5,7 +5,7 @@ export enum PanelId {
   PARTICIPANTS = 'participants',
   EFFECTS = 'effects',
   CHAT = 'chat',
-  TRANSCRIPT = 'transcript',
+  TOOLS = 'tools',
   ADMIN = 'admin',
 }
 
@@ -16,7 +16,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 isToolsOpen = activePanelId == PanelId.TOOLS
   const isAdminOpen = activePanelId == PanelId.ADMIN
   const isSidePanelOpen = !!activePanelId
 
@@ -36,8 +36,8 @@ export const useSidePanel = () => {
     layoutStore.activePanelId = isEffectsOpen ? null : PanelId.EFFECTS
   }
 
-  const toggleTranscript = () => {
-    layoutStore.activePanelId = isTranscriptOpen ? null : PanelId.TRANSCRIPT
+  const toggleTools = () => {
+    layoutStore.activePanelId = isToolsOpen ? null : PanelId.TOOLS
   }
 
   return {
@@ -45,13 +45,13 @@ export const useSidePanel = () => {
     toggleParticipants,
     toggleChat,
     toggleEffects,
-    toggleTranscript,
+    toggleTools,
     toggleAdmin,
     isChatOpen,
     isParticipantsOpen,
     isEffectsOpen,
     isSidePanelOpen,
-    isTranscriptOpen,
+    isToolsOpen,
     isAdminOpen,
   }
 }

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

@@ -22,7 +22,7 @@ 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'
+import { ToolsToggle } from '../../components/controls/ToolsToggle.tsx'
 import { CameraSwitchButton } from '../../components/controls/CameraSwitchButton'
 
 export function MobileControlBar({
@@ -134,7 +134,7 @@ export function MobileControlBar({
               description={true}
               onPress={() => setIsMenuOpened(false)}
             />
-            <TranscriptToggle
+            <ToolsToggle
               description={true}
               onPress={() => setIsMenuOpened(false)}
             />

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

@@ -2,7 +2,7 @@ import { css } from '@/styled-system/css'
 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'
+import { ToolsToggle } from '../../components/controls/ToolsToggle.tsx'
 import { AdminToggle } from '../../components/AdminToggle'
 import { useSize } from '../../hooks/useResizeObserver'
 import { useState, RefObject } from 'react'
@@ -18,7 +18,7 @@ const NavigationControls = ({ onPress }: Partial<ToggleButtonProps>) => (
   <>
     <ChatToggle onPress={onPress} />
     <ParticipantsToggle onPress={onPress} />
-    <TranscriptToggle onPress={onPress} />
+    <ToolsToggle onPress={onPress} />
     <SupportToggle onPress={onPress} />
     <AdminToggle onPress={onPress} />
   </>

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

@@ -104,7 +104,7 @@
       "open": "",
       "closed": ""
     },
-    "transcript": {
+    "tools": {
       "open": "",
       "closed": ""
     },
@@ -168,14 +168,14 @@
       "participants": "",
       "effects": "",
       "chat": "",
-      "transcript": "",
+      "tools": "",
       "admin": ""
     },
     "content": {
       "participants": "",
       "effects": "",
       "chat": "",
-      "transcript": "",
+      "tools": "",
       "admin": ""
     },
     "closeButton": ""

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

@@ -103,9 +103,9 @@
       "open": "Hide everyone",
       "closed": "See everyone"
     },
-    "transcript": {
-      "open": "Hide AI assistant",
-      "closed": "Show AI assistant"
+    "tools": {
+      "open": "Hide more tools",
+      "closed": "Show more tools"
     },
     "admin": {
       "open": "Hide admin",
@@ -167,14 +167,14 @@
       "participants": "Participants",
       "effects": "Effects",
       "chat": "Messages in the chat",
-      "transcript": "AI Assistant",
+      "tools": "More tools",
       "admin": "Admin settings"
     },
     "content": {
       "participants": "participants",
       "effects": "effects",
       "chat": "messages",
-      "transcript": "AI assistant",
+      "tools": "more tools",
       "admin": "Admin settings"
     },
     "closeButton": "Hide {{content}}"

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

@@ -103,9 +103,9 @@
       "open": "Masquer les participants",
       "closed": "Afficher les participants"
     },
-    "transcript": {
-      "open": "Masquer l'assistant IA",
-      "closed": "Afficher l'assistant IA"
+    "tools": {
+      "open": "Masquer plus d'outils",
+      "closed": "Afficher plus d'outils"
     },
     "admin": {
       "open": "Masquer l'admin",
@@ -167,14 +167,14 @@
       "participants": "Participants",
       "effects": "Effets",
       "chat": "Messages dans l'appel",
-      "transcript": "Assistant IA",
+      "tools": "Plus d'outils",
       "admin": "Commandes de l'organisateur"
     },
     "content": {
       "participants": "les participants",
       "effects": "les effets",
       "chat": "les messages",
-      "transcript": "l'assistant IA",
+      "tools": "plus d'outils",
       "admin": "Commandes de l'organisateur"
     },
     "closeButton": "Masquer {{content}}"

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

@@ -103,9 +103,9 @@
       "open": "Verberg iedereen",
       "closed": "Toon iedereen"
     },
-    "transcript": {
-      "open": "Verberg AI-assistent",
-      "closed": "Toon AI-assistant"
+    "tools": {
+      "open": "Meer tools verbergen",
+      "closed": "Meer tools weergeven"
     },
     "admin": {
       "open": "Verberg beheerder",
@@ -167,14 +167,14 @@
       "participants": "Deelnemers",
       "effects": "Effecten",
       "chat": "Berichten in de chat",
-      "transcript": "AI-assistent",
+      "tools": "Meer tools",
       "admin": "Beheerdersbediening"
     },
     "content": {
       "participants": "deelnemers",
       "effects": "effecten",
       "chat": "berichten",
-      "transcript": "AI-assistent",
+      "tools": "meer tools",
       "admin": "Beheerdersbediening"
     },
     "closeButton": "Verberg {{content}}"