From b222a1245e65874a5d1a6f781068803a0ef4ed11 Mon Sep 17 00:00:00 2001 From: Lei OT Date: Wed, 13 Mar 2024 09:19:51 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=A8=E7=BA=BF=E7=AA=97=E5=8F=A3:=20?= =?UTF-8?q?=E8=8E=B7=E5=8F=96=E6=B6=88=E6=81=AF:=20=E5=80=92=E5=BA=8F?= =?UTF-8?q?=E7=9A=84,=20=E6=9B=B4=E6=96=B0=E6=9C=AC=E9=A1=B5=E7=9A=84?= =?UTF-8?q?=E6=9C=80=E5=90=8E=E4=B8=80=E6=9D=A1=E6=B6=88=E6=81=AF=E5=BA=A7?= =?UTF-8?q?=E4=BD=8D=E4=B8=8B=E4=B8=80=E9=A1=B5=E7=9A=84=E5=BC=80=E5=A7=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 模板参数输入 fix: whatsapp_name null debug: emoji in json perf: 会话列表的昵称null判断 --- src/actions/ConversationActions.js | 4 +- src/lib/msgUtils.js | 7 +- src/views/ChatHistory.jsx | 16 ++--- .../Components/ConversationsList.jsx | 8 +-- .../Components/Input/Template.jsx | 65 ++++++++++--------- .../Conversations/Components/MessagesList.jsx | 3 +- .../Components/MessagesWrapper.jsx | 2 +- 7 files changed, 56 insertions(+), 49 deletions(-) diff --git a/src/actions/ConversationActions.js b/src/actions/ConversationActions.js index a7c5759..3db9841 100644 --- 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()); } /** diff --git a/src/lib/msgUtils.js b/src/lib/msgUtils.js index 6339c84..49a37e5 100644 --- 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) : {}; diff --git a/src/views/ChatHistory.jsx b/src/views/ChatHistory.jsx index b7653a0..b5ad7f4 100644 --- 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' : ''} diff --git a/src/views/Conversations/Components/ConversationsList.jsx b/src/views/Conversations/Components/ConversationsList.jsx index 2220987..556a82d 100644 --- 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} diff --git a/src/views/Conversations/Components/Input/Template.jsx b/src/views/Conversations/Components/Input/Template.jsx index ae36ba4..173347e 100644 --- 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' ? ( - - {ele} - - ) : ( - 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' ? ( + + {ele} + + ) : ( + { + 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 ( <> - { rowKey={'name'} pagination={dataSource.length < 4 ? false : { position: 'bottom', pageSize: 3, align: 'start', size: 'small' }} renderItem={(item, index) => ( - + { description={ <>
-
{renderForm(item)}
+
{renderForm({ tempItem: item })}
{item.components?.footer?.[0] ?
{item.components.footer[0].text || ''}
: null}
- {/*
- -
*/} } /> diff --git a/src/views/Conversations/Components/MessagesList.jsx b/src/views/Conversations/Components/MessagesList.jsx index 6e46393..a0080b7 100644 --- 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 (
- {loadNextPage && ( + {loadNextPage && messages.length>0 && (
{!longListLoading ? : }
diff --git a/src/views/Conversations/Components/MessagesWrapper.jsx b/src/views/Conversations/Components/MessagesWrapper.jsx index 233f6cb..4988aa6 100644 --- 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;