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

import { useEffect } from 'react';
import { List, Avatar, Timeline } from 'antd';
import { observer } from 'mobx-react';
import { useStore } from '@/stores/StoreContext.js';

const Messages = observer(() => {
  const { conversationsStore } = useStore();
  const { messages: newMessages } = conversationsStore;

  useEffect(() => {
    // Load your data here
    // For example:
    // conversationsStore.loadMessages();
  }, [newMessages]);

  return (
    <>
      <List
        dataSource={conversationsStore.messages}
        style={{ flex: '1 1' }}
        renderItem={(message) => (
          <List.Item>
            <List.Item.Meta
              // avatar={<Avatar>{message.sender[0]}</Avatar>}
              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;