发: 引用消息的发送, 显示, 读取

src/lib/msgUtils.js

@@ -31,7 +31,7 @@ export const sentMsgTypeMapped = {
       renderId: msg.id,
       to: msg.to,
       msgtype: 'text',
-      msgcontent: { body: msg.text, ...(msg.context ? { context: msg.context, message_origin: msg.message_origin } : {}) },
+      msgcontent: { body: msg.text, ...(msg.context ? { context: msg.context, message_origin: msg.message_origin.origin } : {}) },
     }),
     contentToRender: (msg) => ({
       ...msg,
@@ -39,7 +39,7 @@ export const sentMsgTypeMapped = {
       conversationid: msg.id.split('.')[0],
       ...(msg.context
         ? {
-            reply: { message: msg.message_origin.text, title: msg.message_origin.senderName || 'Reference' },
+            reply: { message: msg.message_origin.text, title: msg.message_origin.senderName || 'Reference', titleColor: "#53bdeb", },
           }
         : {}),
     }),
@@ -63,7 +63,7 @@ export const sentMsgTypeMapped = {
       conversationid: msg.id.split('.')[0],
       ...(msg.context
         ? {
-            reply: { message: msg.message_origin.text, title: msg.message_origin.senderName || 'Reference' },
+            reply: { message: msg.message_origin.text, title: msg.message_origin.senderName || 'Reference', titleColor: "#53bdeb", },
           }
         : {}),
     }),
@@ -91,7 +91,7 @@ const whatsappMsgMapped = {
   'whatsapp.inbound_message.received': {
     getMsg: (result) => {
       console.log('whatsapp.inbound_message.received', result);
-      return isEmpty(result?.whatsappInboundMessage) ? null : { ...result.whatsappInboundMessage, conversationid: result.conversationid };
+      return isEmpty(result?.whatsappInboundMessage) ? null : { ...result.whatsappInboundMessage, conversationid: result.conversationid, messageorigin: result.messageorigin };
     },
     contentToRender: (contentObj) => {
       console.log('whatsapp.inbound_message.received to render', contentObj);
@@ -165,6 +165,7 @@ export const whatsappMsgTypeMapped = {
   text: {
     type: 'text',
     data: (msg) => ({ id: msg.wamid, text: msg.text.body }),
+    renderForReply: (msg) => ({ id: msg.wamid, message: msg.text.body }),
   },
   image: {
     type: 'photo',
@@ -216,7 +217,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 || msg.reaction?.text?.body || 'Reaction', reply: { message: '{content}', title: 'React from', titleColor: '#1ba784' } }), // todo:
+    data: (msg) => ({ id: msg.wamid, text: msg.reaction?.emoji || '', }), // todo:
   },
   document: {
     type: 'file',
@@ -257,12 +258,17 @@ export const parseRenderMessageItem = (msg) => {
     whatsapp_name: msg?.customerProfile?.name || '',
     whatsapp_phone_number: msg.from,
     whatsapp_msg_type: msg.type,
-    ...(isEmpty(msg.context)
+    ...(isEmpty(msg.context) && isEmpty(msg.reaction)
       ? {}
       : {
           reply: {
-            message: `${msg.context.id}`, // todo: msg.context.text?.body || msg.context.text,
+            /**
-            title: msg?.customerProfile?.name || msg.from,
+             * reply: { message: msg.messageorigin, title: 'React from', titleColor: '#1ba784' }
+             */
+            ...(typeof whatsappMsgTypeMapped[msg?.messageorigin?.type]?.renderForReply === 'function'
+            ? whatsappMsgTypeMapped[msg.messageorigin.type].renderForReply(msg.messageorigin)
+            : {}),
+            title: '@', // todo: 按方向显示, 不要显示号码 // msg?.customerProfile?.name
             titleColor: "#53bdeb", // "#128c7e",
           },
           origin: msg.context,
@@ -279,6 +285,7 @@ export const parseRenderMessageList = (messages, conversationid = null) => {
     const msgType = msgContent.type;
     // const parseMethod = msgContent.bizType === 'whatsapp' ? cloneDeep(whatsappMsgTypeMapped) : {};
     return {
+      origin: msgContent,
       ...(whatsappMsgTypeMapped?.[msgType]?.data(msgContent) || {}),
       type: msgContent.type,
       ...(typeof whatsappMsgTypeMapped[msgType].type === 'function' ? whatsappMsgTypeMapped[msgType].type(msg) : { type: whatsappMsgTypeMapped[msgType].type || 'text' }),

src/views/Conversations/ChatWindow.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Layout, Spin, Button } from 'antd';
-import { RightCircleOutlined, RightOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { RightCircleOutlined, RightOutlined, ReloadOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
 // import { useParams, useNavigate } from 'react-router-dom';
 import MessagesHeader from './Components/MessagesHeader';
 import Messages from './Components/Messages';
@@ -52,9 +52,10 @@ const ChatWindow = () => {
 
         <Content style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}>
           <Layout className='h-full'>
-            <Header className='ant-layout-sider-light ant-card h-auto flex justify-between items-center'>
+            <Header className='ant-layout-sider-light ant-card h-auto flex justify-between gap-1 items-center'>
               <Button type='text' icon={collapsedLeft ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} onClick={() => setCollapsedLeft(!collapsedLeft)} className=' rounded-none rounded-l' />
               <MessagesHeader />
+              {/* <Button type='text' icon={<ReloadOutlined />} onClick={() => setCollapsedRight(!collapsedRight)} className='' title='最新消息记录' /> */}
               <Button type='text' icon={collapsedRight ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />} onClick={() => setCollapsedRight(!collapsedRight)} className=' rounded-none rounded-r' />
             </Header>
             <Content className="flex-grow bg-whatsapp-bg" >

src/views/Conversations/Components/ConversationsList.jsx

@@ -3,11 +3,7 @@ import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import { Button, Dropdown } from 'antd';
 import { MoreOutlined } from '@ant-design/icons';
 import { useAuthContext } from '@/stores/AuthContext';
-import {
+import { fetchOrderConversationsList, fetchConversationItemClose, fetchMessages } from '@/actions/ConversationActions';
-  fetchOrderConversationsList,
-  fetchConversationItemClose,
-  fetchMessages,
-} from '@/actions/ConversationActions';
 import { ChatList, } from 'react-chat-elements';
 import { isEmpty } from '@/utils/utils';
 import useConversationStore from '@/stores/ConversationStore';
@@ -103,7 +99,7 @@ const Conversations = () => {
   };
   const switchConversation = async (item) => {
     const messagesList = activeConversations[`${item.sn}`] || [];
-    if (isEmpty(messagesList)) {
+    if (messagesList.length < 20) {
       const data = await fetchMessages({ opisn: userId, whatsappid: item.whatsapp_phone_number });
       receivedMessageList(item.sn, data);
     }