perf: 在线聊天: 显示过期时间

src/stores/ConversationStore.js

@@ -255,11 +255,12 @@ const messageSlice = (set, get) => ({
 
     const targetIndex = conversationsList.findIndex((ele) => String(ele.sn) === String(targetId));
     let newConversations = [];
-    if (targetIndex !== -1 && message.status === 'received') { // 'delivered'
+    if (targetIndex !== -1) { // 'delivered'
       // 更新列表的时间
       conversationsList.splice(targetIndex, 1, {
         ...conversationsList[targetIndex],
-        last_received_time: message.deliverTime, // todo: 需要+8 hours
+        last_received_time: message.status === 'received' ? message.deliverTime : conversationsList[targetIndex].last_received_time, // todo: 需要+8 hours
+        conversation_expiretime: message?.conversation?.expireTime || conversationsList[targetIndex].conversation_expiretime || '', // 保留使用UTC时间
       });
     } else if (targetIndex === -1) {
       // 当前客户端不存在的会话 todo: 设置为当前(在WhatsApp返回号码不一致时)
@@ -273,6 +274,7 @@ const messageSlice = (set, get) => ({
         whatsapp_name: message?.senderName || message?.sender || '',
         customer_name: message?.senderName || message?.sender || '',
         whatsapp_phone_number: message.from,
+        conversation_expiretime: message?.conversation?.expireTime || '', // 保留使用UTC时间
       }];
     }
 

src/views/Conversations/Components/ConversationsList.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useRef } from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import { Dropdown, Input } from 'antd';
-import { fetchOrderConversationsList, fetchConversationItemClose, fetchMessages, MESSAGE_PAGE_SIZE, } from '@/actions/ConversationActions';
+import { fetchOrderConversationsList, fetchConversationItemClose, } from '@/actions/ConversationActions';
 import { ChatItem } from 'react-chat-elements';
 import { isEmpty } from '@/utils/utils';
 import useConversationStore from '@/stores/ConversationStore';

src/views/Conversations/Components/ExpireTimeClock.jsx

@@ -12,23 +12,33 @@ dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(relativeTime);
 
-const ExpireTimeClock = () => {
+const ExpireTimeClock = ({ expireTime }) => {
-  const currentConversation = useConversationStore((state) => state.currentConversation);
+  // const expireTime = useConversationStore((state) => state.currentConversation.conversation_expiretime);
 
-  const [customerDateTime, setCustomerDateTime] = useState();
+  const [customerDateTime, setCustomerDateTime] = useState('');
+  const [isExpired, setIsExpired] = useState(false);
 
   useEffect(() => {
     const intervalId = setInterval(() => {
-      setCustomerDateTime(dayjs(currentConversation.conversation_expireTime).tz('Asia/Shanghai').fromNow());
+      // .tz('Asia/Shanghai') UTC 时间转换成 Asia/Shanghai 时区时间 GMT+8
-    }, 1000); // Update every second
+      setCustomerDateTime(dayjs(expireTime).add(8, 'hours').fromNow());
+    }, 1000);
     return () => clearInterval(intervalId);
-  }, []);
+  }, [expireTime]);
 
-  return currentConversation.conversation_expireTime ? (
+  useEffect(() => {
+    const _ago = customerDateTime.slice(-3) === 'ago';
+    setIsExpired(_ago);
+
+    return () => {};
+  }, [customerDateTime]);
+
+
+  return expireTime && !isExpired ? (
     <>
-      <Typography.Text className='text-primary'>
+      <Typography.Text className={'text-primary'}>
         <ClockCircleOutlined className='px-1' />
-        Expire {customerDateTime}
+        {isExpired ? 'Expired' : 'Expire'} {customerDateTime}
       </Typography.Text>
     </>
   ) : null;

src/views/Conversations/Components/InputComposer.jsx

@@ -216,10 +216,10 @@ const InputComposer = ({ mobile }) => {
     <div>
       {referenceMsg.id && (
         <Flex justify='space-between' className='reply-to bg-gray-100 p-1 rounded-none text-slate-500'>
-          <div className='referrer-msg border-l-3 border-y-0 border-r-0 border-slate-300 border-solid pl-2 pr-1 py-1'>
+          <div className='flex flex-col referrer-msg 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 align-top'>{referenceMsg.senderName}</span>
             {referenceMsg.type === 'photo' && <Image width={100} src={referenceMsg.data.uri} />}
-            <span className='px-1'>{referenceMsg.originText}</span>
+            <span className='px-1 whitespace-pre-wrap'>{referenceMsg.originText}</span>
           </div>
           <Button type='text' title='取消引用' className=' rounded-none text-slate-500' icon={<CloseCircleOutlined />} size={'middle'} onClick={() => setReferenceMsg({})} />
         </Flex>
@@ -278,7 +278,7 @@ const InputComposer = ({ mobile }) => {
           <Button type='text' className='' icon={<FilePdfOutlined />} size={'middle'} /> */}
         </Flex>
         <Flex gap={4} align={'center'}>
-          <ExpireTimeClock />
+          <ExpireTimeClock expireTime={currentConversation.conversation_expiretime} />
           <Button key={'send-btn'} onClick={handleSendText} type='primary' size='middle' icon={<SendOutlined />} disabled={!textabled || pastedUploading}>
             Send
           </Button>

src/views/Conversations/Components/MessagesHeader.jsx

@@ -54,7 +54,7 @@ const MessagesHeader = () => {
             <Spin spinning={msgListLoading} />
           </Flex>
           <Flex vertical={true} justify='space-between'>
-            <Typography.Text><ExpireTimeClock /></Typography.Text>
+            <Typography.Text><ExpireTimeClock expireTime={currentConversation.conversation_expiretime} /></Typography.Text>
             {/* <Typography.Text>{customerDateTime}</Typography.Text> */}
           </Flex>
         </Flex>