| 6 | import { Body } from "./body"; |
| 7 | |
| 8 | export const EmbedSidebar = () => { |
| 9 | const [container, setContainer] = useState<HTMLElement | null>(null); |
| 10 | const { embedWidth, isOpen, setEmbedWidth } = useConversationUiStore(); |
| 11 | const resizeHandleRef = useRef<HTMLDivElement>(null); |
| 12 | const embedWidthRef = useRef(embedWidth); |
| 13 | const isResizingRef = useRef(false); |
| 14 | const originalBodyStyleRef = useRef<{ |
| 15 | display?: string; |
| 16 | flexDirection?: string; |
| 17 | }>({}); |
| 18 | const mouseMoveHandlerRef = useRef<((e: MouseEvent) => void) | null>(null); |
| 19 | const mouseUpHandlerRef = useRef<(() => void) | null>(null); |
| 20 | const originalCursorRef = useRef<string>(""); |
| 21 | const originalUserSelectRef = useRef<string>(""); |
| 22 | |
| 23 | // Keep ref in sync with embedWidth |
| 24 | useEffect(() => { |
| 25 | embedWidthRef.current = embedWidth; |
| 26 | }, [embedWidth]); |
| 27 | |
| 28 | // Cleanup resize handlers and body styles on unmount or when isOpen changes |
| 29 | useEffect(() => { |
| 30 | return () => { |
| 31 | // Clean up any active resize handlers |
| 32 | if (mouseMoveHandlerRef.current) { |
| 33 | document.removeEventListener("mousemove", mouseMoveHandlerRef.current); |
| 34 | mouseMoveHandlerRef.current = null; |
| 35 | } |
| 36 | if (mouseUpHandlerRef.current) { |
| 37 | document.removeEventListener("mouseup", mouseUpHandlerRef.current); |
| 38 | mouseUpHandlerRef.current = null; |
| 39 | } |
| 40 | |
| 41 | // Restore body styles |
| 42 | if (originalCursorRef.current !== "") { |
| 43 | document.body.style.cursor = originalCursorRef.current; |
| 44 | originalCursorRef.current = ""; |
| 45 | } |
| 46 | if (originalUserSelectRef.current !== "") { |
| 47 | document.body.style.userSelect = originalUserSelectRef.current; |
| 48 | originalUserSelectRef.current = ""; |
| 49 | } |
| 50 | |
| 51 | // Reset resizing state |
| 52 | isResizingRef.current = false; |
| 53 | }; |
| 54 | }, [isOpen]); |
| 55 | |
| 56 | // Function to update main content area flex properties |
| 57 | const updateMainContentFlex = useCallback((ideBody: HTMLElement) => { |
| 58 | // Find or create ide-redesign-inner |
| 59 | let ideInner = ideBody.querySelector(".ide-redesign-inner") as HTMLElement | null; |
| 60 | if (!ideInner) { |
| 61 | ideInner = document.createElement("div"); |
| 62 | ideInner.className = "ide-redesign-inner"; |
| 63 | // Move all existing children (except sidebar) into ideInner |
| 64 | const children = Array.from(ideBody.children) as HTMLElement[]; |
| 65 | children.forEach((child) => { |