在线窗口: 获取消息: 倒序的, 更新本页的最后一条消息座位下一页的开始

模板参数输入 fix: whatsapp_name null debug: emoji in json perf: 会话列表的昵称null判断
2 years ago · b222a1245e
parent 3e7d80068f
commit b222a1245e
7 changed files with 56 additions and 49 deletions
--- a/src/actions/ConversationActions.js
+++ b/src/actions/ConversationActions.js
@ -18,7 +18,7 @@ export const fetchTemplates = async () => {
 */
 export const fetchConversationsList = async (params) => {
  const { result: data } = await fetchJSON(`${API_HOST}/getconversations`, params);
-  const list = (data || []).map((ele) => ({ ...ele, customer_name: ele.whatsapp_name.trim() }));
+  const list = (data || []).map((ele) => ({ ...ele, customer_name: `${ele.whatsapp_name || ''}`.trim(), whatsapp_name: `${ele.whatsapp_name || ''}`.trim() }));
  return list;
 };

@ -35,7 +35,7 @@ export const fetchMessages = async (params) => {
    pagesize: MESSAGE_PAGE_SIZE,
  };
  const { errcode, result } = await fetchJSON(`${API_HOST}/getcusmessages`, {...defaultParams, ...params});
-  return errcode !== 0 ? [] : parseRenderMessageList(result.reverse() || []);
+  return errcode !== 0 ? [] : parseRenderMessageList((result || []).reverse());
 }

 /**
--- a/src/lib/msgUtils.js
+++ b/src/lib/msgUtils.js
@ -462,7 +462,12 @@ export const parseRenderMessageItem = (msg) => {
 */
 export const parseRenderMessageList = (messages, conversationid = null) => {
  return messages.map((msg, i) => {
-    const msgContent = msg.msgtext_AsJOSN;
+    let msgContentString = '';
+    if (typeof msg.msgtext_AsJOSN === 'string') {
+      // debug: json 缺少一部分
+      msgContentString = msg.msgtext_AsJOSN.charAt(msg.msgtext_AsJOSN.length - 1) !== '}' ? msg.msgtext_AsJOSN + '}}' : msg.msgtext_AsJOSN;
+    }
+    const msgContent = typeof msg.msgtext_AsJOSN === 'string' ? JSON.parse(msgContentString) : msg.msgtext_AsJOSN;
    msgContent.template = msg.msgtype === 'template' ? { ...msgContent.template, ...msg.template_AsJOSN } : {};
    const msgType = Object.keys(whatsappMsgTypeMapped).includes(msgContent.type) ? msgContent.type : 'unsupported';
    // const parseMethod = msgContent.bizType === 'whatsapp' ? cloneDeep(whatsappMsgTypeMapped) : {};
--- a/src/views/ChatHistory.jsx
+++ b/src/views/ChatHistory.jsx
@ -21,7 +21,7 @@ const SearchForm = memo(function ({ initialValues, onSubmit }) {
  function handleSubmit(values) {
    onSubmit?.({
      ...values,
-      travel: values?.agent?.value || '',
+      opisn: values?.agent?.value || '',
      customer_name: values?.customer?.label || '',
    });
  }
@ -66,8 +66,8 @@ const SearchForm = memo(function ({ initialValues, onSubmit }) {

 function ChatHistory() {
  // const [formValues, setFormValues] = useState({});
-  const [formValues, setFormValues] = useFormStore(useShallow((state) => [state.chatHistoryForm, state.setChatHistoryForm]));
-  const [selectedConversation, setSelectedConversation] = useFormStore(useShallow((state) => [state.chatHistorySelectChat, state.setChatHistorySelectChat]));
+  const [formValues, setFormValues] = useFormStore(((state) => [state.chatHistoryForm, state.setChatHistoryForm]));
+  const [selectedConversation, setSelectedConversation] = useFormStore(((state) => [state.chatHistorySelectChat, state.setChatHistorySelectChat]));

  const handleSubmit = useCallback((values) => {
    setFormValues({ ...values });
@ -79,7 +79,7 @@ function ChatHistory() {
  const getConversationsList = async () => {
    setLoading(true);
    setChatItemMessages([]);
-    const data = await fetchConversationsList({ opisn: formValues.agent?.value || -1 });
+    const data = await fetchConversationsList({ opisn: formValues.opisn, customer_name: formValues.customer_name, });
    setLoading(false);
    setConversationsList(data);
    if (data.length === 1) {
@ -107,7 +107,7 @@ function ChatHistory() {
  }, [selectedConversation.sn]);

  useEffect(() => {
-    if (formValues.travel) {
+    if (formValues.opisn) {
      getConversationsList();
    }
    return () => {};
@ -194,9 +194,9 @@ function ChatHistory() {
                {...item}
                key={item.sn}
                id={item.sn}
-                letterItem={{ id: item.whatsapp_name.trim() || item.whatsapp_phone_number, letter: (item.whatsapp_name.trim() || item.whatsapp_phone_number).slice(0, 5) }}
-                alt={`${item.whatsapp_name.trim()}`}
-                title={item.whatsapp_name.trim() || item.whatsapp_phone_number}
+                letterItem={{ id: item.whatsapp_name || item.whatsapp_phone_number, letter: (item.whatsapp_name || item.whatsapp_phone_number).slice(0, 5) }}
+                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' : ''}
--- a/src/views/Conversations/Components/ConversationsList.jsx
+++ b/src/views/Conversations/Components/ConversationsList.jsx
@ -76,7 +76,7 @@ const Conversations = () => {
    const data = await fetchMessages({ opisn: userId, whatsappid: item.whatsapp_phone_number, lasttime: '' });
    setMsgLoading(false);
    receivedMessageList(item.sn, data);
-    const thisLastTime = data.length > 0 ? data[data.length - 1].orgmsgtime : '';
+    const thisLastTime = data.length > 0 ? data[0].orgmsgtime : '';
    const loadNextPage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
    updateCurrentConversation({ lasttime: thisLastTime, loadNextPage });
  };
@ -186,9 +186,9 @@ const Conversations = () => {
              {...item}
              key={item.sn}
              id={item.sn}
-              letterItem={{ id: item.whatsapp_name.trim() || item.whatsapp_phone_number, letter: (item.whatsapp_name.trim() || item.whatsapp_phone_number).slice(0, 5) }}
-              alt={`${item.whatsapp_name.trim()}`}
-              title={item.whatsapp_name.trim() || item.whatsapp_phone_number}
+              letterItem={{ id: item.whatsapp_name || item.whatsapp_phone_number, letter: (item.whatsapp_name || item.whatsapp_phone_number).slice(0, 5) }}
+              alt={item.whatsapp_name}
+              title={item.whatsapp_name || item.whatsapp_phone_number}
              subtitle={item.coli_id}
              date={item.last_received_time}
              unread={item.unread_msg_count}
--- a/src/views/Conversations/Components/Input/Template.jsx
+++ b/src/views/Conversations/Components/Input/Template.jsx
@ -1,10 +1,9 @@
 import { useState, useRef, useEffect } from 'react';
 import { App, Popover, Flex, Button, List, Input } from 'antd';
 import { MessageOutlined, SendOutlined } from '@ant-design/icons';
-import useAuthStore from '@/stores/AuthStore'
+import useAuthStore from '@/stores/AuthStore';
 import useConversationStore from '@/stores/ConversationStore';
 import { cloneDeep, getNestedValue, objectMapper } from '@/utils/utils';
-import { v4 as uuid } from 'uuid';
 import { replaceTemplateString } from '@/lib/msgUtils';

 const splitTemplate = (template) => {
@ -24,9 +23,9 @@ const splitTemplate = (template) => {
 const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
  const searchInputRef = useRef(null);
  const { notification } = App.useApp();
-  const loginUser = useAuthStore(state => state.loginUser);
-  const currentConversation = useConversationStore(state => state.currentConversation);
-  const templates = useConversationStore(state => state.templates);
+  const loginUser = useAuthStore((state) => state.loginUser);
+  const currentConversation = useConversationStore((state) => state.currentConversation);
+  const templates = useConversationStore((state) => state.templates);
  // 用于替换变量: customer, agent
  const valueMapped = { ...cloneDeep(currentConversation), ...objectMapper(loginUser, { username: [{ key: 'agent_name' }, { key: 'your_name' }] }) };
  useEffect(() => {
@ -92,35 +91,44 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
    });
  };

-  const renderForm = (tempItem) => {
+  const renderForm = ({ tempItem }) => {
    const templateText = tempItem.components.body?.[0]?.text || '';
    const tempArr = splitTemplate(templateText);
    const keys = (templateText.match(/{{(.*?)}}/g) || []).map((key) => key.replace(/{{|}}/g, ''));
    const paramsVal = keys.reduce((r, k) => ({ ...r, [k]: getNestedValue(valueMapped, [k]) }), {});

-    return tempArr.map((ele) =>
-      typeof ele === 'string' ? (
-        <span key={ele.trim()} className=' text-wrap'>
-          {ele}
-        </span>
-      ) : (
-        <Input
-          key={ele.key}
-          onChange={(e) => onInput(tempItem, ele.key, e.target.value, paramsVal)}
-          className='w-auto max-w-24'
-          size={'small'}
-          title={ele.key}
-          placeholder={paramsVal[ele.key] || ele.key}
-          // defaultValue={paramsVal[ele.key] || ''}
-          onPressEnter={() => handleSendTemplate(tempItem)}
-        />
-      )
+    return (
+      <>
+        {tempArr.map((ele) =>
+          typeof ele === 'string' ? (
+            <span key={ele.trim()} className=' text-wrap'>
+              {ele}
+            </span>
+          ) : (
+            <Input
+              key={ele.key}
+              onChange={(e) => {
+                onInput(tempItem, ele.key, e.target.value, paramsVal);
+              }}
+              className='w-auto max-w-24'
+              size={'small'}
+              title={ele.key}
+              placeholder={paramsVal[ele.key] || ele.key}
+              defaultValue={paramsVal[ele.key] || ''}
+              onPressEnter={() => handleSendTemplate(tempItem)}
+            />
+          )
+        )}
+      </>
    );
  };
  return (
    <>
-      <Popover overlayClassName='w-3/5'
+      <Popover
+        overlayClassName='w-3/5'
        fresh
+        forceRender
+        destroyTooltipOnHide={true}
        content={
          <>
            <Input.Search
@ -141,7 +149,7 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
              rowKey={'name'}
              pagination={dataSource.length < 4 ? false : { position: 'bottom', pageSize: 3, align: 'start', size: 'small' }}
              renderItem={(item, index) => (
-                <List.Item>
+                <List.Item key={`${currentConversation.sn}_${item.name}`}>
                  <List.Item.Meta
                    className=' '
                    title={
@ -155,14 +163,9 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
                    description={
                      <>
                        <div className=' max-h-40 overflow-y-auto divide-dashed divide-x-0 divide-y divide-gray-300'>
-                          <div className='text-slate-500'>{renderForm(item)}</div>
+                          <div className='text-slate-500'>{renderForm({ tempItem: item })}</div>
                          {item.components?.footer?.[0] ? <div className=''>{item.components.footer[0].text || ''}</div> : null}
                        </div>
-                        {/* <div className='text-right px-2'>
-                        <Button onClick={() => handleSendTemplate(item)} size={'small'} type='link' key={'send'} icon={<SendOutlined />}>
-                          Send
-                        </Button>
-                      </div> */}
                      </>
                    }
                  />
--- a/src/views/Conversations/Components/MessagesList.jsx
+++ b/src/views/Conversations/Components/MessagesList.jsx
@ -11,7 +11,6 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get

  // const messagesEndRef = useRef(null);
  const messageRefs = useRef([]);
-  const prevProps = useRef(props)

  const scrollToBottom = (force = false) => {
    if (reference.current && (shouldScrollBottom || force)) {
@ -74,7 +73,7 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
  return (
    <div className='relative h-full overflow-y-auto overflow-x-hidden flex flex-1'>
      <div ref={reference} className='relative overflow-y-auto overflow-x-hidden block flex-1'>
-        {loadNextPage && (
+        {loadNextPage && messages.length>0 && (
          <div className='text-center pt-3 mb-3 h-8 leading-8 '>
            {!longListLoading ? <Button onClick={onLoadMore} type={'dashed'}>loading more</Button> : <LoadingOutlined className='text-primary' />}
          </div>
--- a/src/views/Conversations/Components/MessagesWrapper.jsx
+++ b/src/views/Conversations/Components/MessagesWrapper.jsx
@ -28,7 +28,7 @@ const MessagesWrapper = () => {
    const data = await fetchMessages({ opisn: currentConversation.opi_sn, whatsappid: currentConversation.whatsapp_phone_number, lasttime: currentConversation?.lasttime || '' });
    setLongListLoading(false);
    setLongList(prevValue => data.concat(prevValue));
-    const thisLastTime = data.length > 0 ? data[data.length - 1].orgmsgtime : '';
+    const thisLastTime = data.length > 0 ? data[0].orgmsgtime : '';
    const loadNextPage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
    updateCurrentConversation({ lasttime: thisLastTime, loadNextPage });
    return data.length;