Haina
/
Global-sales
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ChatHistory

Browse Source
dev/chat
Lei OT 1 year ago
parent 225d5ab4a0
commit 1d1207d155
1 changed files with 153 additions and 139 deletions
Show Stats Download Patch File Download Diff File

110
src/views/ChatHistory.jsx
Unescape Escape View File

@ -1,88 +1,86 @@
import { useNavigate } from 'react-router-dom'
import { useNavigate } from 'react-router-dom';
import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { Row, Col, Divider, Table , Card, Button, Input,
Space, Empty, Radio, Select, DatePicker, Form, List, Avatar
} from 'antd'
import {
StarFilled, ZoomInOutlined, StarOutlined, SearchOutlined
} from '@ant-design/icons'
import { Row, Col, Divider, Table, Card, Button, Input, Flex, Layout, Space, Empty, Radio, Select, DatePicker, Form, List, Avatar } from 'antd';
import { StarFilled, ZoomInOutlined, StarOutlined, SearchOutlined } from '@ant-design/icons';
import { ChatList, ChatItem, MessageBox } from 'react-chat-elements';
const { Search } = Input
const { RangePicker } = DatePicker
const { Sider, Content, Header, Footer } = Layout;
const { Search } = Input;
const { RangePicker } = DatePicker;
const data = [
{
title: 'Ann',
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=0',
msgTime: '03-04 13:45:29',
content: 'Hi, this is Ann from China Highlights travel and it is my pleasure to help your Beijing trip. I have sent you an email with the general idea about you trip. Please check it and if any question or new idea just let me know. We are specailized in customizing tour and I would like to work with you to create a tour itinerary that you like. Look forward to your reply.'
content:
'Hi, this is Ann from China Highlights travel and it is my pleasure to help your Beijing trip. I have sent you an email with the general idea about you trip. Please check it and if any question or new idea just let me know. We are specailized in customizing tour and I would like to work with you to create a tour itinerary that you like. Look forward to your reply.',
},
{
title: 'David Azhari',
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=2',
msgTime: '03-04 16:33:08',
content: 'Hi! I just replied to your email saying that I have a few questions and notes'
content: 'Hi! I just replied to your email saying that I have a few questions and notes',
},
{
title: 'David Azhari',
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=2',
msgTime: '03-04 16:33:34',
content: 'So first, is it possible for you guys to write a PU Invitation letter for visas or no?'
content: 'So first, is it possible for you guys to write a PU Invitation letter for visas or no?',
},
{
title: 'Ann',
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=0',
msgTime: '03-04 16:33:41',
content: 'you prefer we discuss here or go on by mail ?'
content: 'you prefer we discuss here or go on by mail ?',
},
{
title: 'David Azhari',
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=2',
msgTime: '03-04 16:34:03',
content: 'I prefer by mail if it’s ok with you'
content: 'I prefer by mail if it’s ok with you',
},
{
title: 'Ann',
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=0',
msgTime: '03-04 16:34:28',
content: 'both is okay ,I am typing mail to you now lol and receive your message here.'
content: 'both is okay ,I am typing mail to you now lol and receive your message here.',
},
{
title: 'David Azhari',
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=2',
msgTime: '03-05 02:56:37',
content: 'Ok thank you so much'
content: 'Ok thank you so much',
},
{
title: 'Ann',
avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=0',
msgTime: '03-04 16:44:03',
content: 'you are welcome I have sent the mail to you ,please check.it is my pleasure to assist you with your tour.'
content: 'you are welcome I have sent the mail to you ,please check.it is my pleasure to assist you with your tour.',
},
]
];
// eslint-disable-next-line react/display-name
const SearchForm = memo(function ({ onSubmit }) {
const [form] = Form.useForm()
const [form] = Form.useForm();
function handleSubmit(values) {
onSubmit?.(values)
onSubmit?.(values);
}
return (
<Form
layout={'inline'}
form={form}
initialValues={{ }}
initialValues={{}}
onFinish={handleSubmit}
style={{
maxWidth: 'none',
}}
>
<Form.Item label='顾问' name='travel' style={{width: '200px'}}>
}}>
<Form.Item label='顾问' name='travel' style={{ width: '200px' }}>
<Select
showSearch
placeholder='请选择'
optionFilterProp='children'
filterOption={(input, option) =>
(option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
options={[
{
value: '杨新玲',
@ -115,13 +113,12 @@ const SearchForm = memo(function ({ onSubmit }) {
]}
/>
</Form.Item>
<Form.Item label='客人' name='orderLabel' style={{width: '200px'}}>
<Form.Item label='客人' name='orderLabel' style={{ width: '200px' }}>
<Select
showSearch
placeholder='请选择'
optionFilterProp='children'
filterOption={(input, option) =>
(option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
options={[
{
value: 'Denise',
@ -172,45 +169,62 @@ const SearchForm = memo(function ({ onSubmit }) {
<Form.Item label='日期' name='startDate'>
<RangePicker />
</Form.Item>
<Form.Item >
<Button type='primary' htmlType='submit'>搜索</Button>
<Form.Item>
<Button type='primary' htmlType='submit'>
搜索
</Button>
</Form.Item>
</Form>
)
})
);
});
function ChatHistory() {
const [formValues, setFormValues] = useState({})
const [formValues, setFormValues] = useState({});
const handleSubmit = useCallback((values) => {
setFormValues({...values})
}, [])
setFormValues({ ...values });
}, []);
return (
<>
<SearchForm onSubmit={handleSubmit} />
<Divider plain orientation='left'></Divider>
<div style={{maxWidth: '800px'}}>
<Layout hasSider className='h-screen chathistory-wrapper' style={{ maxHeight: 'calc(100% - 279px)', height: 'calc(100% - 279px)' }}>
<Sider width={240} theme={'light'} className='h-full overflow-y-auto' style={{ maxHeight: 'calc(100vh - 279px)', height: 'calc(100vh - 279px)' }}>
<ChatList
className={'__active text-primary '}
dataSource={[
{
alt: 'Jane',
title: 'Jane',
date: new Date(),
letterItem: { id: 'x1', letter: 'Jane' },
},
]}
/>
</Sider>
<Content style={{ maxHeight: 'calc(100vh - 279px)', height: 'calc(100vh - 279px)', minWidth: '360px' }}>
<div className='h-full relative'>
<List
loading={false}
loadMore={() => {
console.log('load more');
}}
className='h-full overflow-y-auto px-2'
itemLayout='vertical'
dataSource={data}
renderItem={(item, index) => (
<List.Item
>
<List.Item.Meta
avatar={<Avatar src={item.avatarUrl} />}
title={<a href='https://ant.design'>{item.title}</a>}
description={item.msgTime}
/>
<List.Item>
<List.Item.Meta avatar={<Avatar src={item.avatarUrl} />} title={item.title} description={item.msgTime} />
<div>{item.content}</div>
</List.Item>
)}
/>
</div>
</Content>
</Layout>
</>
)
);
}
export default ChatHistory
export default ChatHistory;

Write Preview
Loading…
Cancel
Save