Global-sales/src/views/ChatHistory.jsx

import { useNavigate } from 'react-router-dom'
import { useRef, useEffect, useState } from 'react'
import { Row, Col, Divider, Table , Card, Button, Input, 
  Space, Empty, Radio, AutoComplete, DatePicker, Spin, List, Avatar
} from 'antd'
import {
  StarFilled, ZoomInOutlined, StarOutlined, SearchOutlined
} from '@ant-design/icons'

const { Search } = Input;
const { RangePicker } = DatePicker;

const data = [
  {
    title: 'Samantha Mohammed',
    content: 'Travel by Japan'
  },
  {
    title: 'Margarita',
    content: 'Hello! This a a big trip for our family of 16 people (ages ranging from 1- adults)'
  },
  {
    title: 'Vishnu',
    content: 'FIRST TIME TRAVEL TO VIETNAM AND CAMBODIA WITHH STAY IN A CRUISING SHIP FOR 2 NIGHTS.'
  },
  {
    title: 'Hailey',
    content: 'Disregard my first email- I was using Siri and didn\'t realize all the typos. '
  },
];

function ChatHistory() {
  
  useEffect(() => {
  }, [])
  
  return (
    <Spin spinning={false} delay={500}>
      <Space direction='vertical' style={{ width: '100%' }}>
        <Row gutter={[16, 16]} justify='start' align='middle'>
          
          <Col span={5}>
            <AutoComplete
              style={{ width: '100%' }}
              placeholder='客人'
              onChange={(value) => {
                setKeyword(value)
              }}
              filterOption={(inputValue, option) =>
                option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
              }
            />
          </Col>
        <Col span={6}>
        <Input placeholder="关键词" allowClear />
          </Col>
          
        <Col span={4}>
        <RangePicker />
          </Col>
          <Col span={2}>
            <Button icon={<SearchOutlined />} onClick={() => {
              search()
            }}>搜索</Button>
          </Col>
        </Row>
      </Space>
      <Divider plain orientation='left'></Divider>
      <Space
        direction='vertical'
        size='middle'
        style={{
          display: 'flex',
        }}
      >
        <List
          itemLayout="horizontal"
          dataSource={data}
          renderItem={(item, index) => (
            <List.Item>
              <List.Item.Meta
                avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
                title={<a href="https://ant.design">{item.title}</a>}
                description={item.content}
              />
            </List.Item>
          )}
        />
      </Space>
    </Spin>
  )
}

export default ChatHistory