Support smart scroll feature in MessageBox Component

[karthikjeeyar]

Currently, the MessageBox component does not offer a smooth scrolling experience when the content is being streamed. Specifically:

• The component can be scrolled to the bottom when the new content arrives using below code, but it may not be desirable if the user is actively reading the content or manually scrolling up.

  example usage:

    React.useEffect(() => {
        messageBoxRef.current?.scrollTo({top: messageBoxRef.current.scrollHeight, behavior: 'smooth'});
    }, [messages, messageBoxRef]);
  

Proposal

Implement a new enableSmartScroll feature in the MessageBox component that:

• Pauses auto-scroll when the user manually scrolls up, allowing them to read content without interruptions.

• Resumes auto-scroll when the user scrolls back down or clicks the "Back to Bottom" button.

• Exposes imperative methods (scrollToTop, scrollToBottom, and isSmartScrollActive) through ref for programmatic control over the scroll behavior.

Ensures smooth and intuitive user interaction, where the user has full control over the scroll, while still offering automatic scrolling when appropriate.

Note:

I have recently implemented a similar feature in RHDH lightspeed and I would like to contribute this to PF chatbot. Pull request - redhat-developer/rhdh-plugins#694