| @@ -1,4 +1,5 @@ | ||
| 1 | +import { useCanvasOpen } from '@agent/components/Canvas'; | |
| 1 | 2 | import { usePortal } from '@agent/hooks/usePortal'; |
| 2 | 3 | import { useGlobalStore } from '@agent/state/global'; |
| 3 | 4 | import { createPortal, useEffect } from '@wordpress/element'; |
| 4 | 5 | import { __ } from '@wordpress/i18n'; |
| @@ -6,13 +7,20 @@ | ||
| 6 | 7 | import { AnimatePresence, motion } from 'framer-motion'; |
| 7 | 8 | |
| 8 | 9 | export const MobileLayout = ({ children }) => { |
| 9 | 10 | const mountNode = usePortal('extendify-agent-mount'); |
| 10 | - const { minimized, setMinimized } = useGlobalStore(); | |
| 11 | + const { minimized, setMinimized, open, mode } = useGlobalStore(); | |
| 11 | 12 | |
| 13 | + const canvasOpen = useCanvasOpen(); | |
| 14 | + | |
| 12 | 15 | const minimize = () => setMinimized(true); |
| 13 | 16 | |
| 17 | + // The full-screen chat would cover the canvas the user just opened. | |
| 14 | 18 | useEffect(() => { |
| 19 | + if (canvasOpen) setMinimized(true); | |
| 20 | + }, [canvasOpen, setMinimized]); | |
| 21 | + | |
| 22 | + useEffect(() => { | |
| 15 | 23 | if (!mountNode || minimized) return; |
| 16 | 24 | document.body.style.overflow = 'hidden'; |
| 17 | 25 | return () => { |
| 18 | 26 | document.body.style.overflow = ''; |
| @@ -18,12 +26,14 @@ | ||
| 18 | 26 | document.body.style.overflow = ''; |
| 19 | 27 | }; |
| 20 | 28 | }, [mountNode, minimized]); |
| 21 | 29 | |
| 22 | - if (!mountNode) return null; | |
| 30 | + // Only the frontend agent may show while the store says closed. | |
| 31 | + if (!mountNode || (!open && mode !== 'docked-left')) return null; | |
| 23 | 32 | |
| 24 | 33 | return createPortal( |
| 25 | 34 | <div |
| 35 | + data-extendify-agent-panel | |
| 26 | 36 | className={`fixed inset-0 z-max-1 items-center justify-center ${ |
| 27 | 37 | minimized ? 'hidden' : 'flex' |
| 28 | 38 | }`} |
| 29 | 39 | aria-hidden={minimized ? 'true' : 'false'} |
