引用消息显示的颜色

src/lib/msgUtils.js

@@ -39,7 +39,12 @@ export const sentMsgTypeMapped = {
       conversationid: msg.id.split('.')[0],
       ...(msg.context
         ? {
-            reply: { message: msg.message_origin.text, title: msg.message_origin.senderName || 'Reference', titleColor: "#53bdeb", },
+            reply: {
+              message: msg.message_origin.text,
+              title: msg.message_origin.senderName || 'Reference',
+              titleColor: msg.message_origin?.senderName !== 'me' ? '#a791ff' : "#128c7e",
+              // titleColor: "#a791ff",
+            },
           }
         : {}),
     }),
@@ -63,7 +68,7 @@ export const sentMsgTypeMapped = {
       conversationid: msg.id.split('.')[0],
       ...(msg.context
         ? {
-            reply: { message: msg.message_origin.text, title: msg.message_origin.senderName || 'Reference', titleColor: "#53bdeb", },
+            reply: { message: msg.message_origin.text, title: msg.message_origin.senderName || 'Reference', titleColor: "#a791ff", },
           }
         : {}),
     }),
@@ -217,7 +222,7 @@ export const whatsappMsgTypeMapped = {
   unsupported: { type: 'system', data: (msg) => ({ text: 'Message type is currently not supported.' }) },
   reaction: {
     type: 'text',
-    data: (msg) => ({ id: msg.wamid, text: msg.reaction?.emoji || '', }), // todo:
+    data: (msg) => ({ id: msg.wamid, text: msg.reaction?.emoji || '', }),
   },
   document: {
     type: 'file',
@@ -235,8 +240,8 @@ export const whatsappMsgTypeMapped = {
       return { id: msg.wamid, text: templateDataMapped?.body?.text || templateDataMapped?.body?.parameters?.[0]?.text || '',  title: msg.template.name }
     },
     renderForReply: (msg) => {
-      const templateDataMapped = msg.template?.components ? msg.template.components.reduce((r, v) => ({...r, [v.type]: v}), {}) : null;
-      return { id: msg.wamid, message: templateDataMapped?.body?.text || templateDataMapped?.body?.parameters?.[0]?.text || '',  title: `${msg.template.name}` }
+      const templateDataMapped = msg.template?.components ? msg.template.components.reduce((r, v) => ({ ...r, [v.type]: v }), {}) : null;
+      return { id: msg.wamid, message: templateDataMapped?.body?.text || templateDataMapped?.body?.parameters?.[0]?.text || '', title: `${msg.template.name}` };
     },
   },
 };
@@ -267,11 +272,11 @@ export const parseRenderMessageItem = (msg) => {
             /**
              * reply: { message: msg.messageorigin, title: 'React from', titleColor: '#1ba784' }
              */
+            title: msg.messageorigin?.customerProfile?.name || 'me',
             ...(typeof whatsappMsgTypeMapped[msg?.messageorigin?.type]?.renderForReply === 'function'
-            ? whatsappMsgTypeMapped[msg.messageorigin.type].renderForReply(msg.messageorigin)
-            : {}),
-            title: '@', // todo: 按方向显示, 不要显示号码 // msg?.customerProfile?.name
-            titleColor: "#53bdeb", // "#128c7e",
+              ? whatsappMsgTypeMapped[msg.messageorigin.type].renderForReply(msg.messageorigin)
+              : {}),
+            titleColor: msg.messageorigin?.customerProfile?.name ? '#a791ff' : "#128c7e",
           },
           origin: msg.context,
         }),
@@ -308,11 +313,12 @@ export const parseRenderMessageList = (messages, conversationid = null) => {
         : {
             reply: {
               message: msg.messageorigin_AsJOSN.text?.body || msg.messageorigin_AsJOSN.text,
-              title: msg.messageorigin_AsJOSN.senderName || '@', // msg.messageorigin_AsJOSN.from
+              title: msg.messageorigin_AsJOSN?.customerProfile?.name || 'me', // msg.messageorigin_AsJOSN.senderName || '@',
               ...(typeof whatsappMsgTypeMapped[msg.messageorigin_AsJOSN.type]?.renderForReply === 'function'
                 ? whatsappMsgTypeMapped[msg.messageorigin_AsJOSN.type].renderForReply(msg.messageorigin_AsJOSN)
                 : {}),
-              titleColor: '#53bdeb', // "#128c7e", // todo: 原始消息的方向
+              titleColor: msg.messageorigin_AsJOSN?.customerProfile?.name ? '#a791ff' : "#128c7e",
+              // titleColor: msg.messageorigin_direction === 'inbound' ? '#a791ff' : "#128c7e",
             },
             origin: msg.messageorigin_AsJOSN,
           }),

src/views/Conversations/Components/InputComposer.jsx

@@ -71,7 +71,8 @@ const InputBox = () => {
     <div>
       {referenceMsg.id && (
         <Flex justify='space-between' className='reply-to bg-gray-100 p-1 rounded-none text-slate-500'>
-          <div className=' border-l-3 border-y-0 border-r-0 border-slate-300 border-solid pl-2 pr-1 py-1'>{referenceMsg.text}</div>
+          <div className=' border-l-3 border-y-0 border-r-0 border-slate-300 border-solid pl-2 pr-1 py-1'>
+            <span className=' text-primary pr-1 italic'>{referenceMsg.senderName}</span>{referenceMsg.text}</div>
           <Button type='text' title='取消引用' className=' rounded-none text-slate-500' icon={<CloseCircleOutlined />} size={'middle'} onClick={() => (setReferenceMsg({}))} />
         </Flex>
       )}