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

.

Browse Source
dev/chat
Lei OT 1 year ago
parent 9269b362ac
commit 54c2364ac2
3 changed files with 179 additions and 104 deletions
Show Stats Download Patch File Download Diff File

36
src/actions/ConversationActions.js
Unescape Escape View File

@ -17,7 +17,8 @@ export const fetchTemplates = async () => {
* @param {object} params { opisn }
*/
export const fetchConversationsList = async (params) => {
const { result: data } = await fetchJSON(`${API_HOST}/getconversations`, params);
const { errcode, result: data } = await fetchJSON(`${API_HOST}/getconversations`, params);
if (errcode !== 0) return [];
const list = (data || []).map((ele) => ({ ...ele, customer_name: `${ele.whatsapp_name || ''}`.trim(), whatsapp_name: `${ele.whatsapp_name || ''}`.trim() }));
return list;
};
@ -72,3 +73,36 @@ export const fetchCleanUnreadMsgCount = async (params) => {
* ------------------------------------------------------------------------------------------------
* 历史记录
*/
/**
* @param {object} params { search, from_date, end_date, whatsapp_id, opisn, coli_id, msg_type }
* @todo msg_type
*/
export const fetchConversationsSearch = async (params) => {
const { errcode, result: data } = await fetchJSON(`${API_HOST}/conversation_search`, params);
const list =
errcode !== 0
? []
: (data || []).map((ele) => ({
...ele,
customer_name: `${ele.whatsapp_name || ''}`.trim(),
whatsapp_name: `${ele.whatsapp_name || ''}`.trim(),
matchMsgList: parseRenderMessageList((ele.msglist_AsJOSN || []).reverse()),
}));
return list;
};
/**
*
* @param {object} params { opisn, whatsappid, lasttime, pagesize, pagedir }
*/
export const fetchMessagesHistory = async (params) => {
const defaultParams = {
opisn: '',
whatsappid: '',
lasttime: '',
pagesize: MESSAGE_PAGE_SIZE,
pagedir: 'next',
};
const { errcode, result } = await fetchJSON(`${API_HOST}/get_item_messages`, {...defaultParams, ...params});
return errcode !== 0 ? [] : parseRenderMessageList((result || []).reverse());
}

2
src/stores/FormStore.js
Unescape Escape View File

@ -8,6 +8,8 @@ export const useFormStore = create(
setChatHistoryForm: (chatHistoryForm) => set({ chatHistoryForm, chatHistorySelectChat: {} }),
chatHistorySelectChat: {},
setChatHistorySelectChat: (chatHistorySelectChat) => set({ chatHistorySelectChat }),
msgHistorySelectMatch: {},
setMsgHistorySelectMatch: (msgHistorySelectMatch) => set({ msgHistorySelectMatch }),
// 订单跟踪页面
orderFollowForm: {

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

@ -1,12 +1,13 @@
import { memo, useCallback, useEffect, useRef, useState, forwardRef } from 'react';
import { Divider, Button, Input, Layout, DatePicker, Form, List, Spin } from 'antd';
import { Divider, Button, Input, Layout, DatePicker, Form, List, Spin, Flex } from 'antd';
import { ChatItem, MessageBox } from 'react-chat-elements';
import { fetchConversationsList, fetchMessages, MESSAGE_PAGE_SIZE } from '@/actions/ConversationActions';
import { isEmpty, stringToColour } from '@/utils/utils';
import { fetchConversationsList, fetchMessages, MESSAGE_PAGE_SIZE, fetchConversationsSearch, fetchMessagesHistory } from '@/actions/ConversationActions';
import { cloneDeep, flush, isEmpty, pick, stringToColour } from '@/utils/utils';
import useFormStore from '@/stores/FormStore';
import { fetchSalesAgent, fetchCustomerList } from '@/actions/CommonActions';
import SearchInput from '@/components/SearchInput';
import { isNotEmpty } from '@/utils/commons';
const { Sider, Content, Header, Footer } = Layout;
const { Search } = Input;
@ -21,7 +22,11 @@ const SearchForm = memo(function ({ initialValues, onSubmit }) {
onSubmit?.({
...values,
opisn: values?.agent?.value || '',
customer_name: values?.customer?.label || '',
whatsapp_id: values?.customer?.value || '',
...(isNotEmpty(values.msgDateRange) ? {
from_date: values.msgDateRange[0].format('YYYY-MM-DD'),
end_date: values.msgDateRange[1].format('YYYY-MM-DD'),
} : {}),
});
}
return (
@ -30,29 +35,21 @@ const SearchForm = memo(function ({ initialValues, onSubmit }) {
form={form}
initialValues={initialValues}
onFinish={handleSubmit}
style={{
maxWidth: 'none',
}}>
<Form.Item label='顾问' name='agent' style={{ width: '200px' }}>
style={{}}>
<Form.Item label='顾问' name='agent' style={{ width: '200px' }} rules={[{required: true, message: '请选择顾问'}]}>
<SearchInput placeholder='搜索顾问' fetchOptions={fetchSalesAgent} />
</Form.Item>
<Form.Item label='客人' name='customer' style={{ width: '200px' }}>
<SearchInput placeholder='搜索客人' fetchOptions={fetchCustomerList} />
</Form.Item>
{/* <Form.Item label='客人H' name='orderLabel' style={{ width: '200px' }}>
<Select
showSearch
placeholder='请选择'
optionFilterProp='children'
filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
options={[]}
/>
</Form.Item> */}
<Form.Item label='订单号' name='coli_id'>
<Input placeholder='订单号' allowClear />
</Form.Item>
<Form.Item label='关键词' name='search'>
<Input placeholder='关键词' allowClear />
</Form.Item>
<Form.Item label='日期' name='startDate'>
<RangePicker />
<Form.Item label='日期' name='msgDateRange'>
<RangePicker format={'YYYY-MM-DD'} />
</Form.Item>
<Form.Item>
<Button type='primary' htmlType='submit'>
@ -67,6 +64,7 @@ function ChatHistory() {
// const [formValues, setFormValues] = useState({});
const [formValues, setFormValues] = useFormStore(((state) => [state.chatHistoryForm, state.setChatHistoryForm]));
const [selectedConversation, setSelectedConversation] = useFormStore(((state) => [state.chatHistorySelectChat, state.setChatHistorySelectChat]));
const [selectMatch, setSelectedMatch] = useFormStore(((state) => [state.msgHistorySelectMatch, state.setMsgHistorySelectMatch]));
const handleSubmit = useCallback((values) => {
setFormValues({ ...values });
@ -76,51 +74,73 @@ function ChatHistory() {
const [messageListLoading, setMessageListLoading] = useState(false);
const [conversationsList, setConversationsList] = useState([]);
const [chatItemMessages, setChatItemMessages] = useState([]);
const [paramsForMsgList, setParamsForMsgList] = useState({ loadNextPage: true, loadPrePage: true, }); // { opisn, whatsappid, lasttime, pagesize, pagedir }
const getConversationsList = async () => {
const allEmpty = Object.values(cloneDeep(formValues)).every((val) => {
return val === null || val === '' || val === undefined;
});
if (allEmpty) return;
setConversationsListLoading(true);
setChatItemMessages([]);
const data = await fetchConversationsList({ opisn: formValues.opisn, customer_name: formValues.customer_name, });
const params = flush(pick(formValues, ['opisn', 'whatsapp_id', 'search', 'from_date', 'end_date', 'coli_id']));
const data = await fetchConversationsSearch(params);
setConversationsListLoading(false);
setConversationsList(data);
if (data.length === 1) {
setSelectedConversation(data[0]);
await getMessages(data[0]);
// await getMessagesNext(data[0]);
}
};
const getMessagesPre = async (chatItem) => {
setMessageListLoading(true);
const data = await fetchMessages({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsapp_phone_number, lasttime: chatItem?.pretime || '' });
const data = await fetchMessagesHistory({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsapp_phone_number, lasttime: chatItem?.pretime || '', pagedir: 'pre', });
setMessageListLoading(false);
setChatItemMessages(prevValue => data.concat(prevValue));
const thisPreTime = data.length > 0 ? data[0].orgmsgtime : '';
const loadPrePage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
setSelectedConversation({ ...chatItem, pretime: thisPreTime, loadPrePage });
};
const getMessages = async (chatItem) => {
const getMessagesNext = async (chatItem) => {
console.log(chatItem);
setMessageListLoading(true);
const data = await fetchMessages({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsapp_phone_number, lasttime: chatItem?.lasttime || '' });
const data = await fetchMessagesHistory({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsappid, lasttime: chatItem?.lasttime || '', pagedir: 'next', });
setMessageListLoading(false);
setChatItemMessages(prevValue => prevValue.concat(data));
const thisPreTime = data.length > 0 ? data[0].orgmsgtime : '';
const loadPrePage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
const thisLastTime = data.length > 0 ? data[data.length - 1].orgmsgtime : '';
const loadNextPage = false; // debug: !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
setSelectedConversation({ ...chatItem, lasttime: thisLastTime, loadNextPage, pretime: thisPreTime, loadPrePage});
setChatItemMessages(prevValue => prevValue.concat(data.reverse()));
const thisLastTime = data.length > 0 ? data[0].orgmsgtime : '';
const loadNextPage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
// const thisPreTime = data.length > 0 ? data[data.length - 1].orgmsgtime : '';
// const loadPrePage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
setParamsForMsgList(preVal => ({ ...preVal, lasttime: thisLastTime, loadNextPage }));
// setSelectedConversation({ ...chatItem, lasttime: thisLastTime, loadNextPage, pretime: thisPreTime, loadPrePage});
};
useEffect(() => {
if (selectedConversation.whatsapp_phone_number) {
setChatItemMessages([]);
getMessages({...selectedConversation, loadNextPage: true, lasttime: null });
}
setChatItemMessages([]);
setSelectedMatch(selectedConversation.matchMsgList?.[0] || {});
setParamsForMsgList(preVal => ({ ...preVal, opi_sn: selectedConversation.opi_sn, whatsappid: selectedConversation.whatsapp_phone_number }));
// if (selectedConversation.whatsapp_phone_number) {
// // getMessagesNext({...selectedConversation, loadNextPage: true, lasttime: null });
// }
return () => {};
}, [selectedConversation.conversationid]);
useEffect(() => {
setChatItemMessages([]);
setParamsForMsgList(preVal => ({ ...preVal, preTime: selectMatch.orgmsgtime, lasttime: selectMatch.orgmsgtime, loadPrePage:true, loadNextPage: true, }));
getMessagesNext({...paramsForMsgList, lasttime: selectMatch.orgmsgtime});
return () => {};
}, [selectedConversation.sn]);
}, [selectMatch.sn]);
// useEffect(() => {
// getMessagesNext(paramsForMsgList);
// return () => {};
// }, [paramsForMsgList.lasttime]);
useEffect(() => {
if (formValues.opisn) {
getConversationsList();
}
getConversationsList();
return () => {};
}, [formValues]);
@ -170,19 +190,19 @@ function ChatHistory() {
};
const onLoadMore = () => {
getMessages(selectedConversation);
getMessagesNext(paramsForMsgList);
// window.dispatchEvent(new Event('resize'));
};
const loadMore = !messageListLoading && selectedConversation.loadNextPage ? (
const loadMore = !messageListLoading && paramsForMsgList.loadNextPage ? (
<div className='text-center pt-3 mb-3 h-8 leading-8 border-dotted border-0 border-t border-slate-300'>
<Button onClick={onLoadMore}>loading more</Button>
</div>
) : null;
const onLoadMorePre = () => {
getMessagesPre(selectedConversation);
getMessagesPre(paramsForMsgList);
// window.dispatchEvent(new Event('resize'));
};
const loadMorePre = !messageListLoading && selectedConversation.loadPrePage ? (
const loadMorePre = !messageListLoading && paramsForMsgList.loadPrePage ? (
<div className='text-center pt-3 mb-3 h-8 leading-8 border-dotted border-0 border-t border-slate-300'>
<Button onClick={onLoadMorePre}>loading more</Button>
</div>
@ -212,80 +232,99 @@ function ChatHistory() {
{conversationsList.map((item) => (
<ChatItem
{...item}
key={item.sn}
id={item.sn}
key={item.conversationid}
id={item.conversationid}
letterItem={{ id: item.whatsapp_name || item.whatsapp_phone_number, letter: (item.whatsapp_name || item.whatsapp_phone_number).split(" ")[0] }}
alt={`${item.whatsapp_name}`}
title={item.whatsapp_name || item.whatsapp_phone_number}
subtitle={item.coli_id}
date={item.last_received_time}
className={String(item.sn) === String(selectedConversation.sn) ? '__active text-primary bg-neutral-100' : ''}
className={String(item.conversationid) === String(selectedConversation.conversationid) ? '__active text-primary bg-neutral-100' : ''}
onClick={() => setSelectedConversation(item)}
/>
))}
</Spin>
</Sider>
<Content style={{ maxHeight: 'calc(100vh - 279px)', height: 'calc(100vh - 279px)', minWidth: '360px' }}>
<div className='h-full relative' ref={messagesEndRef}>
<List
loading={messageListLoading}
header={loadMorePre}
loadMore={loadMore}
className='h-full overflow-y-auto px-2 relative'
itemLayout='vertical'
dataSource={chatItemMessages}
renderItem={(message, index) => (
// <List.Item>
// <List.Item.Meta avatar={<Avatar src={item.avatarUrl} />} title={item.title} description={item.msgTime} />
// <div>{item.content}</div>
// </List.Item>
<MessageBoxWithRef
ref={(el) => (messageRefs.current[index] = el)}
key={message.id}
{...message}
// position={message.sender === 'me' ? 'right' : 'left'}
position={'left'}
onReplyMessageClick={() => scrollToMessage(message.reply.id)}
onOpen={() => handlePreview(message)}
onTitleClick={() => handlePreview(message)}
notch={false}
title={message.type === 'text' ? '' : message.title}
text={<RenderText str={message?.text || ''} />}
copiableDate={true}
dateString={message.dateString || message.localDate}
className={[
'whitespace-pre-wrap mb-2',
message.whatsapp_msg_type === 'sticker' ? 'bg-transparent' : '',
message.sender === 'me' ? 'whatsappme-container' : '',
].join(' ')}
style={{
backgroundColor: message.sender === 'me' ? '#ccd4ae' : '#fff',
}}
{...(message.type === 'meetingLink'
? {
actionButtons: [
{
onClickButton: () => {
navigator.clipboard.writeText(message.text);
},
Component: () => <div>复制</div>,
},
],
<Flex className='h-full relative'>
{(selectedConversation.matchMsgList || []).length > 0 && <div className='w-80 overflow-y-auto overflow-x-hidden'>
{(selectedConversation.matchMsgList).map((item) => (
<ChatItem
{...item}
key={item.sn}
id={item.sn}
letterItem={{ id: item.senderName, letter: (item.senderName).split(" ")[0] }}
alt={`${item.senderName}`}
title={item.senderName}
subtitle={item.originText}
date={item.msgtime}
// dateString={item.msgtime}
className={String(item.sn) === String(selectMatch?.sn) ? '__active text-primary bg-neutral-100' : ' bg-white'}
onClick={() => setSelectedMatch(item)}
/>
))}
</div>}
<div className='h-full relative flex-1' ref={messagesEndRef}>
<List
loading={messageListLoading}
header={loadMorePre}
loadMore={loadMore}
className='h-full overflow-y-auto px-2 relative'
itemLayout='vertical'
dataSource={chatItemMessages}
renderItem={(message, index) => (
// <List.Item>
// <List.Item.Meta avatar={<Avatar src={item.avatarUrl} />} title={item.title} description={item.msgTime} />
// <div>{item.content}</div>
// </List.Item>
<MessageBoxWithRef
ref={(el) => (messageRefs.current[index] = el)}
key={message.id}
{...message}
// position={message.sender === 'me' ? 'right' : 'left'}
position={'left'}
onReplyMessageClick={() => scrollToMessage(message.reply.id)}
onOpen={() => handlePreview(message)}
onTitleClick={() => handlePreview(message)}
notch={false}
title={message.type === 'text' ? '' : message.title}
text={<RenderText str={message?.text || ''} />}
copiableDate={true}
dateString={message.dateString || message.localDate}
className={[
'whitespace-pre-wrap mb-2',
message.whatsapp_msg_type === 'sticker' ? 'bg-transparent' : '',
message.sender === 'me' ? 'whatsappme-container' : '',
].join(' ')}
style={{
backgroundColor: message.sender === 'me' ? '#ccd4ae' : '#fff',
}}
{...(message.type === 'meetingLink'
? {
actionButtons: [
{
onClickButton: () => {
navigator.clipboard.writeText(message.text);
},
Component: () => <div>复制</div>,
},
],
}
: {})}
renderAddCmp={
<div className='border-dashed border-0 border-t border-slate-300 text-slate-600 space-x-2 emoji'>
<span className={`p-1 rounded-b ${message.msg_direction === 'outbound' ? 'text-white' : ''} `} style={{backgroundColor: message.msg_direction === 'outbound' ? stringToColour(message.senderName) : 'unset'}}>{message.senderName}</span>
<span>{message.dateString || message.localDate}</span>
<span>{message.statusCN}</span>
</div>
}
: {})}
renderAddCmp={
<div className='border-dashed border-0 border-t border-slate-300 text-slate-600 space-x-2 emoji'>
<span className={`p-1 rounded-b ${message.msg_direction === 'outbound' ? 'text-white' : ''} `} style={{backgroundColor: message.msg_direction === 'outbound' ? stringToColour(message.senderName) : 'unset'}}>{message.senderName}</span>
<span>{message.dateString || message.localDate}</span>
<span>{message.statusCN}</span>
</div>
}
// date={null}
// status={null}
// date={null}
// status={null}
/>
)}
/>
)}
/>
</div>
</div>
</Flex>
</Content>
</Layout>
</>

Write Preview
Loading…
Cancel
Save