From e1ae93822b3cb610cdd08bcb180fbe08d1cbd824 Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Fri, 15 Mar 2024 17:43:51 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=82=B9=E5=87=BB=E5=BC=95=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/msgUtils.js                           |  2 +-
 src/views/ChatHistory.jsx                     |  3 +++
 .../Conversations/Components/MessagesList.jsx | 10 ++++++--
 src/views/Conversations/Conversations.css     | 25 +++++++++++++++++++
 4 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/lib/msgUtils.js b/src/lib/msgUtils.js
index 853bc96..02265c2 100644
--- a/src/lib/msgUtils.js
+++ b/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: {
diff --git a/src/views/ChatHistory.jsx b/src/views/ChatHistory.jsx
index 6f16219..21779a2 100644
--- a/src/views/ChatHistory.jsx
+++ b/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',
diff --git a/src/views/Conversations/Components/MessagesList.jsx b/src/views/Conversations/Components/MessagesList.jsx
index cac27f0..a93497b 100644
--- a/src/views/Conversations/Components/MessagesList.jsx
+++ b/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: [
diff --git a/src/views/Conversations/Conversations.css b/src/views/Conversations/Conversations.css
index 7b9b201..5b312be 100644
--- a/src/views/Conversations/Conversations.css
+++ b/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;
+}