style: 点击引用

src/lib/msgUtils.js

@@ -386,7 +386,7 @@ export const whatsappMsgTypeMapped = {
     }),
     renderForReply: (msg) => ({
       id: msg.wamid,
-      message: '[联系人]',
+      message: '[联系人] ' + msg.contacts[0].name.formatted_name + '...',
     }),
   },
   location: {

src/views/ChatHistory.jsx

@@ -255,10 +255,12 @@ function ChatHistory() {
 
   const messagesEndRef = useRef(null);
   const messageRefs = useRef([]);
+  const [focusMsg, setFocusMsg] = useState('');
   const scrollToMessage = (id, index) => {
     const _i = index || chatItemMessages.findIndex((msg) => msg.id === id);
     if (_i >= 0) {
       messageRefs.current[_i].scrollIntoView({ behavior: 'smooth', block: 'start' });
+      setFocusMsg(id);
     }
   };
   // eslint-disable-next-line react/display-name
@@ -340,6 +342,7 @@ function ChatHistory() {
                         'whitespace-pre-wrap mb-2',
                         message.whatsapp_msg_type === 'sticker' ? 'bg-transparent' : '',
                         message.sender === 'me' ? 'whatsappme-container' : '',
+                        focusMsg === message.id ? 'message-box-focus' : '',
                       ].join(' ')}
                       style={{
                         backgroundColor: message.sender === 'me' ? '#ccd4ae' : '#fff',

src/views/Conversations/Components/MessagesList.jsx

@@ -11,6 +11,7 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
 
   // const messagesEndRef = useRef(null);
   const messageRefs = useRef([]);
+  const [focusMsg, setFocusMsg] = useState('');
 
   const scrollToBottom = (force = false) => {
     if (reference.current && (shouldScrollBottom || force)) {
@@ -22,6 +23,7 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
     const _i = index || messages.findIndex((msg) => msg.id === id);
     if (_i >= 0) {
       messageRefs.current[_i].scrollIntoView({ behavior: 'smooth', block: 'start' });
+      setFocusMsg(id);
     }
   };
 
@@ -100,12 +102,16 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
                   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.whatsapp_msg_type === 'sticker' ? 'bg-transparent' : ''].join(' '),
                 })}
+            className={[
+              'whitespace-pre-wrap',
+              message.whatsapp_msg_type === 'sticker' ? 'bg-transparent' : '',
+              message.sender === 'me' ? 'whatsappme-container' : '',
+              focusMsg === message.id ? 'message-box-focus' : '',
+            ].join(' ')}
             {...(message.type === 'meetingLink'
               ? {
                   actionButtons: [

src/views/Conversations/Conversations.css

@@ -184,3 +184,28 @@
     -webkit-user-select: auto;
     -moz-user-select: auto;
 }*/
+
+@-webkit-keyframes message-box-default-focus-x {
+    from {
+        background-color: #fff;
+    }
+    to {
+        background-color: #ece5dd;
+    }
+}
+@keyframes message-box-default-focus-x {
+    from {
+        background-color: #fff;
+    }
+    to {
+        background-color: #ece5dd;
+    }
+}
+
+.chatwindow-wrapper .message-box-focus {
+    animation-iteration-count: 2;
+    -webkit-animation-iteration-count: 2;
+    -webkit-animation-duration: 1s;
+    animation-name: message-box-default-focus-x;
+    animation-duration: 1s;
+}