From 91562d049c8d0ac61a21fb8161f4f90c2b8f90a4 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Fri, 4 Apr 2025 17:01:02 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20introduce=20a=20?= =?UTF-8?q?reusable=20tools=20sidepanel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit tools will be added in the future, let's generalize the sidepanel previously reserved to transcription. --- .../rooms/livekit/components/SidePanel.tsx | 8 +- .../rooms/livekit/components/Tools.tsx | 95 +++++++++++++++++++ .../{TranscriptToggle.tsx => ToolsToggle.tsx} | 23 ++--- .../rooms/livekit/hooks/useSidePanel.ts | 12 +-- .../prefabs/ControlBar/MobileControlBar.tsx | 4 +- .../prefabs/ControlBar/MoreOptions.tsx | 4 +- src/frontend/src/locales/de/rooms.json | 13 ++- src/frontend/src/locales/en/rooms.json | 17 +++- src/frontend/src/locales/fr/rooms.json | 17 +++- src/frontend/src/locales/nl/rooms.json | 17 +++- src/frontend/src/utils/constants.ts | 3 + 11 files changed, 167 insertions(+), 46 deletions(-) create mode 100644 src/frontend/src/features/rooms/livekit/components/Tools.tsx rename src/frontend/src/features/rooms/livekit/components/controls/{TranscriptToggle.tsx => ToolsToggle.tsx} (60%) diff --git a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx index f67d27a7..324a032e 100644 --- a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx +++ b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx @@ -9,9 +9,9 @@ import { ParticipantsList } from './controls/Participants/ParticipantsList' import { useSidePanel } from '../hooks/useSidePanel' import { ReactNode } from 'react' import { Chat } from '../prefabs/Chat' -import { Transcript } from './Transcript' import { Effects } from './effects/Effects' import { Admin } from './Admin' +import { Tools } from './Tools' type StyledSidePanelProps = { title: string @@ -114,7 +114,7 @@ export const SidePanel = () => { isEffectsOpen, isChatOpen, isSidePanelOpen, - isTranscriptOpen, + isToolsOpen, isAdminOpen, } = useSidePanel() const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' }) @@ -137,8 +137,8 @@ export const SidePanel = () => { - - + + diff --git a/src/frontend/src/features/rooms/livekit/components/Tools.tsx b/src/frontend/src/features/rooms/livekit/components/Tools.tsx new file mode 100644 index 00000000..cc55273b --- /dev/null +++ b/src/frontend/src/features/rooms/livekit/components/Tools.tsx @@ -0,0 +1,95 @@ +import { A, Div, Text } from '@/primitives' +import { css } from '@/styled-system/css' +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' + +export interface ToolsButtonProps { + icon: ReactNode + title: string + description: string + onPress: () => void +} + +const ToolButton = ({ + icon, + title, + description, + onPress, +}: ToolsButtonProps) => { + return ( + +
+ {icon} +
+
+ + {title} + + + {description} + +
+ + ) +} + +export const Tools = () => { + const { t } = useTranslation('rooms', { keyPrefix: 'moreTools' }) + return ( +
+ + {t('body')}{' '} + + {t('moreLink')} + + . + + WIP +
+ ) +} diff --git a/src/frontend/src/features/rooms/livekit/components/controls/TranscriptToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/ToolsToggle.tsx similarity index 60% rename from src/frontend/src/features/rooms/livekit/components/controls/TranscriptToggle.tsx rename to src/frontend/src/features/rooms/livekit/components/controls/ToolsToggle.tsx index 12c34c0a..782377c1 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/TranscriptToggle.tsx +++ b/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 (
{ - toggleTranscript() + toggleTools() onPress?.(e) }} {...props} - data-attr="toggle-transcript" + data-attr="toggle-tools" > - +
) diff --git a/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts b/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts index c2cf7d34..dd4cca3a 100644 --- a/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts +++ b/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, } } diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx index f137c1c8..e16bb48a 100644 --- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx +++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx @@ -21,7 +21,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' import { CameraSwitchButton } from '../../components/controls/CameraSwitchButton' export function MobileControlBar({ @@ -133,7 +133,7 @@ export function MobileControlBar({ description={true} onPress={() => setIsMenuOpened(false)} /> - setIsMenuOpened(false)} /> diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx index f641c230..8715b95b 100644 --- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx +++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx @@ -1,7 +1,7 @@ import { css } from '@/styled-system/css' import { ChatToggle } from '../../components/controls/ChatToggle' import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle' -import { TranscriptToggle } from '../../components/controls/TranscriptToggle' +import { ToolsToggle } from '../../components/controls/ToolsToggle' import { AdminToggle } from '../../components/AdminToggle' import { useSize } from '../../hooks/useResizeObserver' import { useState, RefObject } from 'react' @@ -20,7 +20,7 @@ const NavigationControls = ({ <> - + ) diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index 6144b281..824a8d2b 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -104,7 +104,7 @@ "open": "", "closed": "" }, - "transcript": { + "tools": { "open": "", "closed": "" }, @@ -169,20 +169,27 @@ "effects": "", "chat": "", "transcript": "", - "admin": "" + "admin": "", + "tools": "" }, "content": { "participants": "", "effects": "", "chat": "", "transcript": "", - "admin": "" + "admin": "", + "tools": "" }, "closeButton": "" }, "chat": { "disclaimer": "" }, + "moreTools": { + "body": "", + "moreLink": "", + "tools": {} + }, "transcript": { "start": { "heading": "", diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index 54121eac..14de0bd4 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/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", @@ -168,20 +168,27 @@ "effects": "Effects", "chat": "Messages in the chat", "transcript": "AI Assistant", - "admin": "Admin settings" + "admin": "Admin settings", + "tools": "More tools" }, "content": { "participants": "participants", "effects": "effects", "chat": "messages", "transcript": "AI assistant", - "admin": "Admin settings" + "admin": "admin settings", + "tools": "more tools" }, "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." }, + "moreTools": { + "body": "Access more tools in Visio to enhance your meetings,", + "moreLink": "learn more", + "tools": {} + }, "transcript": { "start": { "heading": "Start the Assistant!", diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index a8ccb8e1..48718596 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/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", @@ -168,20 +168,27 @@ "effects": "Effets", "chat": "Messages dans l'appel", "transcript": "Assistant IA", - "admin": "Commandes de l'organisateur" + "admin": "Commandes de l'organisateur", + "tools": "Plus d'outils" }, "content": { "participants": "les participants", "effects": "les effets", "chat": "les messages", "transcript": "l'assistant IA", - "admin": "Commandes de l'organisateur" + "admin": "commandes de l'organisateur", + "tools": "plus d'outils" }, "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." }, + "moreTools": { + "body": "Accèder à d'avantage d'outils dans Visio pour améliorer vos réunions,", + "moreLink": "en savoir plus", + "tools": {} + }, "transcript": { "start": { "heading": "Démarrer l'assistant !", diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json index c57a6308..8b300512 100644 --- a/src/frontend/src/locales/nl/rooms.json +++ b/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", @@ -168,20 +168,27 @@ "effects": "Effecten", "chat": "Berichten in de chat", "transcript": "AI-assistent", - "admin": "Beheerdersbediening" + "admin": "Beheerdersbediening", + "tools": "Meer tools" }, "content": { "participants": "deelnemers", "effects": "effecten", "chat": "berichten", "transcript": "AI-assistent", - "admin": "Beheerdersbediening" + "admin": "beheerdersbediening", + "tools": "meer tools" }, "closeButton": "Verberg {{content}}" }, "chat": { "disclaimer": "De berichten zijn alleen voor de deelnemers zichtbaar op het moment dat ze worden verzonden. Alle berichten worden verwijderd aan het einde van het gesprek." }, + "moreTools": { + "body": "Toegang tot meer tools in Visio om je vergaderingen te verbeteren,", + "moreLink": "lees meer", + "tools": {} + }, "transcript": { "start": { "heading": "Start de assistent!", diff --git a/src/frontend/src/utils/constants.ts b/src/frontend/src/utils/constants.ts index 38b5ffb4..55b469d3 100644 --- a/src/frontend/src/utils/constants.ts +++ b/src/frontend/src/utils/constants.ts @@ -3,3 +3,6 @@ export const GRIST_FEEDBACKS_FORM = export const BETA_USERS_FORM_URL = 'https://grist.numerique.gouv.fr/o/docs/forms/3fFfvJoTBEQ6ZiMi8zsQwX/17' as const + +export const CRISP_HELP_ARTICLE_MORE_TOOLS = + 'https://lasuite.crisp.help/fr/article/visio-tools-bvxj23' as const