Autoscroll doesn't work

[haili-equinix]

I create a simple app following the example in Readme. However, MessageList doesn't scroll to bottom when I add new messages.

[airapy-yaro]

I am experiencing the same issue with the pretty basic code. The MessageList doesn't scroll after adding new messages or typing indicator.

[whispyy]

Have the same issue!

[gordonjl]

Same here! Unfortunately, this would be a deal breaker (as much as I like the library). Anyone have any insights into what's going on? Was it working in a prior release? Adjusting the height of the component doesn't have any effect.

[marcosvroliveira]

I "fixed" the problem this way:

import {
  MinChatUiProvider,
  MainContainer,
  MessageInput,
  MessageContainer,
  MessageList
} from "@minchat/react-chat-ui";
import { useCallback, useEffect, useState } from 'react';

...
const [minChatMessages, setMinChatMessages] = useState<MessageType[]>([]);

const getLastMessageElement = useCallback(() => {
    const someMessage = document.querySelector('[data-testid="incoming-message"]') || document.querySelector('[data-testid="outgoing-message"]');
    
    if (someMessage) {
      const parent = someMessage.parentElement;
      const lastChild = parent?.children[parent.children.length - 1];
      return lastChild;
    }
    
    console.log('No messages found');
    return null;
}, []);

useEffect(() => {
    if (minChatMessages.length > 0) {
      setTimeout(() => {
        const lastElement = getLastMessageElement();
        if (lastElement) {
          console.log('Auto-scrolling to last message element');
          lastElement.scrollIntoView({ 
            behavior: 'smooth', 
            block: 'end',
            inline: 'nearest'
          });
        }
      }, 100);
    }
}, [minChatMessages, getLastMessageElement]);

...
<MessageList
  currentUserId='user'
  messages={minChatMessages}
/>

[mundia416]

@marcosvroliveira are you able to create a pull request for your fix and I will merge it