Global-sales/src/views/Conversations/Components/MessagesHeader.jsx

import { createContext, useContext, useEffect, useState } from 'react';
import { useConversationState } from '@/stores/ConversationContext';

import { Flex, Typography, Avatar, Alert } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import LocalTimeClock from './LocalTimeClock';

const MessagesHeader = () => {
  const { websocketOpened, websocketRetrying, websocketRetrytimes, currentConversation } = useConversationState();
  return (
    <>
      {!websocketOpened && <Alert type='error' message='断开连接' banner />}
      {websocketRetrying && websocketRetrytimes > 0 && <Alert type={'warning'} message={`正在重连, ${websocketRetrytimes}次...`} banner icon={<LoadingOutlined />} />}
      <Flex gap={16} className='p-1'>
        {currentConversation.customer_name && <Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${currentConversation.customer_name}`} />}
        <Flex flex={'1'} justify='space-between'>
          <Flex vertical={true} justify='space-between'>
            <Typography.Text strong>{currentConversation.customer_name}</Typography.Text>
            <Typography.Text>{currentConversation.whatsapp_phone_number}</Typography.Text>
          </Flex>
          <Flex vertical={true} justify='space-between'>
            <Typography.Text>{/* <LocalTimeClock /> <Typography.Text strong>{order?.location} </Typography.Text> */}</Typography.Text>
            {/* <Typography.Text>{customerDateTime}</Typography.Text> */}
          </Flex>
        </Flex>
      </Flex>
    </>
  );
};
export default MessagesHeader;