|
|
|
@ -1,13 +1,13 @@
|
|
|
|
import { useEffect, useState, useRef, useMemo, memo, createRef, forwardRef } from 'react';
|
|
|
|
import { useEffect, useState, useRef, useMemo, memo, createRef, forwardRef } from 'react';
|
|
|
|
import { Image, Spin, Dropdown } from 'antd';
|
|
|
|
import { Image, Spin, Dropdown, Button, Affix } from 'antd';
|
|
|
|
import { DownOutlined } from '@ant-design/icons';
|
|
|
|
import { DownOutlined } from '@ant-design/icons';
|
|
|
|
import { MessageBox } from 'react-chat-elements';
|
|
|
|
import { MessageBox } from 'react-chat-elements';
|
|
|
|
import useConversationStore from '@/stores/ConversationStore';
|
|
|
|
import useConversationStore from '@/stores/ConversationStore';
|
|
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
|
|
import { Emoji } from 'emoji-picker-react';
|
|
|
|
import { Emoji } from 'emoji-picker-react';
|
|
|
|
import { olog } from '@/utils/utils';
|
|
|
|
import { isEmpty, olog } from '@/utils/utils';
|
|
|
|
|
|
|
|
|
|
|
|
const Messages = () => {
|
|
|
|
const Messages = ({ ...props }) => {
|
|
|
|
// const currentConversation = useConversationStore(useShallow((state) => state.currentConversation));
|
|
|
|
// const currentConversation = useConversationStore(useShallow((state) => state.currentConversation));
|
|
|
|
const setReferenceMsg = useConversationStore(useShallow((state) => state.setReferenceMsg));
|
|
|
|
const setReferenceMsg = useConversationStore(useShallow((state) => state.setReferenceMsg));
|
|
|
|
const msgListLoading = useConversationStore(useShallow((state) => state.msgListLoading));
|
|
|
|
const msgListLoading = useConversationStore(useShallow((state) => state.msgListLoading));
|
|
|
|
@ -17,19 +17,26 @@ const Messages = () => {
|
|
|
|
const scrollToMessage = (id, index) => {
|
|
|
|
const scrollToMessage = (id, index) => {
|
|
|
|
const _i = index || activeMessages.findIndex((msg) => msg.id === id);
|
|
|
|
const _i = index || activeMessages.findIndex((msg) => msg.id === id);
|
|
|
|
if (_i >= 0) {
|
|
|
|
if (_i >= 0) {
|
|
|
|
messageRefs.current[_i].current.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
|
|
messageRefs.current[_i].current.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const messageRefs = useRef([]);
|
|
|
|
|
|
|
|
messageRefs.current = activeMessages.map((_, i) => messageRefs.current[i] ?? createRef());
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const referance = useRef(null);
|
|
|
|
|
|
|
|
const toBottom = (e) => {
|
|
|
|
|
|
|
|
if (!referance) return;
|
|
|
|
|
|
|
|
referance.current.scrollTop = referance.current.scrollHeight;
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
if (activeMessages.length > 0) {
|
|
|
|
if (activeMessages.length > 0) {
|
|
|
|
|
|
|
|
// toBottom();
|
|
|
|
scrollToMessage(null, activeMessages.length - 1);
|
|
|
|
scrollToMessage(null, activeMessages.length - 1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, [activeMessages]);
|
|
|
|
}, [activeMessages]);
|
|
|
|
|
|
|
|
|
|
|
|
const messageRefs = useRef([]);
|
|
|
|
|
|
|
|
messageRefs.current = activeMessages.map((_, i) => messageRefs.current[i] ?? createRef());
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [previewVisible, setPreviewVisible] = useState(false);
|
|
|
|
const [previewVisible, setPreviewVisible] = useState(false);
|
|
|
|
const [previewSrc, setPreviewSrc] = useState();
|
|
|
|
const [previewSrc, setPreviewSrc] = useState();
|
|
|
|
const onPreviewClose = () => {
|
|
|
|
const onPreviewClose = () => {
|
|
|
|
@ -37,15 +44,23 @@ const Messages = () => {
|
|
|
|
setPreviewVisible(false);
|
|
|
|
setPreviewVisible(false);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
const handlePreview = (msg) => {
|
|
|
|
const handlePreview = (msg) => {
|
|
|
|
if (msg.type !== 'photo') {
|
|
|
|
switch (msg.type) {
|
|
|
|
return false;
|
|
|
|
case 'photo':
|
|
|
|
|
|
|
|
setPreviewVisible(true);
|
|
|
|
|
|
|
|
setPreviewSrc(msg.data.uri);
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
case 'file':
|
|
|
|
|
|
|
|
window.open(msg.data.uri, '_blank', 'noopener,noreferrer');
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
default:
|
|
|
|
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
setPreviewVisible(true);
|
|
|
|
|
|
|
|
setPreviewSrc(msg.data.uri);
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const RenderText = memo(function renderText({str}) {
|
|
|
|
const RenderText = memo(function renderText({ str }) {
|
|
|
|
const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji_Presentation})/gmu).filter(s => s !== '');
|
|
|
|
const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji_Presentation})/gmu).filter((s) => s !== '');
|
|
|
|
// const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji}\uFE0F?|\b\d+\b)/gu);
|
|
|
|
// const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji}\uFE0F?|\b\d+\b)/gu);
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<>
|
|
|
|
@ -53,9 +68,8 @@ const Messages = () => {
|
|
|
|
// if (/\p{Emoji}\uFE0F?/u.test(part)) {
|
|
|
|
// if (/\p{Emoji}\uFE0F?/u.test(part)) {
|
|
|
|
if (/\p{Emoji_Presentation}/u.test(part)) {
|
|
|
|
if (/\p{Emoji_Presentation}/u.test(part)) {
|
|
|
|
const code = [...part].map((e) => e.codePointAt(0).toString(16)).join(`-`);
|
|
|
|
const code = [...part].map((e) => e.codePointAt(0).toString(16)).join(`-`);
|
|
|
|
return <Emoji key={`${part}${index}${code}`} unified={code} size={24} emojiStyle={'apple'} />;
|
|
|
|
return <Emoji key={`${part}${index}${code}`} unified={code} size={24} emojiStyle={'google'} />;
|
|
|
|
} else
|
|
|
|
} else if (/https?:\/\/[\S]+/gi.test(part)) {
|
|
|
|
if (/https?:\/\/[\S]+/gi.test(part)) {
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<a href={part} target='_blank' key={`${part}${index}`} rel='noreferrer'>
|
|
|
|
<a href={part} target='_blank' key={`${part}${index}`} rel='noreferrer'>
|
|
|
|
{part}
|
|
|
|
{part}
|
|
|
|
@ -78,25 +92,26 @@ const Messages = () => {
|
|
|
|
));
|
|
|
|
));
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<div className='relative h-full overflow-y-auto flex'>
|
|
|
|
<Spin spinning={msgListLoading} tip={'正在读取...'} wrapperClassName='pt-8 '>
|
|
|
|
<div className='relative overflow-y-auto block flex-1' ref={referance}>
|
|
|
|
{activeMessages.map((message, index) => (
|
|
|
|
<Spin spinning={msgListLoading} tip={'正在读取...'} wrapperClassName='pt-8 relative'>
|
|
|
|
// <Dropdown
|
|
|
|
{activeMessages.map((message, index) => (
|
|
|
|
// key={message.id}
|
|
|
|
// <Dropdown
|
|
|
|
// menu={{
|
|
|
|
// key={message.id}
|
|
|
|
// items: [{ label: '回复', key: 'reply', disabled: !['text'].includes(message.whatsapp_msg_type) }],
|
|
|
|
// menu={{
|
|
|
|
// onClick: ({ key, domEvent }) => {
|
|
|
|
// items: [{ label: '回复', key: 'reply', disabled: !['text'].includes(message.whatsapp_msg_type) }],
|
|
|
|
// domEvent.stopPropagation();
|
|
|
|
// onClick: ({ key, domEvent }) => {
|
|
|
|
// switch (key) {
|
|
|
|
// domEvent.stopPropagation();
|
|
|
|
// case 'reply':
|
|
|
|
// switch (key) {
|
|
|
|
// return setReferenceMsg(message);
|
|
|
|
// case 'reply':
|
|
|
|
|
|
|
|
// return setReferenceMsg(message);
|
|
|
|
|
|
|
|
|
|
|
|
// default:
|
|
|
|
// default:
|
|
|
|
// return;
|
|
|
|
// return;
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
// },
|
|
|
|
// }}
|
|
|
|
// }}
|
|
|
|
// trigger={['contextMenu']}>
|
|
|
|
// trigger={['contextMenu']}>
|
|
|
|
<MessageBoxWithRef
|
|
|
|
<MessageBoxWithRef
|
|
|
|
ref={messageRefs.current[index]}
|
|
|
|
ref={messageRefs.current[index]}
|
|
|
|
key={message.id}
|
|
|
|
key={message.id}
|
|
|
|
@ -105,23 +120,26 @@ const Messages = () => {
|
|
|
|
onReplyClick={() => setReferenceMsg(message)}
|
|
|
|
onReplyClick={() => setReferenceMsg(message)}
|
|
|
|
onReplyMessageClick={() => scrollToMessage(message.reply.id)}
|
|
|
|
onReplyMessageClick={() => scrollToMessage(message.reply.id)}
|
|
|
|
onOpen={() => handlePreview(message)}
|
|
|
|
onOpen={() => handlePreview(message)}
|
|
|
|
|
|
|
|
onTitleClick={() => handlePreview(message)}
|
|
|
|
text={<RenderText str={message?.text || ''} />}
|
|
|
|
text={<RenderText str={message?.text || ''} />}
|
|
|
|
{...(message.sender === 'me'
|
|
|
|
{...(message.sender === 'me'
|
|
|
|
? {
|
|
|
|
? {
|
|
|
|
styles: { backgroundColor: '#ccd4ae' },
|
|
|
|
styles: { backgroundColor: '#ccd4ae' },
|
|
|
|
notchStyle: { fill: '#ccd4ae' },
|
|
|
|
notchStyle: { fill: '#ccd4ae' },
|
|
|
|
replyButton: ['text'].includes(message.whatsapp_msg_type) && message.status !== 'failed' ? true : false,
|
|
|
|
replyButton: ['text', 'document', 'image'].includes(message.whatsapp_msg_type) && message.status !== 'failed' ? true : false,
|
|
|
|
className: 'whatsappme-container whitespace-pre-wrap',
|
|
|
|
className: 'whatsappme-container whitespace-pre-wrap',
|
|
|
|
}
|
|
|
|
}
|
|
|
|
: {
|
|
|
|
: {
|
|
|
|
replyButton: ['text'].includes(message.whatsapp_msg_type) ? true : false,
|
|
|
|
replyButton: ['text', 'document', 'image'].includes(message.whatsapp_msg_type) ? true : false,
|
|
|
|
|
|
|
|
className: 'whitespace-pre-wrap',
|
|
|
|
})}
|
|
|
|
})}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
// </Dropdown>
|
|
|
|
// </Dropdown>
|
|
|
|
))}
|
|
|
|
))}
|
|
|
|
|
|
|
|
</Spin>
|
|
|
|
<Image src={previewSrc} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />
|
|
|
|
<Image src={null} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />
|
|
|
|
</Spin>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<Button onClick={toBottom} shape={'circle'} className=' absolute bottom-1 right-4' icon={<DownOutlined />} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
Lei OT
2 years ago