Global-sales/src/views/Conversations/Components/Messages.jsx

import { useEffect, useState, useRef, useMemo } from 'react';
import { Image, Alert } from 'antd';
import { MessageBox } from 'react-chat-elements';
import { useConversationState, useConversationDispatch } from '@/stores/ConversationContext';
import { setReplyTo } from '@/actions/ConversationActions';

const Messages = () => {
  const { activeConversations, currentConversation } = useConversationState();
  const dispatch = useConversationDispatch();

  const messagesList = useMemo(() => activeConversations[currentConversation.sn] || [], [activeConversations, currentConversation.sn]);
  console.log('messagesList----------------------------------------------------', messagesList);

  const messagesEndRef = useRef(null);
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messagesList, currentConversation.last_received_time]);

  const [previewVisible, setPreviewVisible] = useState(false);
  const [previewSrc, setPreviewSrc] = useState();
  const onPreviewClose = () => {
    setPreviewSrc('');
    setPreviewVisible(false);
  };
  const handlePreview = (msg) => {
    if (msg.type !== 'photo') {
      return false;
    }
    setPreviewVisible(true);
    setPreviewSrc(msg.data.uri);
  };

  return (
    <div>
      {messagesList.map((message, index) => (
        <MessageBox
          // className={message.sender === 'me' ? 'whatsappme-container' : ''}
          key={message.id}
          position={message.sender === 'me' ? 'right' : 'left'}
          {...message}
          onOpen={() => handlePreview(message)}
          // letterItem={{ id: 1, letter: 'AS' }}
          // 'waiting'| 'sent' | 'received' | 'read'
          styles={{ backgroundColor: message.sender === 'me' ? '#ccd5ae' : '' }}
          {...(message.sender === 'me'
            ? {
                style: { backgroundColor: '#ccd5ae' },
                notchStyle: { fill: '#ccd5ae' },
                // forwarded: false,
                // todo: reaction: 只能发送一个emoji
                replyButton: ['text'].includes(message.whatsapp_msg_type) && message.status !== 'failed' ? true : false,
                onReplyClick: () => dispatch(setReplyTo(message)),
                className: 'whatsappme-container whitespace-pre-wrap',
              }
            : {
                replyButton: ['text'].includes(message.whatsapp_msg_type) ? true : false,
                onReplyClick: () => dispatch(setReplyTo(message)),
              })}
          // notchStyle={{fill: '#ccd5ae'}}
          // copiableDate={false}
        />
      ))}
      <Image src={previewSrc} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />
      <div ref={messagesEndRef}></div>
    </div>
  );
};

export default Messages;