perf: channels logo

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

@@ -11,12 +11,13 @@ const BubbleEmail = ({ onOpenEditor, onOpenEmail, ...message  }) => {
   const RenderText = memo(function renderText({ className, email, sender }) {
     return (
       <div onClick={() => handlePreview(message)} className={`text-sm leading-5 emoji-text whitespace-pre-wrap cursor-pointer  ${className}`} key={'msg-text'}>
-        {sender === 'me' && <div><b>From: </b>{email.from}</div>}
-        <div><b>To: </b>{email.to}</div>
+        {/* {sender === 'me' && <div><b>From: </b>{email.from}</div>} */}
+        {/* <div><b>To: </b>{email.to}</div> */}
         <div ><b>Subject: </b>{email.subject}</div>
         <hr className='border-0 border-solid border-b border-neutral-400'/>
         <div className='line-clamp-2 text-neutral-600'>{email.abstract}</div>
-      </div>
+        <div className=' text-neutral-500 text-xs italic'>{email.coli_id ? `订单: ${email.coli_id}` : '未绑定订单'}</div>
+        </div>
     );
   });
   const handlePreview = (message) => {
@@ -47,15 +48,19 @@ const BubbleEmail = ({ onOpenEditor, onOpenEmail, ...message  }) => {
       {...message}
       key={`${message.from}.${message.id}`}
       type='text'
-      title={ message.sender !== 'me' &&
+      title={
         <>
           <MailOutlined className='text-indigo-600' />
           <span className={`pl-2 ${message.sender === 'me' ? '' : 'text-indigo-600'}`}>
+            {message.sender !== 'me' ?
+            <>
             <b>From: </b>
             <span>
               {/* {message?.emailOrigin?.fromName}&nbsp;&lt;{message?.emailOrigin.fromEmail}&gt; */}
               {message.msgOrigin?.from}
             </span>
+            </> : <><b>To: </b>{message.msgOrigin?.to}</>
+            }
           </span>
         </>
       }

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

@@ -6,6 +6,7 @@ import { groupBy, isEmpty } from '@/utils/commons';
 import useConversationStore from '@/stores/ConversationStore';
 import { useShallow } from 'zustand/react/shallow';
 import { WABIcon } from '@/components/Icons';
+import ChannelLogo from './ChannelLogo';
 
 const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, setNewChatFormValues, scrollToMessage, focusMsg, ...message }) => {
   const { message: appMessage } = App.useApp();
@@ -112,9 +113,12 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
             // styles: { backgroundColor: '#ccd4ae' },
             notchStyle: { fill: '#ccd4ae' }, // todo: channel[WhatsApp] color '#d9fdd3'
             replyButton: ['text', 'document', 'image'].includes(message.whatsapp_msg_type) && message.status !== 'failed' ? true : false,
+            // title: <><WABIcon/>&nbsp;Global Highlights</>, // test: 0
+            title: <><ChannelLogo channel={message.msg_source} />&nbsp;Global Highlights</>,
           }
-        : {})}
-      // notch={false}
+        : {
+          title: <><ChannelLogo channel={message.msg_source} />{message.title}</>,
+        })}
       className={[
         'whitespace-pre-wrap',
         message.whatsapp_msg_type === 'sticker' ? 'bg-transparent' : '',

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

@@ -7,7 +7,8 @@ const ChannelLogo = ({channel}) => {
   if (Array.isArray(channel)) {
     channel = channel[channel.length - 1];
   }
-  switch (channel) {
+  const _channel = channel.toLowerCase();
+  switch (_channel) {
     case 'waba':
       return <WABIcon key={channel} className='text-whatsapp' />;
     case 'wa':