feat: 会话过期提示 perf: 模板按钮状态

src/views/Conversations/ChatWindow.jsx

@@ -23,7 +23,7 @@ const ChatWindow = () => {
   const [collapsedRight, setCollapsedRight] = useState(false);
 
   return (
-    <Spin spinning={false} tip={'正在连接...'}>
+    <>
       <Layout hasSider className='h-screen chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 198px)', height: 'calc(100% - 198px)' }}>
         <Sider
           width={240}
@@ -44,7 +44,7 @@ const ChatWindow = () => {
 
         <Content style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)', minWidth: '360px' }}>
           <Layout className='h-full'>
-            <Header className='ant-layout-sider-light ant-card h-auto flex justify-between gap-1 items-center'>
+            <Header className='px-1 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='最新消息记录' /> */}
@@ -72,7 +72,7 @@ const ChatWindow = () => {
           <CustomerProfile />
         </Sider>
       </Layout>
-    </Spin>
+    </>
   );
 };
 

src/views/Conversations/Components/ExpireTimeClock.jsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import { Typography } from 'antd';
+import { ClockCircleOutlined } from '@ant-design/icons';
+import useConversationStore from '@/stores/ConversationStore';
+
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(relativeTime);
+
+const ExpireTimeClock = () => {
+  const currentConversation = useConversationStore((state) => state.currentConversation);
+
+  const [customerDateTime, setCustomerDateTime] = useState();
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCustomerDateTime(dayjs(currentConversation.conversation_expireTime).tz('Asia/Shanghai').fromNow());
+    }, 1000); // Update every second
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return currentConversation.conversation_expireTime ? (
+    <>
+      <Typography.Text className='text-primary'>
+        <ClockCircleOutlined className='px-1' />
+        Expire {customerDateTime}
+      </Typography.Text>
+    </>
+  ) : null;
+};
+export default ExpireTimeClock;

src/views/Conversations/Components/Input/Template.jsx

@@ -186,7 +186,7 @@ const InputTemplate = ({ mobile, disabled = false, invokeSendMessage }) => {
         trigger='click'
         open={openTemplates}
         onOpenChange={setOpenTemplates}>
-        <Button type='text' className='' icon={<MessageOutlined />} size={'middle'} disabled={false} />
+        <Button type='text' className='' icon={<MessageOutlined />} size={'middle'} disabled={disabled} />
       </Popover>
     </>
   );

src/views/Conversations/Components/InputComposer.jsx

@@ -24,6 +24,7 @@ import InputTemplate from './Input/Template';
 import InputEmoji from './Input/Emoji';
 import InputMediaUpload from './Input/MediaUpload';
 import { postUploadFileItem } from '@/actions/CommonActions';
+import ExpireTimeClock from './ExpireTimeClock';
 import dayjs from 'dayjs';
 
 const aliOSSHost = `https://haina-sale-system.oss-cn-shenzhen.aliyuncs.com/WAMedia/`;
@@ -267,7 +268,7 @@ const InputComposer = ({ mobile }) => {
       />
       <Flex justify={'space-between'} className=' bg-gray-200 p-1 rounded-b'>
         <Flex gap={4} className='*:text-primary *:rounded-none'>
-          <InputTemplate key='templates' disabled={!talkabled || textabled} invokeSendMessage={invokeSendMessage} {...{ mobile }} />
+          <InputTemplate key='templates' disabled={!talkabled} invokeSendMessage={invokeSendMessage} {...{ mobile }} />
           <InputEmoji key='emoji' disabled={!textabled} inputEmoji={addEmoji} {...{ mobile }} />
           <InputMediaUpload key={'addNewMedia'} disabled={!textabled} {...{ invokeUploadFileMessage, invokeSendUploadMessage }} />
           {/* <Button type='text' className='' icon={<YoutubeOutlined />} size={'middle'} />
@@ -276,9 +277,12 @@ const InputComposer = ({ mobile }) => {
           <Button type='text' className='' icon={<CloudUploadOutlined />} size={'middle'} />
           <Button type='text' className='' icon={<FilePdfOutlined />} size={'middle'} /> */}
         </Flex>
-        <Button key={'send-btn'} onClick={handleSendText} type='primary' size='middle' icon={<SendOutlined />} disabled={!textabled || pastedUploading}>
-          Send
-        </Button>
+        <Flex gap={4} align={'center'}>
+          <ExpireTimeClock />
+          <Button key={'send-btn'} onClick={handleSendText} type='primary' size='middle' icon={<SendOutlined />} disabled={!textabled || pastedUploading}>
+            Send
+          </Button>
+        </Flex>
       </Flex>
     </div>
   );

src/views/Conversations/Components/MessagesHeader.jsx

@@ -3,6 +3,7 @@ import useAuthStore from '@/stores/AuthStore'
 import { Flex, Typography, Avatar, Alert, Button, Tooltip, Spin } from 'antd';
 import { ReloadOutlined, ApiOutlined } from '@ant-design/icons';
 import { LoadingOutlined } from '@ant-design/icons';
+import ExpireTimeClock from './ExpireTimeClock';
 
 const MessagesHeader = () => {
   const userId = useAuthStore(state => state.loginUser.userId);
@@ -53,7 +54,7 @@ const MessagesHeader = () => {
             <Spin spinning={msgListLoading} />
           </Flex>
           <Flex vertical={true} justify='space-between'>
-            <Typography.Text>{/* <LocalTimeClock /> <Typography.Text strong>{order?.location} </Typography.Text> */}</Typography.Text>
+            <Typography.Text><ExpireTimeClock /></Typography.Text>
             {/* <Typography.Text>{customerDateTime}</Typography.Text> */}
           </Flex>
         </Flex>