MessageList Store

import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import {
  useChatContext,
  MessageType,
  MessageListStore,
  type MessageInfo,
  type TextMessagePayload,
} from '@tencentcloud/chat-uikit-react';
import './styles.css';

const NEAR_BOTTOM = 40;

function getMessageText(message: MessageInfo) {
  const payload = (message.messagePayload || {}) as TextMessagePayload;
  if (
    message.messageType === MessageType.Text
    && 'text' in payload
    && typeof payload.text === 'string'
  ) {
    return payload.text;
  }
  return '';
}

function BasicMessageList({ conversationID }: { conversationID: string }) {
  const {
    hasOlderMessages,
    loadMessages,
    loadOlderMessages,
    messageList,
    setActiveConversation,
    messageListOnEvent,
  } = useChatContext();

  const listRef = useRef<HTMLDivElement>(null);
  const keepScrollRef = useRef<number | null>(null);
  const isNearBottomRef = useRef(true);
  const newMessageDialogRef = useRef<HTMLDialogElement>(null);
  const [isViewingHistory, setIsViewingHistory] = useState(false);
  const [showNewMessageToast, setShowNewMessageToast] = useState(false);
  const textMessages = messageList.filter(message => getMessageText(message));
  
  useEffect(() => {
    setActiveConversation(conversationID);
  }, [conversationID]);

  const scrollToBottom = () => {
    const list = listRef.current;
    if (!list) return;
    list.scrollTop = list.scrollHeight;
  };

  const updateScrollState = () => {
    const list = listRef.current;
    if (!list) return;
    const distanceToBottom = list.scrollHeight - list.scrollTop - list.clientHeight;
    const isNearBottom = distanceToBottom < NEAR_BOTTOM;
    isNearBottomRef.current = isNearBottom;
    setIsViewingHistory(!isNearBottom);
  };

  useEffect(() => {
    loadMessages().then(() => requestAnimationFrame(scrollToBottom));
  }, [conversationID, loadMessages]);

  useEffect(() => {
    return onEvent((event) => {
      if (event.type !== 'onReceiveNewMessage') return;
      if (isNearBottomRef.current) {
        requestAnimationFrame(scrollToBottom);
        return;
      }
      setShowNewMessageToast(true);
    });
  }, [onEvent]);

  useEffect(() => {
    const dialog = newMessageDialogRef.current;
    if (!dialog) return;
    if (showNewMessageToast && !dialog.open) {
      dialog.show();
    }
    if (!showNewMessageToast && dialog.open) {
      dialog.close();
    }
  }, [showNewMessageToast]);

  useLayoutEffect(() => {
    const list = listRef.current;
    if (!list) return;

    if (keepScrollRef.current !== null) {
      list.scrollTop = list.scrollHeight - keepScrollRef.current;
      keepScrollRef.current = null;
      return;
    }

    if (isNearBottomRef.current) {
      scrollToBottom();
    }
  }, [messageList]);

  const handleScroll = () => {
    const list = listRef.current;
    if (!list) return;
    updateScrollState();
    if (list.scrollTop > 0 || !hasOlderMessages) return;

    keepScrollRef.current = list.scrollHeight;
    loadOlderMessages();
  };

  const handleReadNewMessage = () => {
    setShowNewMessageToast(false);
    scrollToBottom();
  };

  return (
    <div className="message-list-basic-demo__body">
      <div className="message-list-basic-demo__status">
        {isViewingHistory ? 'Viewing history' : 'At latest messages'}
      </div>
      <div
        className="message-list-basic-demo__list"
        onScroll={handleScroll}
        ref={listRef}
      >
        {textMessages.map(message => (
          <div
            className="message-list-basic-demo__post"
            key={message.msgID}
          >
            <div className="message-list-basic-demo__post-meta">
              <strong>{message.from?.nickname || message.from?.userID || (message.isSentBySelf ? 'Me' : 'Unknown')}</strong>
              <time>{message.timestamp?.toLocaleString?.() || message.msgID}</time>
            </div>
            <p>{getMessageText(message)}</p>
          </div>
        ))}
      </div>
      <dialog className="message-list-basic-demo__dialog" ref={newMessageDialogRef}>
        <span>New message received.</span>
        <button onClick={handleReadNewMessage} type="button">
          Go to latest
        </button>
      </dialog>
    </div>
  );
}

function MessageListBasicDemo() {
  const [inputConversationID, setInputConversationID] = useState('');
  const [conversationID, setConversationID] = useState('');

  return (
    <div className="message-list-basic-demo">
      <div className="message-list-basic-demo__header">
        <h2>MessageList Basic</h2>
        <p>Basic message list with scroll loading and new-message toast.</p>
      </div>

      <div className="message-list-basic-demo__toolbar">
        <input
          onChange={event => setInputConversationID(event.target.value)}
          placeholder="C2CuserID or GROUPgroupID"
          value={inputConversationID}
        />
        <button
          onClick={() => setConversationID(inputConversationID.trim())}
          type="button"
        >
          Load Messages
        </button>
      </div>

      {conversationID
        ? <BasicMessageList conversationID={conversationID} />
        : <div className="message-list-basic-demo__empty">Enter a conversationID first.</div>}
    </div>
  );
}