style: 发送失败的消息

src/lib/msgUtils.js

@@ -268,7 +268,7 @@ export const whatsappMsgTypeMapped = {
       data: {
         id: msg.wamid,
         uri: msg.image.link,
-        width: '100%',
+        width: 'auto',
         height: 200,
         alt: msg.image.caption,
         status: {
@@ -282,7 +282,7 @@ export const whatsappMsgTypeMapped = {
     renderForReply: (msg) => ({
       id: msg.wamid,
       photoURL: msg.image.link,
-      width: '100%',
+      width: 'auto',
       height: 200,
       alt: msg.image?.caption || '',
     }),

src/views/ChatHistory.jsx

@@ -343,6 +343,7 @@ function ChatHistory() {
                         message.whatsapp_msg_type === 'sticker' ? 'bg-transparent' : '',
                         message.sender === 'me' ? 'whatsappme-container' : '',
                         focusMsg === message.id ? 'message-box-focus' : '',
+                        message.status === 'failed' ? 'failed-msg' : '',
                       ].join(' ')}
                       style={{
                         backgroundColor: message.sender === 'me' ? '#ccd4ae' : '#fff',

src/views/Conversations/Components/MessagesList.jsx

@@ -111,6 +111,7 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
               message.whatsapp_msg_type === 'sticker' ? 'bg-transparent' : '',
               message.sender === 'me' ? 'whatsappme-container' : '',
               focusMsg === message.id ? 'message-box-focus' : '',
+              message.status === 'failed' ? 'failed-msg' : '',
             ].join(' ')}
             {...(message.type === 'meetingLink'
               ? {

src/views/Conversations/Conversations.css

@@ -134,7 +134,12 @@
     content: none;
 }
 .chatwindow-wrapper .rce-mbox-photo--img img{
-    width: 100%;
+    width: auto;
+}
+.chatwindow-wrapper .failed-msg .rce-mbox-photo--img,
+.chatwindow-wrapper .failed-msg .rce-mbox-video--video
+{
+    filter: blur(2px) opacity(0.7);
 }
 .chatwindow-wrapper .rce-mbox-photo .rce-mbox-text{
     padding-left: 8px;