消息样式

src/lib/msgUtils.js

@@ -15,10 +15,11 @@ export const replaceTemplateString = (str, replacements) => {
 }
 
 export const autoLinkText = (text) => {
-  let regex = /(https?:\/\/[^\s]+)/g;
+  return text;
+  // let regex = /(https?:\/\/[^\s]+)/g;
 
-  let newText = text.replace(regex, '<a href="$1" target="_blank">$1</a>');
-  return newText;
+  // let newText = text.replace(regex, '<a href="$1" target="_blank">$1</a>');
+  // return newText;
 }
 /**
  *
@@ -298,7 +299,7 @@ export const parseRenderMessageItem = (msg) => {
     whatsapp_name: msg?.customerProfile?.name || '',
     whatsapp_phone_number: msg.from,
     whatsapp_msg_type: msg.type,
-    ...((isEmpty(msg.context) && isEmpty(msg.reaction)) || msg.context.forwarded === true
+    ...((isEmpty(msg.context) && isEmpty(msg.reaction)) || msg.context?.forwarded === true
       ? {}
       : {
           reply: {
@@ -319,7 +320,7 @@ export const parseRenderMessageItem = (msg) => {
  * 从数据库读取的记录
  */
 export const parseRenderMessageList = (messages, conversationid = null) => {
-  return messages.map((msg) => {
+  return messages.map((msg, i) => {
     const msgContent = msg.msgtext_AsJOSN;
     msgContent.template = msg.msgtype === 'template' ? { ...msgContent.template, ...msg.template_AsJOSN } : {};
     const msgType = msgContent.type;
@@ -341,14 +342,15 @@ export const parseRenderMessageList = (messages, conversationid = null) => {
             dateString: msgStatusRenderMapped[msgContent?.status || 'failed'] === 'failed' ? `发送失败 ${whatsappError?.[msgContent.errorCode] || msgContent.errorMessage} ❌` : '',
           }
         : {}),
-      ...(isEmpty(msg.messageorigin_AsJOSN) && isEmpty(msgContent.context)
+      ...((isEmpty(msg.messageorigin_AsJOSN) && isEmpty(msgContent.context))
+      // ...((isEmpty(msg.messageorigin_AsJOSN) || isEmpty(msgContent.context))
         ? {}
         : {
             reply: {
-              message: msg.messageorigin_AsJOSN.text?.body || msg.messageorigin_AsJOSN.text,
-              title: msg.messageorigin_AsJOSN?.customerProfile?.name || msg.messageorigin_AsJOSN.senderName || 'me',
-              ...(typeof whatsappMsgTypeMapped[msg.messageorigin_AsJOSN.type]?.renderForReply === 'function'
-                ? whatsappMsgTypeMapped[msg.messageorigin_AsJOSN.type].renderForReply(msg.messageorigin_AsJOSN)
+              message: msg.messageorigin_AsJOSN?.text?.body || msg.messageorigin_AsJOSN?.text,
+              title: msg.messageorigin_AsJOSN?.customerProfile?.name || msg.messageorigin_AsJOSN?.senderName || 'me',
+              ...(typeof whatsappMsgTypeMapped[msg.messageorigin_AsJOSN?.type]?.renderForReply === 'function'
+                ? whatsappMsgTypeMapped[msg.messageorigin_AsJOSN?.type].renderForReply(msg.messageorigin_AsJOSN)
                 : {}),
               // titleColor: msg.messageorigin_AsJOSN?.customerProfile?.name ? '#a791ff' : "#128c7e",
               titleColor: msg.messageorigin_direction === 'inbound' ? '#a791ff' : "#128c7e",

src/views/Conversations/Components/Messages.jsx

@@ -55,11 +55,13 @@ const Messages = () => {
   };
 
   const RenderText = memo(function renderText({str}) {
-    const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji}\uFE0F?)/gu);
+    const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji_Presentation})/gmu);
+    // const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji}\uFE0F?|\b\d+\b)/gu);
     return (
       <>
         {(parts || []).map((part, index) => {
-          if (/\p{Emoji}\uFE0F?/u.test(part)) {
+          // if (/\p{Emoji}\uFE0F?/u.test(part)) {
+          if (/\p{Emoji_Presentation}/u.test(part)) {
             const code = [...part].map((e) => e.codePointAt(0).toString(16)).join(`-`);
             return <Emoji key={`${part}${index}${code}`} unified={code} size={24} emojiStyle='facebook' />;
           } else if (/https?:\/\/[\S]+/gi.test(part)) {
@@ -68,8 +70,10 @@ const Messages = () => {
                 {part}
               </a>
             );
+          // } else if (part.trim() !== '') {
+          //   return <span key={`${part}${index}`}>{part}</span>;
           } else {
-            return <span key={`${part}${index}`}>{part}</span>;
+            return <>{part}</>; // <span key={`${part}${index}`}>{part}</span>;
           }
         })}
       </>

src/views/Conversations/Conversations.css

@@ -18,6 +18,9 @@
     background: linear-gradient(0deg,#00000014,#0000);
     color: #00000073;
 }
+.chatwindow-wrapper .rce-mbox-text {
+    font-family: 'Twemoji Mozilla', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji', sans-serif;
+}
 .chatwindow-wrapper .rce-mbox-text a{
     color: #4f81a1;
 }