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.
81 lines
3.0 KiB
JavaScript
81 lines
3.0 KiB
JavaScript
import { useEffect, useRef, useState, forwardRef, memo } from 'react';
|
|
import { MessageBox } from 'react-chat-elements';
|
|
import { App, Button } from 'antd';
|
|
import { DownOutlined, LoadingOutlined } from '@ant-design/icons';
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
import useConversationStore from '@/stores/ConversationStore';
|
|
import { groupBy, isEmpty, } from '@/utils/commons';
|
|
import BubbleEmail from './Components/BubbleEmail';
|
|
import BubbleIM from './Components/BubbleIM';
|
|
|
|
const MessagesList = ({ messages, handlePreview, reference, longListLoading, getMoreMessages, shouldScrollBottom, loadNextPage, handleContactClick, setNewChatModalVisible, setNewChatFormValues, ...listProps }) => {
|
|
|
|
// const messagesEndRef = useRef(null);
|
|
const messageRefs = useRef([]);
|
|
const [focusMsg, setFocusMsg] = useState('');
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
setFocusMsg('');
|
|
}, 3500);
|
|
|
|
return () => '';
|
|
}, [focusMsg])
|
|
|
|
|
|
const scrollToBottom = (force = false) => {
|
|
if (reference.current && (shouldScrollBottom || force)) {
|
|
reference.current.scrollTop = reference.current.scrollHeight;
|
|
}
|
|
};
|
|
|
|
const scrollToMessage = (id, index) => {
|
|
const _i = index || messages.findIndex((msg) => msg.id === id);
|
|
if (_i >= 0) {
|
|
messageRefs.current[_i].scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
setFocusMsg(id);
|
|
}
|
|
};
|
|
|
|
useEffect(scrollToBottom, [messages]);
|
|
|
|
const onLoadMore = async () => {
|
|
await getMoreMessages();
|
|
};
|
|
// eslint-disable-next-line react/display-name
|
|
const MessageBoxWithRef = forwardRef((props, ref) => (
|
|
<div ref={ref}>
|
|
{props.whatsapp_msg_type
|
|
&& <BubbleIM {...props} {...{ scrollToMessage, focusMsg, handleContactClick, setNewChatModalVisible, setNewChatFormValues, handlePreview }} />}
|
|
{props.type === 'email' && <BubbleEmail {...props} onOpenEditor={listProps.onOpenEditor} onOpenEmail={listProps.onOpenEmail} />}
|
|
</div>
|
|
));
|
|
|
|
return (
|
|
<div className='relative h-full overflow-y-auto overflow-x-hidden flex flex-1'>
|
|
<div ref={reference} className='relative overflow-y-auto overflow-x-hidden block flex-1'>
|
|
{loadNextPage && messages.length > 0 && (
|
|
<div className='text-center pt-3 mb-3 h-8 leading-8 '>
|
|
{!longListLoading ? (
|
|
<Button onClick={onLoadMore} type={'dashed'}>
|
|
loading more
|
|
</Button>
|
|
) : (
|
|
<LoadingOutlined className='text-primary' />
|
|
)}
|
|
</div>
|
|
)}
|
|
{messages.map((message, index) => (
|
|
<MessageBoxWithRef
|
|
ref={(el) => (messageRefs.current[index] = el)}
|
|
key={`${message.sn}.${message.id}`}
|
|
{...message}
|
|
/>
|
|
))}
|
|
</div>
|
|
<Button onClick={() => scrollToBottom(true)} ghost type={'dashed'} shape={'circle'} className=' absolute bottom-1 right-4' icon={<DownOutlined />} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MessagesList;
|