Merge branch 'main' of github.com:hainatravel/global-sales

src/actions/ConversationActions.js

@@ -1,8 +1,9 @@
 
-import { groupBy } from '@/utils/utils';
+import { groupBy, pick } from '@/utils/utils';
 import { fetchJSON, postJSON } from '@/utils/request'
 import { parseRenderMessageList } from '@/lib/msgUtils';
 import { API_HOST } from '@/config';
+import { isEmpty } from '@/utils/commons';
 
 export const fetchTemplates = async () => {
   const data = await fetchJSON(`${API_HOST}/listtemplates`);
@@ -17,7 +18,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 +74,41 @@ 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: '2024-01-01T00:00:00',
+    pagesize: MESSAGE_PAGE_SIZE,
+    pagedir: 'next',
+  };
+  const _params = pick(params, Object.keys(defaultParams));
+  if (isEmpty(_params.opisn) || isEmpty(_params.whatsappid)) {
+    return [];
+  }
+  const { errcode, result } = await fetchJSON(`${API_HOST}/get_item_messages`, {...defaultParams, ..._params});
+  const data = errcode !== 0 ? [] : result; // _params.pagedir === 'next' ? result.reverse() : result;
+  return parseRenderMessageList(data);
+}

src/components/SearchInput.jsx

@@ -30,6 +30,7 @@ function DebounceSelect({ fetchOptions, debounceTimeout = 800, ...props }) {
       showSearch
       allowClear
       {...props}
+      maxTagCount={1}
       onSearch={debounceFetcher}
       notFoundContent={fetching ? <Spin size='small' /> : null}
       optionFilterProp='label'

src/lib/msgUtils.js

@@ -408,8 +408,8 @@ export const whatsappMsgTypeMapped = {
   template: {
     type: 'text',
     data: (msg) => {
-      const templateDataMapped = msg.template?.components ? msg.template.components.reduce((r, v) => ({ ...r, [v.type]: v }), {}) : null;
-      return { id: msg.wamid, text: autoLinkText(templateDataMapped?.body?.text || `......${templateDataMapped?.body?.parameters.map(pv => pv?.text || '').join('......')}......`), title: msg.template.name };
+      const templateDataMapped = msg.template?.components ? msg.template.components.reduce((r, v) => ({ ...r, [v.type]: v }), {}) : {};
+      return { id: msg.wamid, text: autoLinkText(templateDataMapped?.body?.text || `......${(templateDataMapped?.body?.parameters || []).map(pv => pv?.text || '').join('......')}......`), title: msg.template.name };
     },
     renderForReply: (msg) => {
       const templateDataMapped = msg.template?.components ? msg.template.components.reduce((r, v) => ({ ...r, [v.type]: v }), {}) : null;

src/stores/FormStore.js

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

src/views/ChatHistory.jsx

@@ -1,12 +1,14 @@
 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 { LoadingOutlined } from '@ant-design/icons';
 import { ChatItem, MessageBox } from 'react-chat-elements';
-import { fetchConversationsList, fetchMessages, MESSAGE_PAGE_SIZE } from '@/actions/ConversationActions';
-import { isEmpty, stringToColour } from '@/utils/utils';
+import { 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;
@@ -18,10 +20,16 @@ const { RangePicker } = DatePicker;
 const SearchForm = memo(function ({ initialValues, onSubmit }) {
   const [form] = Form.useForm();
   function handleSubmit(values) {
+    const multiAgents = (values?.agent || []).map(ele => ele.value).join(',');
+    const multiCustomers = (values?.customer || []).map(ele => ele.value).join(',');
     onSubmit?.({
       ...values,
-      opisn: values?.agent?.value || '',
-      customer_name: values?.customer?.label || '',
+      opisn: multiAgents,
+      whatsapp_id: multiCustomers,
+      ...(isNotEmpty(values.msgDateRange) ? {
+        from_date: values.msgDateRange[0].format('YYYY-MM-DD'),
+        end_date: values.msgDateRange[1].format('YYYY-MM-DD'),
+      } : {}),
     });
   }
   return (
@@ -30,29 +38,21 @@ const SearchForm = memo(function ({ initialValues, onSubmit }) {
       form={form}
       initialValues={initialValues}
       onFinish={handleSubmit}
-      style={{
-        maxWidth: 'none',
-      }}>
-      <Form.Item label='顾问' name='agent' style={{ width: '200px' }}>
-        <SearchInput placeholder='搜索顾问' fetchOptions={fetchSalesAgent} />
+      style={{}}>
+      <Form.Item label='顾问' name='agent' style={{ width: '200px' }} rules={[{required: true, message: '请选择顾问'}]}>
+        <SearchInput placeholder='搜索顾问' fetchOptions={fetchSalesAgent} mode={'tags'} />
       </Form.Item>
       <Form.Item label='客人' name='customer' style={{ width: '200px' }}>
-        <SearchInput placeholder='搜索客人' fetchOptions={fetchCustomerList} />
+        <SearchInput placeholder='搜索客人' fetchOptions={fetchCustomerList} mode={'tags'} />
+      </Form.Item>
+      <Form.Item label='订单号' name='coli_id'>
+        <Input placeholder='订单号' allowClear />
       </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='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,60 +67,143 @@ 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 [paramsForMsgList, setParamsForMsgList] = useFormStore(((state) => [state.msgListParams, state.setMsgListParams]));
+  // { opisn, whatsappid, lasttime, pagesize, pagedir }
 
   const handleSubmit = useCallback((values) => {
     setFormValues({ ...values });
   }, []);
 
-  const [loading, setLoading] = useState(false);
+  const [conversationsListLoading, setConversationsListLoading] = useState(false);
+  const [messageListPreLoading, setMessageListPreLoading] = useState(false);
+  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 [selectMatch, setSelectedMatch] = useState({});
+
   const getConversationsList = async () => {
-    setLoading(true);
+    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, });
-    setLoading(false);
+    setParamsForMsgList({});
+    setSelectedMatch({});
+    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]);
     }
   };
+
   const getMessagesPre = async (chatItem) => {
-    setLoading(true);
-    const data = await fetchMessages({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsapp_phone_number, lasttime: chatItem?.pretime || '' });
-    setLoading(false);
+    setMessageListPreLoading(true);
+    const data = await fetchMessagesHistory({ ...chatItem, lasttime: chatItem.pretime, pagedir: 'pre', });
+    setMessageListPreLoading(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 });
+    setParamsForMsgList({ loadPrePage });
   };
-  const getMessages = async (chatItem) => {
-    setLoading(true);
-    const data = await fetchMessages({ opisn: chatItem.opi_sn, whatsappid: chatItem.whatsapp_phone_number, lasttime: chatItem?.lasttime || '' });
-    setLoading(false);
+  const getMessagesNext = async (chatItem) => {
+    setMessageListLoading(true);
+    const data = await fetchMessagesHistory({...chatItem, 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});
+    const loadNextPage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
+    setParamsForMsgList({loadNextPage});
   };
 
+  // 选择指定消息之后, 定位
+  const scrollToSelectedMessage = (selected) => {
+    const findIndex = chatItemMessages.findIndex(item => item.id === selected.id);
+    if (findIndex !== -1) {
+      scrollToMessage(selected.id, findIndex);
+    }
+  }
+  const handleMatchMsgClick = async (selected) => {
+    const findIndex = chatItemMessages.findIndex(item => item.id === selected.id);
+    if (findIndex === -1) {
+      setMessageListLoading(true);
+      await getMessagesPre({...paramsForMsgList, pagesize: 10000 });
+      setMessageListLoading(false);
+    }
+    setSelectedMatch(selected);
+  }
+  // 选择指定消息之后, 定位
+  useEffect(() => {
+    if (selectMatch.sn) {
+      scrollToSelectedMessage(selectMatch);
+    }
+    return () => {};
+  }, [selectMatch.sn]);
+
+  // 选中会话之后, 获取消息记录
   useEffect(() => {
-    if (selectedConversation.whatsapp_phone_number) {
     setChatItemMessages([]);
-      getMessages({...selectedConversation, loadNextPage: true, lasttime: null });
+    setParamsForMsgList({});
+    setSelectedMatch({});
+    if (isEmpty(selectedConversation.conversationid)) {
+      return () => {};
+    }
+    const firstActionPageParams = { opisn: selectedConversation.opi_sn, whatsappid: selectedConversation.whatsapp_phone_number };
+    if (isEmpty(selectedConversation.matchMsgList)) {
+      firstActionPageParams.loadPrePage = false;
+      firstActionPageParams.loadNextPage = true;
+    } else {
+      firstActionPageParams.pretime = selectedConversation.matchMsgList[0].orgmsgtime;
+      firstActionPageParams.lasttime = selectedConversation.matchMsgList[0].orgmsgtime;
+      firstActionPageParams.loadPrePage = true;
+      firstActionPageParams.loadNextPage = true;
+    }
+    setParamsForMsgList(firstActionPageParams);
+    async function getFirstNext() {
+      await getMessagesNext(firstActionPageParams);
     }
+    async function getFirstPre() {
+      await getMessagesPre(firstActionPageParams);
+    }
+    // getFirstPre();
+    getFirstNext();
 
     return () => {};
-  }, [selectedConversation.sn]);
+  }, [selectedConversation.conversationid]);
 
+  // 更新是否需要显示上一页,下一页按钮
   useEffect(() => {
-    if (formValues.opisn) {
-      getConversationsList();
+    if (chatItemMessages.length > 0) {
+      setParamsForMsgList({pretime: chatItemMessages[0].orgmsgtime, lasttime: chatItemMessages[chatItemMessages.length - 1].orgmsgtime });
     }
     return () => {};
+  }, [chatItemMessages])
+
+  const onLoadMore = () => {
+    getMessagesNext(paramsForMsgList);
+    // window.dispatchEvent(new Event('resize'));
+  };
+  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}>load more</Button>
+      </div>
+    ) : null;
+  const onLoadMorePre = () => {
+    getMessagesPre(paramsForMsgList);
+    // window.dispatchEvent(new Event('resize'));
+  };
+  const loadMorePre =
+    paramsForMsgList.loadPrePage && chatItemMessages.length > 0 ? (
+      <div className='text-center h-8 leading-8 '>
+        {messageListPreLoading ? <LoadingOutlined className='text-primary' /> : <Button onClick={onLoadMorePre}>load more previous </Button>}
+      </div>
+    ) : null;
+
+  useEffect(() => {
+    getConversationsList();
+    return () => {};
   }, [formValues]);
 
   const RenderText = memo(function renderText({ str }) {
@@ -168,25 +251,6 @@ function ChatHistory() {
     }
   };
 
-  const onLoadMore = () => {
-    getMessages(selectedConversation);
-    // window.dispatchEvent(new Event('resize'));
-  };
-  const loadMore = !loading && selectedConversation.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);
-    // window.dispatchEvent(new Event('resize'));
-  };
-  const loadMorePre = !loading && selectedConversation.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>
-    ) : null;
-
   const messagesEndRef = useRef(null);
   const messageRefs = useRef([]);
   const scrollToMessage = (id, index) => {
@@ -207,27 +271,45 @@ function ChatHistory() {
       <Divider plain orientation='left' className='mb-0'></Divider>
       <Layout hasSider className='h-screen chathistory-wrapper chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 279px)', height: 'calc(100% - 279px)' }}>
         <Sider width={240} theme={'light'} className='h-full overflow-y-auto overflow-x-hidden' style={{ maxHeight: 'calc(100vh - 279px)', height: 'calc(100vh - 279px)' }}>
-          <Spin spinning={loading}>
+          <Spin spinning={conversationsListLoading}>
             {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}>
+            <Flex className='h-full relative'>
+              {(selectedConversation.matchMsgList || []).length > 1 && isNotEmpty(formValues.search) && <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={() => handleMatchMsgClick(item)}
+                  />
+                ))}
+              </div>}
+              <div className='h-full relative flex-1 border-dashed border-y-0 border-r-0 border-l border-slate-200' ref={messagesEndRef}>
                 <List
