MessageList State

import React, { useEffect, useRef, useState } from 'react';
import { useMessageListState } from '@tencentcloud/chat-uikit-react';
import type { MessageModel } from '@tencentcloud/chat-uikit-react';
import './MessageList.scss';

interface MessageListProps {
  className?: string;
}

const MessageList: React.FC<MessageListProps> = ({ className }) => {
  const {
    messageList,
    hasMoreOlderMessage,
    loadMoreMessage,
    isDisableScroll,
    setIsDisableScroll,
  } = useMessageListState();

  const [isLoading, setIsLoading] = useState(false);
  const messageListRef = useRef<HTMLDivElement>(null);
  const prevScrollHeight = useRef<number>(0);

  // load more messages
  const handleLoadMore = async () => {
    if (isLoading || !hasMoreOlderMessage) return;

    setIsLoading(true);
    try {
      // Record the current scroll height
      if (messageListRef.current) {
        prevScrollHeight.current = messageListRef.current.scrollHeight;
      }

      await loadMoreMessage();
    } catch (error) {
      console.error('Failed to load more messages:', error);
    } finally {
      setIsLoading(false);
    }
  };

  // Handle scroll event
  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
    const target = e.target as HTMLDivElement;
    const { scrollTop, scrollHeight, clientHeight } = target;

    // Detect whether scrolled to top, trigger loading more
    if (scrollTop === 0 && hasMoreOlderMessage && !isLoading) {
      handleLoadMore();
    }

    // detect whether users are viewing historical message
    const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10;
    setIsDisableScroll(!isAtBottom);
  };

  // Keep scroll position (after loading more messages)
  useEffect(() => {
    if (messageListRef.current && prevScrollHeight.current > 0) {
      const newScrollHeight = messageListRef.current.scrollHeight;
      const scrollDiff = newScrollHeight - prevScrollHeight.current;
      messageListRef.current.scrollTop = scrollDiff;
      prevScrollHeight.current = 0;
    }
  }, [messageList]);

  // Auto-scroll to bottom (on message arrival)
  useEffect(() => {
    if (messageListRef.current && !isDisableScroll) {
      messageListRef.current.scrollTop = messageListRef.current.scrollHeight;
    }
  }, [messageList, isDisableScroll]);

  // Render a single message
  const renderMessage = (message: MessageModel) => (
    <div key={message.ID} className="message-item">
      <div className="message-sender">{message.nick || message.from}</div>
      <div className="message-content">
        {
          (() => {
            if (message.type === 'TIMTextElem') {
              return  <span className="text-message">{message.payload.text}</span>;
            } else {
              return <span>other message</span>;
            }
          })()
        }
      </div>
      <div className="message-time">
        {new Date(message.time * 1000).toLocaleTimeString()}
      </div>
    </div>
  );

  return (
    <div className={`im-message-list-container ${className || ''}`}>
      {/* load more indicator */}
      {hasMoreOlderMessage && (
        <div className="load-more-indicator">
          {isLoading ? (
            <div className="loading">loading...</div>
          ) : (
            <button onClick={handleLoadMore} className="load-more-btn">
              load more messages
            </button>
          )}
        </div>
      )}

      {/* message list */}
      <div
        ref={messageListRef}
        className="message-list"
        onScroll={handleScroll}
      >
        {messageList?.map(renderMessage)}
      </div>

      {/* empty state */}
      {messageList?.length === 0 && (
        <div className="empty-state">
          No Messages
        </div>
      )}
    </div>
  );
};

export default MessageList;

.im-message-list-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: auto hidden;
  
  .load-more-indicator {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #eee;
    
    .loading {
      color: #666;
      font-size: 14px;
    }
    
    .load-more-btn {
      padding: 8px 16px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      
      &:hover {
        background: #0056b3;
      }
    }
  }
  
  .message-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 10px;
    
    .message-item {
      margin-bottom: 15px;
      padding: 10px;
      background: #f5f5f5;
      border-radius: 8px;
      
      .message-sender {
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
      }
      
      .message-content {
        color: #666;
        line-height: 1.5;
        margin-bottom: 5px;
      }
      
      .message-time {
        font-size: 12px;
        color: #999;
        text-align: right;
      }
    }
  }
  
  .empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
  }
}