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

import { useEffect, useState, useRef } from 'react';
import { List, Avatar, Timeline, Image } from 'antd';
import { MessageBox } from 'react-chat-elements';
import { useConversationState } from '@/stores/ConversationContext';

const Messages = (() => {
  const { activeConversations, currentConversation } = useConversationState();
  const messagesList = activeConversations[currentConversation.sn] || [];
  console.log('messagesList----------------------------------------------------', messagesList);

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

  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'},
            className: 'whatsappme-container',
          } : {})}
          // notchStyle={{fill: '#ccd5ae'}}
          // copiableDate={false}
        />
      ))}
      <Image src={previewSrc} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />
      <div ref={messagesEndRef}></div>
    </div>
  );
});

export default Messages;