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

import { useEffect, useState, useRef, memo, createRef, forwardRef } from 'react';
import { Image, Button } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { MessageBox } from 'react-chat-elements';
import useConversationStore from '@/stores/ConversationStore';
import { useShallow } from 'zustand/react/shallow';
import { isEmpty, olog } from '@/utils/utils';

const MessagesList = ({ reference, contactsModalOpen, setContactsModalOpen, ...props }) => {
  const setReferenceMsg = useConversationStore(useShallow((state) => state.setReferenceMsg));
  olog('render message list');

  const scrollToMessage = (id, index) => {
    const _i = index || props.dataSource.findIndex((msg) => msg.id === id);
    if (_i >= 0) {
      messageRefs.current[_i].current.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  };

  const messageRefs = useRef([]);
  messageRefs.current = props.dataSource.map((_, i) => messageRefs.current[i] ?? createRef());

  const toBottom = (e) => {
    if (!reference) return;
    reference.current.scrollTop = reference.current.scrollHeight - reference.current.offsetHeight;
  };

  const prevProps = useRef(props);
  useEffect(() => {
    if (prevProps.current.dataSource.length !== props.dataSource.length) {
      toBottom();
    }

    prevProps.current = props;
  }, [prevProps, props]);

  const [previewVisible, setPreviewVisible] = useState(false);
  const [previewSrc, setPreviewSrc] = useState();
  const onPreviewClose = () => {
    setPreviewSrc('');
    setPreviewVisible(false);
  };
  const handlePreview = (msg) => {
    switch (msg.type) {
      case 'photo':
        setPreviewVisible(true);
        setPreviewSrc(msg.data.uri);
        return false;

      case 'file':
        window.open(msg.data.link || msg.data.uri, '_blank', 'noopener,noreferrer');
        return false;

      default:
        return false;
    }
  };

  const RenderText = memo(function renderText({ str }) {
    const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji_Presentation})/gmu).filter((s) => s !== '');
    const links = str.match(/https?:\/\/[\S]+/gi) || [];
    const emojis = str.match(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g) || [];
    const extraClass = isEmpty(emojis) ? '' : 'text-base leading-5 emoji-text';
    const objArr = parts.reduce((prev, curr, index) => {
      if (links.includes(curr)) {
        prev.push({ type: 'link', key: curr });
      } else if (emojis.includes(curr)) {
        prev.push({ type: 'emoji', key: curr });
      } else {
        prev.push({ type: 'text', key: curr });
      }
      return prev;
    }, []);
    return (
      <span className={extraClass}>
        {(objArr || []).map((part, index) => {
          if (part.type === 'link') {
            return (
              <a href={part.key} target='_blank' key={`${part.key}${index}`} rel='noreferrer' className='text-sm'>
                {part.key}
              </a>
            );
          } else {
            // if (part.type === 'emoji')
            return part.key;
          }
        })}
      </span>
    );
  });
  // eslint-disable-next-line react/display-name
  const MessageBoxWithRef = forwardRef((props, ref) => (
    <div ref={ref}>
      <MessageBox {...props} />
    </div>
  ));

  return (
    <div className='relative h-full overflow-y-auto overflow-x-hidden flex'>
      <div className='relative overflow-y-auto block flex-1' ref={reference}>
        {props.dataSource.map((message, index) => (
          // <Dropdown
          //   key={message.id}
          //   menu={{
          //     items: [{ label: '回复', key: 'reply', disabled: !['text'].includes(message.whatsapp_msg_type) }],
          //     onClick: ({ key, domEvent }) => {
          //       domEvent.stopPropagation();
          //       switch (key) {
          //         case 'reply':
          //           return setReferenceMsg(message);

          //         default:
          //           return;
          //       }
          //     },
          //   }}
          //   trigger={['contextMenu']}>
          <MessageBoxWithRef
            ref={messageRefs.current[index]}
            key={message.id}
            {...message}
            position={message.sender === 'me' ? 'right' : 'left'}
            onReplyClick={() => setReferenceMsg(message)}
            onReplyMessageClick={() => scrollToMessage(message.reply.id)}
            onOpen={() => handlePreview(message)}
            onTitleClick={() => handlePreview(message)}
            text={<RenderText str={message?.text || ''} />}
            {...(message.sender === 'me'
              ? {
                  styles: { backgroundColor: '#ccd4ae' },
                  notchStyle: { fill: '#ccd4ae' },
                  replyButton: ['text', 'document', 'image'].includes(message.whatsapp_msg_type) && message.status !== 'failed' ? true : false,
                  className: 'whatsappme-container whitespace-pre-wrap',
                }
              : {
                  replyButton: ['text', 'document', 'image'].includes(message.whatsapp_msg_type) ? true : false,
                  className: 'whitespace-pre-wrap',
                })}
            {...(message.type === 'meetingLink'
              ? {
                  actionButtons: [
                    {
                      onClickButton: () => {
                        navigator.clipboard.writeText(message.text);
                      },
                      Component: () => <div>复制</div>,
                    },
                  ],
                }
              : {})}
          />
          // </Dropdown>
        ))}
      </div>
      <Button onClick={toBottom} ghost type={'dashed'} shape={'circle'} className=' absolute bottom-1 right-4' icon={<DownOutlined />} />
      <Image src={null} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />
    </div>
  );
};

export default MessagesList;