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

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

const msgTypeMapped = {
  text: { type: 'text', data: (msg) => ({ text: msg.text.body }) },
  image: {
    type: 'photo',
    data: (msg) => ({
      data: {
        uri: msg.image.link,
        width: 200,
        height: 200,
        alt: '',
      },
      onOpen: () => {
        console.log('Open image', msg.image.link);
      },
    }),
  },
  sticker: {
    type: 'photo',
    data: (msg) => ({
      data: {
        uri: msg.sticker.link,
        width: 150,
        height: 120,
        alt: '',
      },
    }),
  },
  video: {
    type: 'video',
    data: (msg) => ({
      data: {
        videoURL: msg.video.link,
        status: {
          click: true,
          loading: 0,
          download: true,
        },
      },
    }),
  },
  audio: {
    type: 'audio',
    data: (msg) => ({
      data: {
        audioURL: msg.audio.link,
      },
    }),
  },
  'unsupported': { type: 'system', data: (msg) => ({ text: 'Message type is currently not supported.' }) },
  // 'unsupported': { type: 'text', data: (msg) => ({ text: 'Message type is currently not supported.' }) }
  // file: 'file',
  // location: 'location',
  // contact: 'contact',
  // 'contact-card': 'contact-card',
  // 'contact-card-with-photo': 'contact-card-with-photo',
  // 'contact-card-with-photo-and-label': 'contact-card-with-photo-and-label',
};
const parseMessage = (messages) => {
  return messages.map((msg) => {
    return {
      ...(msgTypeMapped?.[msg.type]?.data(msg) || {}),
      id: msg.id,
      sender: msg.from,
      type: msgTypeMapped?.[msg.type]?.type || 'text',
      // title: msg.customerProfile.name,
      date: msg.sendTime,
    };
  });
};

const Messages = observer(() => {
  const { messages: messagesList } = useConversationContext();
  // const messagesList = parseMessage(messages);
  // console.log(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
          key={message.id}
          position={message.sender === 'me' ? 'right' : 'left'}
          {...message}
          onOpen={() => handlePreview(message)}
          status={message.sender === 'me' ? 'sent' : ''}
          // read | 'waiting'| 'sent' | 'received' | 'read'
        />
      ))}
      <Image src={previewSrc} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />
      <div ref={messagesEndRef}></div>
    </div>
  );
});

export default Messages;