-              loading={loading}
+                  loading={messageListLoading}
                   header={loadMorePre}
                   loadMore={loadMore}
                   className='h-full overflow-y-auto px-2 relative'
@@ -248,7 +330,7 @@ function ChatHistory() {
                       onOpen={() => handlePreview(message)}
                       onTitleClick={() => handlePreview(message)}
                       notch={false}
-                  title={message.type === 'text' ? '' : message.title}
+                      title={message.whatsapp_msg_type === 'text' ? '' : message.title}
                       text={<RenderText str={message?.text || ''} />}
                       copiableDate={true}
                       dateString={message.dateString || message.localDate}
@@ -285,6 +367,7 @@ function ChatHistory() {
                   )}
                 />
               </div>
+            </Flex>
         </Content>
       </Layout>
     </>

src/views/Conversations/Components/Input/Template.jsx

@@ -28,7 +28,7 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
   const currentConversation = useConversationStore((state) => state.currentConversation);
   const templates = useConversationStore((state) => state.templates);
   // 用于替换变量: customer, agent
-  const valueMapped = { ...cloneDeep(currentConversation), ...objectMapper(loginUser, { usernameEN: [{ key: 'agent_name' }, { key: 'your_name' }] }) };
+  const valueMapped = { ...cloneDeep(currentConversation), ...objectMapper(loginUser, { usernameEN: [{ key: 'agent_name' }, { key: 'your_name' }, { key: 'your_name1' }, { key: 'your_name2' }] }) };
   useEffect(() => {
     setDataSource(templates);
     return () => {};