style: 发送失败的消息

src/views/ChatHistory.jsx

@@ -208,7 +208,7 @@ function ChatHistory() {
     return () => {};
   }, [formValues]);
 
-  const RenderText = memo(function renderText({ str }) {
+  const RenderText = memo(function renderText({ str, className }) {
     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) || [];
@@ -224,7 +224,7 @@ function ChatHistory() {
       return prev;
     }, []);
     return (
-      <span className={`text-base leading-5 emoji-text ${extraClass}`}>
+      <span className={`text-base leading-5 emoji-text ${className} ${extraClass} `}>
         {(objArr || []).map((part, index) => {
           if (part.type === 'link') {
             return (
@@ -335,7 +335,7 @@ function ChatHistory() {
                       onTitleClick={() => handlePreview(message)}
                       notch={false}
                       title={message.whatsapp_msg_type === 'text' ? '' : message.title}
-                      text={<RenderText str={message?.text || ''} />}
+                      text={<RenderText str={message?.text || ''} className={message.status === 'failed' ? 'line-through text-neutral-400' : ''} />}
                       copiableDate={true}
                       dateString={message.dateString || message.localDate}
                       className={[

src/views/Conversations/Components/MessagesList.jsx

@@ -29,7 +29,7 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
 
   useEffect(scrollToBottom, [messages]);
 
-  const RenderText = memo(function renderText({ str }) {
+  const RenderText = memo(function renderText({ str, className }) {
     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) || [];
@@ -45,7 +45,7 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
       return prev;
     }, []);
     return (
-      <span className={`text-base leading-5 emoji-text whitespace-pre-wrap ${extraClass}`}>
+      <span className={`text-base leading-5 emoji-text whitespace-pre-wrap ${className} ${extraClass}`}>
         {(objArr || []).map((part, index) => {
           if (part.type === 'link') {
             return (
@@ -96,7 +96,7 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
             onReplyMessageClick={() => scrollToMessage(message.reply.id)}
             onOpen={() => handlePreview(message)}
             onTitleClick={() => handlePreview(message)}
-            text={<RenderText str={message?.text || ''} />}
+            text={<RenderText str={message?.text || ''} className={message.status === 'failed' ? 'line-through text-neutral-400' : ''} />}
             {...(message.sender === 'me'
               ? {
                   styles: { backgroundColor: '#ccd4ae' },