def add_hooks(self) -> list[str | Var]:
        """Add hooks required for the component.

        Returns:
            The hooks required for the component.
        """
        ref_name = self.get_ref()
        return [
            "const wasNearBottom = useRef(false);",
            "const hadScrollbar = useRef(false);",
            f"""
const checkIfNearBottom = () => {{
    if (!{ref_name}.current) return;

    const container = {ref_name}.current;
    const nearBottomThreshold = 50; // pixels from bottom to trigger auto-scroll

    const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;

    wasNearBottom.current = distanceFromBottom <= nearBottomThreshold;

    // Track if container had a scrollbar
    hadScrollbar.current = container.scrollHeight > container.clientHeight;
}};
""",
            f"""
const scrollToBottomIfNeeded = () => {{
    if (!{ref_name}.current) return;

    const container = {ref_name}.current;
    const hasScrollbarNow = container.scrollHeight > container.clientHeight;

    // Scroll if:
    // 1. User was near bottom, OR
    // 2. Container didn't have scrollbar before but does now
    if (wasNearBottom.current || (!hadScrollbar.current && hasScrollbarNow)) {{
      container.scrollTop = container.scrollHeight;
    }}

    // Update scrollbar state for next check
    hadScrollbar.current = hasScrollbarNow;
}};
""",
            f"""
useEffect(() => {{
    const container = {ref_name}.current;
    if (!container) return;

    scrollToBottomIfNeeded();

    // Create ResizeObserver to detect height changes
    const resizeObserver = new ResizeObserver(() => {{
        scrollToBottomIfNeeded();
    }});

    // Track scroll position before height changes
    container.addEventListener('scroll', checkIfNearBottom);

    // Initial check
    checkIfNearBottom();

    // Observe container for size changes
    resizeObserver.observe(container);

    return () => {{
        container.removeEventListener('scroll', checkIfNearBottom);
        resizeObserver.disconnect();
    }};
}});
""",
        ]
Add hooks required for the component.

        Returns:
            The hooks required for the component.
        
reflex/components/core/auto_scroll.py