+
{referenceMsg.senderName}
{referenceMsg.originText}
@@ -122,7 +128,7 @@ const InputComposer = () => {
/>
-
+
setTextContent(`${textContent}${s}`)} />
{/* */}
{/* } size={'middle'} />
diff --git a/src/views/Conversations/Components/Messages.jsx b/src/views/Conversations/Components/Messages.jsx
index f792057..5bfc890 100644
--- a/src/views/Conversations/Components/Messages.jsx
+++ b/src/views/Conversations/Components/Messages.jsx
@@ -1,34 +1,18 @@
-import { useEffect, useState, useRef, useMemo } from 'react';
+import { useEffect, useState, useRef, useMemo, memo } from 'react';
import { Image, Spin, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { MessageBox } from 'react-chat-elements';
import useConversationStore from '@/stores/ConversationStore';
import { useShallow } from 'zustand/react/shallow';
+import { Emoji } from 'emoji-picker-react';
+import { olog } from '@/utils/utils';
const Messages = () => {
- const { currentConversation, setReferenceMsg, msgListLoading } = useConversationStore();
- const activeMessages = useConversationStore(useShallow((state) => (currentConversation.sn ? state.activeConversations[currentConversation.sn] : [])));
-
- const messagesList = useMemo(
- () =>
- (activeMessages || []).map((message) => ({
- ...message,
- key: message.id,
- position: message.sender === 'me' ? 'right' : 'left',
- ...(message.sender === 'me'
- ? {
- styles: { backgroundColor: '#ccd4ae' },
- notchStyle: { fill: '#ccd4ae' },
- replyButton: ['text'].includes(message.whatsapp_msg_type) && message.status !== 'failed' ? true : false,
- className: 'whatsappme-container whitespace-pre-wrap',
- }
- : {
- replyButton: ['text'].includes(message.whatsapp_msg_type) ? true : false,
- }),
- })),
- [activeMessages]
- );
- // console.log('messagesList----------------------------------------------------', messagesList);
+ const currentConversation = useConversationStore(useShallow((state) => state.currentConversation));
+ const setReferenceMsg = useConversationStore(useShallow((state) => state.setReferenceMsg));
+ const msgListLoading = useConversationStore(useShallow((state) => state.msgListLoading));
+ const activeMessages = useConversationStore(useShallow((state) => (state.currentConversation.sn ? state.activeConversations[state.currentConversation.sn] : [])));
+ olog('invoke msg list');
const messagesEndRef = useRef(null);
useEffect(() => {
@@ -49,12 +33,39 @@ const Messages = () => {
setPreviewSrc(msg.data.uri);
};
+ const RenderText = memo(function renderText({str}) {
+ const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji_Presentation})/gmu).filter(s => s !== '');
+ // const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji}\uFE0F?|\b\d+\b)/gu);
+ return (
+ <>
+ {(parts || []).map((part, index) => {
+ // if (/\p{Emoji}\uFE0F?/u.test(part)) {
+ if (/\p{Emoji_Presentation}/u.test(part)) {
+ const code = [...part].map((e) => e.codePointAt(0).toString(16)).join(`-`);
+ return ;
+ } else
+ if (/https?:\/\/[\S]+/gi.test(part)) {
+ return (
+
+ {part}
+
+ );
+ } else if (part.trim() !== '') {
+ return {part};
+ } else {
+ return {part};
+ }
+ })}
+
+ );
+ });
+
return (
- {messagesList.map((message, index) => (
+ {activeMessages.map((message, index) => (
{
@@ -68,14 +79,24 @@ const Messages = () => {
}
},
}}
- trigger={['contextMenu']}
- >
+ trigger={['contextMenu']}>
setReferenceMsg(message)}
onOpen={() => handlePreview(message)}
- {...(message.type === 'text' ? { text: } : {})}
+ text={}
+ {...(message.sender === 'me'
+ ? {
+ styles: { backgroundColor: '#ccd4ae' },
+ notchStyle: { fill: '#ccd4ae' },
+ replyButton: ['text'].includes(message.whatsapp_msg_type) && message.status !== 'failed' ? true : false,
+ className: 'whatsappme-container whitespace-pre-wrap',
+ }
+ : {
+ replyButton: ['text'].includes(message.whatsapp_msg_type) ? true : false,
+ })}
/>
))}
diff --git a/src/views/Conversations/Components/MessagesHeader.jsx b/src/views/Conversations/Components/MessagesHeader.jsx
index 34ca61d..7febf18 100644
--- a/src/views/Conversations/Components/MessagesHeader.jsx
+++ b/src/views/Conversations/Components/MessagesHeader.jsx
@@ -5,8 +5,13 @@ import { ReloadOutlined, ApiOutlined } from '@ant-design/icons';
import { LoadingOutlined } from '@ant-design/icons';
const MessagesHeader = () => {
- const { loginUser: { userId } } = useAuthStore()
- const {websocketOpened, websocketRetrying, websocketRetrytimes, currentConversation, connectWebsocket} = useConversationStore();
+ const userId = useAuthStore(state => state.loginUser.userId);
+ const websocketOpened = useConversationStore(state => state.websocketOpened);
+ const websocketRetrying = useConversationStore(state => state.websocketRetrying);
+ const websocketRetrytimes = useConversationStore(state => state.websocketRetrytimes);
+ const currentConversation = useConversationStore(state => state.currentConversation);
+ const connectWebsocket = useConversationStore(state => state.connectWebsocket);
+
return (
<>
{websocketOpened === false && (
@@ -15,9 +20,11 @@ const MessagesHeader = () => {
message='断开连接'
banner
action={
- websocketRetrytimes === -1 ?
- } onClick={() => connectWebsocket(userId)} className=' text-blue-500' />
- : null
+ websocketRetrytimes === -1 ? (
+
+ } onClick={() => connectWebsocket(userId)} className=' text-blue-500' />
+
+ ) : null
}
/>
)}
@@ -26,8 +33,16 @@ const MessagesHeader = () => {
{/* {currentConversation.customer_name && } */}
- {currentConversation.customer_name}
- {currentConversation.whatsapp_phone_number}
+ {currentConversation.whatsapp_phone_number ? (
+ <>
+ {currentConversation.customer_name}
+ {currentConversation.whatsapp_phone_number}
+
+ ) : (
+
+ 没有WhatsApp号码
+
+ )}
{/* {order?.location} */}
diff --git a/src/views/Conversations/Conversations.css b/src/views/Conversations/Conversations.css
index 735e133..c8e8a62 100644
--- a/src/views/Conversations/Conversations.css
+++ b/src/views/Conversations/Conversations.css
@@ -9,7 +9,7 @@
/** Chat Window */
.chatwindow-wrapper .rce-container-mbox .rce-mbox{
- max-width: 400px;
+ max-width: 500px;
}
.chatwindow-wrapper .rce-citem {
background: transparent;
@@ -18,6 +18,9 @@
background: linear-gradient(0deg,#00000014,#0000);
color: #00000073;
}
+.chatwindow-wrapper .rce-mbox-text, .chatwindow-wrapper .referrer-msg {
+ font-family: 'Twemoji Mozilla', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji', sans-serif;
+}
.chatwindow-wrapper .rce-mbox-text a{
color: #4f81a1;
}
@@ -45,4 +48,6 @@
margin-left: 5px;
justify-content: flex-start;
font-size: 12px;
+ word-wrap: break-word;
+ height: 100%;
}