perf: WhatsApp消息显示接收的对象

todo: 引用消息时账户处理

src/channel/bubbleMsgUtils.js

@@ -651,7 +651,7 @@ export const parseRenderMessageItem = (msg) => {
     customer_name: msg?.customerProfile?.name || '',
     whatsapp_name: msg?.customerProfile?.name || '',
     whatsapp_phone_number: isEmpty(msg?.customerProfile) ? msg.to : msg.from,
-    whatsapp_msg_type: msg.msg_source==='WABA' ? msg.type : '',
+    whatsapp_msg_type: (msg.msg_source || 'WABA') === 'WABA' ? msg.type : '', // 1.0接口没有msg_source
     statusCN: msgStatusRenderMappedCN[msg?.status || 'failed'],
     statusTitle: msgStatusRenderMappedCN[msg?.status || 'failed'],
     replyButton: ['text', 'document', 'image', 'email'].includes(msg.type) && (msg?.status || '') !== 'failed',
@@ -671,6 +671,7 @@ export const parseRenderMessageItem = (msg) => {
           },
           origin: msg.context,
         }),
+    msg_source: msg.msg_source,
   };
 };
 /**

src/views/Conversations/Online/Components/BubbleIM.jsx

@@ -17,7 +17,7 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
     setNewChatModalVisible(true);
     setNewChatFormValues((prev) => ({ ...prev, phone_number: wa_id, name: wa_name }));
   };
-  const RenderText = memo(function renderText({ str, className, template }) {
+  const RenderText = memo(function renderText({ str, className, template, message }) {
     let headerObj, footerObj, buttonsArr;
     if (!isEmpty(template) && !isEmpty(template.components)) {
       const componentsObj = groupBy(template.components, (item) => item.type);
@@ -43,6 +43,8 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
       }
       return prev;
     }, []);
+
+    const receivedMsgFooter = message.sender === 'me' ? '' : WABAccountsMapped[message.msgOrigin.to]?.verifiedName;
     return (
       <span className={`text-sm leading-5 emoji-text whitespace-pre-wrap ${className} ${extraClass}`} key={'msg-text'}>
         {headerObj ? (
@@ -62,19 +64,25 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
               <a href={part.key} target='_blank' key={`${part.key}${index}`} rel='noreferrer' className='text-sm'>
                 {part.key}
               </a>
-            );
+            )
           } else if (part.type === 'number') {
             return (
               <a key={`${part.key}${index}`} className='text-sm' onClick={() => openNewChatModal({ wa_id: part.key, wa_name: part.key })}>
                 {part.key}
               </a>
-            );
+            )
           } else {
             // if (part.type === 'emoji')
-            return part.key;
+            return part.key
           }
         })}
         {footerObj ? <div className=' text-neutral-500'>{footerObj.text}</div> : null}
+        {receivedMsgFooter ? (
+          <div className='text-right border-0 pt-[2px] border-t-slate-200 border-t border-solid  text-xs text-neutral-500'>
+            <ChannelLogo channel={message.msg_source} className='text-xs w-3 h-3 ' />
+            <span className='italic'>{receivedMsgFooter}</span>
+          </div>
+        ) : null}
         {buttonsArr && buttonsArr.length > 0 ? (
           <div className='flex flex-row gap-1'>
             {buttonsArr.map((btn, index) =>
@@ -90,12 +98,12 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
                 <Button className='text-blue-500' size={'small'} key={btn.type}>
                   {btn.text}
                 </Button>
-              )
+              ),
             )}
           </div>
         ) : null}
       </span>
-    );
+    )
   });
   return (
     <MessageBox
@@ -107,7 +115,7 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
       onOpen={() => handlePreview(message)}
       onTitleClick={() => handlePreview(message)}
       // title={<div className='flex justify-around items-center gap-1'><WABIcon />{message.title}</div>}
-      text={<RenderText str={message?.text || ''} className={message.status === 'failed' ? 'line-through text-neutral-400' : ''} template={message.template} />}
+      text={<RenderText str={message?.text || ''} className={message.status === 'failed' ? 'line-through text-neutral-400' : ''} template={message.template} message={message} />}
       replyButton={['text', 'document', 'image'].includes(message.whatsapp_msg_type)}
       {...(message.sender === 'me'
         ? {
@@ -117,7 +125,7 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
             title: <><ChannelLogo channel={message.msg_source} />&nbsp;{WABAccountsMapped[message.from]?.verifiedName}</>,
           }
         : {
-          title: <>&nbsp;<ChannelLogo channel={message.msg_source} />&nbsp;{message.title}</>,
+          // title: <>&nbsp;<ChannelLogo channel={message.msg_source} />&nbsp;{message.title}</>,
         })}
       className={[
         'whitespace-pre-wrap',

src/views/Conversations/Online/Components/ChannelLogo.jsx

@@ -2,7 +2,7 @@ import React, {  } from 'react';
 import { WhatsAppOutlined, MailOutlined } from '@ant-design/icons';
 import { WABIcon,  } from '@/components/Icons';
 
-const ChannelLogo = ({channel}) => {
+const ChannelLogo = ({channel, className, ...props}) => {
   // if is array, get last
   if (Array.isArray(channel)) {
     channel = channel[channel.length - 1];
@@ -10,14 +10,14 @@ const ChannelLogo = ({channel}) => {
   const _channel = (channel || '').toLowerCase();
   switch (_channel) {
     case 'waba':
-      return <WABIcon key={channel} className='text-whatsapp' />;
+      return <WABIcon key={channel} className={`text-whatsapp ${className}  `} />;
     case 'wa':
-      return <WhatsAppOutlined key={channel} className='text-whatsapp' />;
+      return <WhatsAppOutlined key={channel} className={`text-whatsapp ${className}  `} />;
     case 'email':
-      return <MailOutlined key={channel} className='text-indigo-500' />
+      return <MailOutlined key={channel} className={`text-indigo-500 ${className} `} />
     default:
-      // return <MailOutlined key={'channel'} className='text-indigo-500' />
-      return <WABIcon key={channel} className='text-whatsapp' />;
+      // return <MailOutlined key={'channel'} className={`text-indigo-500 ${className} `} />
+      return <WABIcon key={channel} className={`text-whatsapp ${className}  `} />;
   }
 }
 export default ChannelLogo;