新消息-新增会话; style: 激活的会话; 会话新消息在列表中置顶; 检测是否超过24H

src/lib/msgUtils.js

@@ -192,7 +192,7 @@ export const whatsappMsgTypeMapped = {
 export const parseRenderMessageItem = (msg) => {
   console.log('parseRenderMessageItem', msg);
   return {
-    date: msg?.sendTime || '',
+    date: msg?.sendTime || msg?.createTime || '',
     ...(whatsappMsgTypeMapped?.[msg.type]?.data(msg) || {}),
     conversationid: msg.conversationid,
     ...(typeof whatsappMsgTypeMapped[msg.type].type === 'function' ? whatsappMsgTypeMapped[msg.type].type(msg) : { type: whatsappMsgTypeMapped[msg.type].type || 'text' }),
@@ -201,6 +201,9 @@ export const parseRenderMessageItem = (msg) => {
     // status: msg?.status || 'waiting',
     // title: msg.customerProfile.name,
     // replyButton: true,
+    customer_name: msg?.customerProfile?.name || '',
+    whatsapp_name: msg?.customerProfile?.name || '',
+    whatsapp_phone_number: msg.from,
   };
 };
 /**

src/reducers/ConversationReducer.js

@@ -38,23 +38,22 @@ const ConversationReducer = (state = initialState, action) => {
       // 清空未读
       const { conversationsList } = state;
       const targetId = action.payload.sn;
-      const newConversationList = conversationsList.map((ele) => {
-        if (String(ele.sn) === String(targetId)) {
-          return { ...ele, unread_msg_count: 0 };
-        }
-        return ele;
+      const targetIndex = conversationsList.findIndex((ele) => String(ele.sn) === String(targetId));
+      conversationsList.splice(targetIndex, 1, {
+        ...conversationsList[targetIndex],
+        unread_msg_count: 0,
       });
 
-      return { ...state, currentConversation: action.payload, conversationsList: newConversationList };
+      return { ...state, currentConversation: action.payload, conversationsList: [...conversationsList] };
     }
     case NAME_SPACE + 'SET_ACTIVE_CONVERSATIONS': {
       const { activeConversations } = state;
       return { ...state, activeConversations: { ...activeConversations, ...action.payload } };
     }
     case NAME_SPACE + 'UPDATE_SENT_MESSAGE_ITEM': {
-      console.log('UPDATE_SENT_MESSAGE_ITEM-----------------------------------------------------------------');
+      console.log('UPDATE_SENT_MESSAGE_ITEM-----------------------------------------------------------------', action);
       // 更新会话中的消息
-      const { activeConversations, conversationsList } = state;
+      const { activeConversations, conversationsList, } = state;
       const message = action.payload;
       const targetId = message.conversationid;
       const targetMsgs = (activeConversations[String(targetId)] || []).map((ele) => {
@@ -72,17 +71,18 @@ const ConversationReducer = (state = initialState, action) => {
       }
 
       // 更新列表的时间
-      const newConversationList = conversationsList.map((ele) => {
-        if (String(ele.sn) === String(targetId) && message.type !== 'error') {
-          return { ...ele, last_received_time: message.date };
-        }
-        return ele;
-      });
+      if (message.type !== 'error') {
+        const targetIndex = conversationsList.findIndex((ele) => String(ele.sn) === String(targetId));
+        conversationsList.splice(targetIndex, 1, {
+          ...conversationsList[targetIndex],
+          last_received_time: message.date,
+        });
+      }
 
       return {
         ...state,
         activeConversations: { ...state.activeConversations, [String(targetId)]: targetMsgs },
-        conversationsList: newConversationList,
+        conversationsList: [...conversationsList],
       };
     }
     case NAME_SPACE + 'RECEIVED_MESSAGE_LIST': {
@@ -97,21 +97,29 @@ const ConversationReducer = (state = initialState, action) => {
       const { activeConversations, conversationsList, currentConversation } = state;
       const { targetId, message } = action.payload;
       const targetMsgs = activeConversations[String(targetId)] || [];
-      console.log(activeConversations, String(targetId), 'sent sent sent');
-      const newConversationList = conversationsList.map((ele) => {
-        if (String(ele.sn) === String(targetId)) {
-          return {
-            ...ele,
-            last_received_time: message.date,
-            unread_msg_count: String(ele.sn) !== String(currentConversation.sn) ? ele.unread_msg_count + 1 : ele.unread_msg_count,
-          };
-        }
-        return ele;
-      });
+      const targetIndex = conversationsList.findIndex((ele) => String(ele.sn) === String(targetId));
+      const newConversation =
+        targetId !== -1
+          ? {
+              ...conversationsList[targetIndex],
+              last_received_time: message.date,
+              unread_msg_count:
+                String(targetId) !== String(currentConversation.sn) && message.sender !== 'me'
+                  ? conversationsList[targetIndex].unread_msg_count + 1
+                  : conversationsList[targetIndex].unread_msg_count,
+            }
+          : {
+              ...message,
+              sn: targetId,
+              last_received_time: message.date,
+              unread_msg_count: message.sender === 'me' ? 0 : 1,
+            };
+      conversationsList.splice(targetIndex, 1);
+      conversationsList.unshift(newConversation);
       return {
         ...state,
         activeConversations: { ...activeConversations, [String(targetId)]: [...targetMsgs, message] },
-        conversationsList: newConversationList,
+        conversationsList: [...conversationsList],
         currentConversation: {
           ...state.currentConversation,
           last_received_time: String(targetId) === String(currentConversation.sn) ? message.date : currentConversation.last_received_time,

src/views/Conversations/Components/ConversationsList.jsx

@@ -43,6 +43,7 @@ const Conversations = () => {
         // statusColor: '#ccd5ae',
         // statusColorType: 'badge',
         // statusText: 'online'
+        className: String(item.sn) === String(currentConversation.sn) ? 'text-primary underline __active' : '',
       }))
     );
 

src/views/Conversations/Components/InputComposer.jsx

@@ -9,6 +9,7 @@ import { isEmpty } from '@/utils/utils';
 import { v4 as uuid } from 'uuid';
 import { sentMsgTypeMapped } from '@/lib/msgUtils';
 import InputTemplate from './InputTemplate';
+import dayjs from 'dayjs';
 
 const InputBox = () => {
   const { loginUser } = useAuthContext();
@@ -19,6 +20,8 @@ const InputBox = () => {
 
   const talkabled = !isEmpty(currentConversation.sn) && websocketOpened;
 
+  const gt24h = currentConversation.last_received_time ? dayjs().diff(dayjs(currentConversation.last_received_time), 'hour') > 24 : true;
+
   const invokeSendMessage = (msgObj) => {
     console.log('sendMessage------------------', msgObj);
     const contentToSend = sentMsgTypeMapped[msgObj.type].contentToSend(msgObj);
@@ -49,9 +52,9 @@ const InputBox = () => {
     <div>
       <Input.TextArea
         size='large'
-        placeholder='Enter for Send, Shift+Enter for new line'
+        placeholder={gt24h ? 'The session has expired, please send a template message to say hello' : 'Enter for Send, Shift+Enter for new line'}
         rows={2}
-        disabled={!talkabled}
+        disabled={!talkabled || gt24h}
         value={textContent}
         onChange={(e) => setTextContent(e.target.value)}
         className='rounded-b-none'
@@ -67,7 +70,7 @@ const InputBox = () => {
         <Flex gap={4} className='divide-y-0 divide-x divide-solid divide-gray-500 '>
           <InputTemplate key='templates' disabled={!talkabled} invokeSendMessage={invokeSendMessage} />
         </Flex>
-        <Button key={'send-btn'} onClick={handleSendText} type='primary' size='middle' icon={<SendOutlined />} disabled={!talkabled}>
+        <Button key={'send-btn'} onClick={handleSendText} type='primary' size='middle' icon={<SendOutlined />} disabled={!talkabled || gt24h}>
           Send
         </Button>
       </Flex>