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

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

const messagesTemplate = [
  {
    id: Date.now().toString(16),
    sender: 'Customer_1',
    type: 'text',
    text: { body: 'Hello, how can I help you today?' } ,
  }
];

const Messages = observer(() => {
  const { messages } = useConversationContext()

  return (
    <>
    {messages.map((message, index) => (
      <MessageBox
        key={message.id}
        position={ message.sender === 'me' ? 'right' : 'left' }
        type={'text'}
        text={message.text.body}
      />
    ))}
      {/* <List
        dataSource={conversationsStore.messages}
        style={{ flex: '1 1' }}
        renderItem={(message) => (
          <List.Item>
            <List.Item.Meta
              title={message.sender !== 'me' ? message.sender : ''}
              description={message.sender !== 'me' ? `(${message.id}) ${message.content}` : ''}
            />
            {message.sender === 'me' && <div>{message.content} ({message.id})</div>}
          </List.Item>
        )}
      /> */}
    </>
  );
});

export default Messages;