diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx index 6d30c0bb..c7cede46 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx @@ -4,6 +4,7 @@ import { FullScreenMenuItem } from './FullScreenMenuItem' import { SettingsMenuItem } from './SettingsMenuItem' import { FeedbackMenuItem } from './FeedbackMenuItem' import { EffectsMenuItem } from './EffectsMenuItem' +import { SupportMenuItem } from './SupportMenuItem' // @todo try refactoring it to use MenuList component export const OptionsMenuItems = () => { @@ -20,6 +21,7 @@ export const OptionsMenuItems = () => { + diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/SupportMenuItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/SupportMenuItem.tsx new file mode 100644 index 00000000..9876a572 --- /dev/null +++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/SupportMenuItem.tsx @@ -0,0 +1,27 @@ +import { RiQuestionLine } from '@remixicon/react' +import { MenuItem } from 'react-aria-components' +import { useTranslation } from 'react-i18next' +import { menuRecipe } from '@/primitives/menuRecipe' +import { Crisp } from 'crisp-sdk-web' +import { useIsSupportEnabled } from '@/features/support/hooks/useSupport' + +export const SupportMenuItem = () => { + const { t } = useTranslation('rooms', { keyPrefix: 'options.items' }) + const isSupportEnabled = useIsSupportEnabled() + + if (!isSupportEnabled || !Crisp) { + return + } + + return ( + { + Crisp?.chat.open() + }} + > + + {t('support')} + + ) +} diff --git a/src/frontend/src/features/rooms/livekit/components/controls/SupportToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/SupportToggle.tsx deleted file mode 100644 index 7e484564..00000000 --- a/src/frontend/src/features/rooms/livekit/components/controls/SupportToggle.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { ToggleButton } from '@/primitives' -import { RiQuestionLine } from '@remixicon/react' -import { useTranslation } from 'react-i18next' -import { Crisp } from 'crisp-sdk-web' -import { useEffect, useState } from 'react' -import { ToggleButtonProps } from '@/primitives/ToggleButton' -import { useIsSupportEnabled } from '@/features/support/hooks/useSupport' - -export const SupportToggle = ({ onPress, ...props }: ToggleButtonProps) => { - const { t } = useTranslation('rooms', { keyPrefix: 'controls' }) - - const [isOpened, setIsOpened] = useState(() => { - return window?.$crisp?.is?.('chat:opened') || false - }) - - useEffect(() => { - if (!Crisp) { - return - } - - Crisp.chat.onChatOpened(() => { - setIsOpened(true) - }) - Crisp.chat.onChatClosed(() => { - setIsOpened(false) - }) - return () => { - Crisp.chat.offChatOpened() - Crisp.chat.offChatClosed() - } - }, []) - - const isSupportEnabled = useIsSupportEnabled() - - if (!isSupportEnabled) { - return - } - - return ( - { - if (isOpened) { - Crisp.chat.close() - } else { - Crisp.chat.open() - } - onPress?.(e) - }} - data-attr="controls-support" - {...props} - > - - - ) -} 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 879fb75a..f137c1c8 100644 --- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx +++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx @@ -17,7 +17,6 @@ import { import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle' import { ChatToggle } from '../../components/controls/ChatToggle' import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle' -import { SupportToggle } from '../../components/controls/SupportToggle' import { useSidePanel } from '../../hooks/useSidePanel' import { LinkButton } from '@/primitives' import { useSettingsDialog } from '../../components/controls/SettingsDialogContext' @@ -138,10 +137,6 @@ export function MobileControlBar({ description={true} onPress={() => setIsMenuOpened(false)} /> - setIsMenuOpened(false)} - />