You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
2.0 KiB
JavaScript
58 lines
2.0 KiB
JavaScript
import { useEffect, useState, useRef } from 'react';
|
|
import { List, Avatar, Timeline, Image } from 'antd';
|
|
import { MessageBox } from 'react-chat-elements';
|
|
import { useConversationContext } from '@/stores/Conversations/ConversationContext';
|
|
|
|
const Messages = (() => {
|
|
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
|
|
// 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;
|