Global-sales/src/views/Conversations/ChatWindow.jsx

import { useEffect, useState } from 'react';
import { useParams, useNavigate } from "react-router-dom";
import { Layout, List, Avatar, Flex, Typography, Spin } from 'antd';
import Messages from './Components/Messages';
import InputBox from './Components/InputBox';
import ConversationsList from './Components/ConversationsList';
import CustomerProfile from './Components/CustomerProfile';
import LocalTimeClock from './Components/LocalTimeClock';

import { useConversationContext } from '@/stores/Conversations/ConversationContext';

import './Conversations.css';
import { useAuthContext } from '@/stores/AuthContext.js';

const { Sider, Content, Header, Footer } = Layout;

/**
 *
 */
const ChatWindow = (() => {
	const { order_sn } = useParams();
  const { loginUser: currentUser } = useAuthContext();
  const { errors, sendMessage, currentConversation, customerOrderProfile: orderInfo, getCustomerProfile } = useConversationContext();
  const { quotes, contact, last_contact, ...order } = orderInfo;

  // console.log(order_sn, currentUser);
  useEffect(() => {
    if (order_sn) {
      getCustomerProfile(order_sn);
    }

    return () => {};
  }, [order_sn]);


  return (
    <Spin spinning={false} tip={'正在连接...'} >
      <Layout className='h-screen chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 198px)', height: 'calc(100% - 198px)' }}>
        <Sider width={240} theme={'light'} className='h-full overflow-y-auto' style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}>
          <ConversationsList />
        </Sider>

        <Content style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}>
          <Layout className='h-full'>
            <Header className='ant-layout-sider-light ant-card p-1 h-auto'>
              <Flex gap={16}>
                <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>
            </Header>
            <Content style={{ maxHeight: '74vh', height: '74vh' }}>
              <div className='h-full overflow-y-auto'>
                <Messages />
              </div>
            </Content>
            <Footer className='ant-layout-sider-light p-1'>
              <InputBox onSend={(v) => sendMessage(v)} />
            </Footer>
          </Layout>
          {/* <InputBox onSend={(v) => sendMessage(v)} /> */}
        </Content>

        <Sider width={300} theme={'light'} className='h-full overflow-y-auto' style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}>
          <CustomerProfile customer={{}} />
        </Sider>
      </Layout>
    </Spin>
  );
});

export default ChatWindow;