diff --git a/packages/apps/human-app/frontend/index.html b/packages/apps/human-app/frontend/index.html index 4e8f5f2046..1e80b56cd7 100644 --- a/packages/apps/human-app/frontend/index.html +++ b/packages/apps/human-app/frontend/index.html @@ -11,22 +11,12 @@
- + diff --git a/packages/apps/human-app/frontend/src/modules/homepage/components/chat.tsx b/packages/apps/human-app/frontend/src/modules/homepage/components/chat.tsx index 8e84d93fba..54706e36d5 100644 --- a/packages/apps/human-app/frontend/src/modules/homepage/components/chat.tsx +++ b/packages/apps/human-app/frontend/src/modules/homepage/components/chat.tsx @@ -1,47 +1,42 @@ -import { useEffect, useRef } from 'react'; import { useIsMobile } from '@/shared/hooks/use-is-mobile'; +import { useEffect } from 'react'; export function Chat({ displayChatIcon = true, }: { displayChatIcon?: boolean; }) { - const ref = useRef(null); const isMobile = useIsMobile(); useEffect(() => { - let chatElement: HTMLElement | undefined; - const root = document.getElementById('root') as Element | undefined; - if (!root) return; - - const positionChatElement = () => { - if (chatElement && ref.current) { - const refRect = ref.current.getBoundingClientRect(); - const rootRect = root.getBoundingClientRect(); - - chatElement.style.position = 'absolute'; - if (displayChatIcon) { - chatElement.style.opacity = '1'; - chatElement.style.top = `${(refRect.top - rootRect.top).toString()}px`; - chatElement.style.right = isMobile ? '16px' : '80px'; - chatElement.style.width = `${refRect.width.toString()}px`; - chatElement.style.height = `${refRect.height.toString()}px`; - } else { - chatElement.style.opacity = '0'; - } + const applyVisibility = () => { + const chatElement = document.querySelector('[data-id="zsalesiq"]') as + | HTMLElement + | undefined; + if (chatElement) { + chatElement.style.opacity = displayChatIcon ? '1' : '0'; + chatElement.style.pointerEvents = displayChatIcon ? 'auto' : 'none'; + chatElement.childNodes.forEach((element, idx) => { + if (element instanceof HTMLElement) { + element.style.right = isMobile ? '16px' : '24px'; + if (idx === 1) { + element.style.bottom = isMobile ? '16px' : '20px'; + } + } + }); + return true; } + + return false; }; - const mutationObserver = new MutationObserver((mutationsList) => { - for (const mutation of mutationsList) { - if (mutation.type === 'childList') { - chatElement = document.querySelector('[data-id="zsalesiq"]') as - | HTMLElement - | undefined; - if (chatElement && ref.current) { - positionChatElement(); - } - } + if (applyVisibility()) { + return; + } + + const mutationObserver = new MutationObserver(() => { + if (applyVisibility()) { + mutationObserver.disconnect(); } }); @@ -50,33 +45,10 @@ export function Chat({ subtree: true, }); - const resizeObserverElement = document.createElement('div'); - resizeObserverElement.style.position = 'absolute'; - resizeObserverElement.style.width = '100%'; - resizeObserverElement.style.height = '100%'; - resizeObserverElement.style.top = '0'; - resizeObserverElement.style.left = '0'; - resizeObserverElement.style.opacity = '0'; - resizeObserverElement.style.pointerEvents = 'none'; - document.body.appendChild(resizeObserverElement); - - const resizeObserver = new ResizeObserver(positionChatElement); - - resizeObserver.observe(resizeObserverElement); - return () => { - resizeObserver.disconnect(); mutationObserver.disconnect(); - if (resizeObserverElement.parentNode) { - resizeObserverElement.parentNode.removeChild(resizeObserverElement); - } }; - }, [ref, displayChatIcon, isMobile]); + }, [displayChatIcon, isMobile]); - return ( -
- ); + return null; }