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);

  // 加载更多消息
  const handleLoadMore = async () => {
    if (isLoading || !hasMoreOlderMessage) return;

    setIsLoading(true);
    try {
      // 记录当前滚动高度
      if (messageListRef.current) {
        prevScrollHeight.current = messageListRef.current.scrollHeight;
      }

      await loadMoreMessage();
    } catch (error) {
      console.error('加载更多消息失败:', error);
    } finally {
      setIsLoading(false);
    }
  };

  // 处理滚动事件
  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
    const target = e.target as HTMLDivElement;
    const { scrollTop, scrollHeight, clientHeight } = target;

    // 检测是否滚动到顶部，触发加载更多
    if (scrollTop === 0 && hasMoreOlderMessage && !isLoading) {
      handleLoadMore();
    }

    // 检测用户是否在查看历史消息
    const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10;
    setIsDisableScroll(!isAtBottom);
  };

  // 保持滚动位置（加载更多消息后）
  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]);

  // 自动滚动到底部（新消息到达时）
  useEffect(() => {
    if (messageListRef.current && !isDisableScroll) {
      messageListRef.current.scrollTop = messageListRef.current.scrollHeight;
    }
  }, [messageList, isDisableScroll]);

  // 渲染单条消息
  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 || ''}`}>
      {/* 加载更多指示器 */}
      {hasMoreOlderMessage && (
        <div className="load-more-indicator">
          {isLoading ? (
            <div className="loading">加载中...</div>
          ) : (
            <button onClick={handleLoadMore} className="load-more-btn">
              加载更多消息
            </button>
          )}
        </div>
      )}

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

      {/* 空状态 */}
      {messageList?.length === 0 && (
        <div className="empty-state">
          暂无消息
        </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;
  }
}