diff --git a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx index 324a032e..c437123b 100644 --- a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx +++ b/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) => (
+ {isSubmenu && ( + + )} {title}
{ isSidePanelOpen, isToolsOpen, isAdminOpen, + isSubPanelOpen, + activeSubPanelId, } = useSidePanel() const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' }) return ( (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)} > diff --git a/src/frontend/src/features/rooms/livekit/components/Tools.tsx b/src/frontend/src/features/rooms/livekit/components/Tools.tsx index cc55273b..ec58f6d7 100644 --- a/src/frontend/src/features/rooms/livekit/components/Tools.tsx +++ b/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 + } + return (
{ . - WIP + {isTranscriptEnabled && ( + } + title={t('tools.transcript.title')} + description={t('tools.transcript.body')} + onPress={() => openTranscript()} + /> + )}
) } diff --git a/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts b/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts index dd4cca3a..de4e32a7 100644 --- a/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts +++ b/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, } } diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index db8190db..2fb23e80 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -188,7 +188,12 @@ "moreTools": { "body": "", "moreLink": "", - "tools": {} + "tools": { + "transcript": { + "title": "", + "body": "" + } + } }, "transcript": { "start": { diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index 08434627..b6dbbc88 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/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": { diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index 7a61959f..42d51af5 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/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": { diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json index a4fb56dc..ebccbfb5 100644 --- a/src/frontend/src/locales/nl/rooms.json +++ b/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": { diff --git a/src/frontend/src/stores/layout.ts b/src/frontend/src/stores/layout.ts index 8688a26b..f9e53b0c 100644 --- a/src/frontend/src/stores/layout.ts +++ b/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({ showHeader: false, showFooter: false, activePanelId: null, + activeSubPanelId: null, })