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

src/stores/ConversationStore.js

@@ -260,6 +260,7 @@ const messageSlice = (set, get) => ({
       conversationsList.splice(targetIndex, 1, {
         ...conversationsList[targetIndex],
         last_received_time: message.deliverTime, // 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,19 +12,20 @@ dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(relativeTime);
 
-const ExpireTimeClock = () => {
-  const currentConversation = useConversationStore((state) => state.currentConversation);
+const ExpireTimeClock = ({ expireTime }) => {
+  // const expireTime = useConversationStore((state) => state.currentConversation.conversation_expiretime);
 
   const [customerDateTime, setCustomerDateTime] = useState();
 
   useEffect(() => {
     const intervalId = setInterval(() => {
-      setCustomerDateTime(dayjs(currentConversation.conversation_expireTime).tz('Asia/Shanghai').fromNow());
-    }, 1000); // Update every second
+      // .tz('Asia/Shanghai') UTC 时间转换成 Asia/Shanghai 时区时间 GMT+8
+      setCustomerDateTime(dayjs(expireTime).add(8, 'hours').fromNow());
+    }, 1000);
     return () => clearInterval(intervalId);
-  }, []);
+  }, [expireTime]);
 
-  return currentConversation.conversation_expireTime ? (
+  return expireTime ? (
     <>
       <Typography.Text className='text-primary'>
         <ClockCircleOutlined className='px-1' />

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>