diff --git a/src/components/chat/GlobalChatbox.tsx b/src/components/chat/GlobalChatbox.tsx index 45cc983..921ab5b 100644 --- a/src/components/chat/GlobalChatbox.tsx +++ b/src/components/chat/GlobalChatbox.tsx @@ -3,11 +3,10 @@ import React, { useCallback, useEffect, - useLayoutEffect, useRef, useState, } from "react"; -import { Box, Drawer, alpha, useMediaQuery, useTheme } from "@mui/material"; +import { Box, Drawer, alpha, useTheme } from "@mui/material"; import type { AgentModel } from "@/lib/chatStream"; import { AgentComposer } from "./AgentComposer"; @@ -33,7 +32,6 @@ export const GlobalChatbox: React.FC = ({ open, onClose }) => { const bottomRef = useRef(null); const inputRef = useRef(null); const theme = useTheme(); - const isDesktop = useMediaQuery(theme.breakpoints.up("sm")); const { speechState, @@ -165,32 +163,6 @@ export const GlobalChatbox: React.FC = ({ open, onClose }) => { }; }, [isResizing]); - useLayoutEffect(() => { - const body = document.body; - const html = document.documentElement; - const previousBodyPaddingRight = body.style.paddingRight; - const previousBodyTransition = body.style.transition; - const previousBodyBoxSizing = body.style.boxSizing; - const previousHtmlBoxSizing = html.style.boxSizing; - const reservedWidth = open && isDesktop ? `${width}px` : "0px"; - - body.style.boxSizing = "border-box"; - html.style.boxSizing = "border-box"; - body.style.paddingRight = reservedWidth; - body.style.transition = isResizing - ? previousBodyTransition - : [previousBodyTransition, "padding-right 240ms cubic-bezier(0.2, 0.8, 0.2, 1)"] - .filter(Boolean) - .join(", "); - - return () => { - body.style.paddingRight = previousBodyPaddingRight; - body.style.transition = previousBodyTransition; - body.style.boxSizing = previousBodyBoxSizing; - html.style.boxSizing = previousHtmlBoxSizing; - }; - }, [isDesktop, isResizing, open, width]); - return ( = ({ open, onClose }) => { hideBackdrop disableScrollLock disableEnforceFocus - sx={{ zIndex: (muiTheme) => muiTheme.zIndex.modal + 100 }} + sx={{ + zIndex: (muiTheme) => muiTheme.zIndex.modal + 100, + pointerEvents: "none", + }} PaperProps={{ sx: { width: { xs: "100%", sm: width }, @@ -208,6 +183,7 @@ export const GlobalChatbox: React.FC = ({ open, onClose }) => { boxShadow: "none", overflow: open ? "visible" : "hidden", zIndex: (muiTheme) => muiTheme.zIndex.modal + 100, + pointerEvents: "auto", transition: isResizing ? "none" : undefined, }, }}