diff --git a/src/stores/ConversationStore.js b/src/stores/ConversationStore.js index 0d87c92..9961a48 100644 --- a/src/stores/ConversationStore.js +++ b/src/stores/ConversationStore.js @@ -168,7 +168,7 @@ const conversationSlice = (set, get) => ({ }, setCurrentConversation: (conversation) => { // 清空未读 - const { conversationsList, totalNotify } = get(); + const { conversationsList } = get(); const targetId = conversation.sn; const targetIndex = conversationsList.findIndex((ele) => String(ele.sn) === String(targetId)); targetIndex !== -1 @@ -178,7 +178,12 @@ const conversationSlice = (set, get) => ({ }) : null; - return set({ totalNotify: totalNotify - (conversation.unread_msg_count || 0), currentConversation: conversation, referenceMsg: {}, conversationsList: [...conversationsList] }); + return set((state) => ({ + totalNotify: state.totalNotify - (conversation.unread_msg_count || 0), + currentConversation: conversation, + referenceMsg: {}, + conversationsList: [...conversationsList], + })); }, }); diff --git a/src/views/Conversations/Components/Input/Emoji.jsx b/src/views/Conversations/Components/Input/Emoji.jsx index 734bba8..166043a 100644 --- a/src/views/Conversations/Components/Input/Emoji.jsx +++ b/src/views/Conversations/Components/Input/Emoji.jsx @@ -16,7 +16,7 @@ const InputTemplate = ({ disabled = false, inputEmoji }) => { placement={'right'} overlayInnerStyle={{ padding: 0, borderRadius: '8px' }} // fresh - content={} + content={} // title='😀' trigger='click' open={openPopup} diff --git a/src/views/Conversations/Components/Messages.jsx b/src/views/Conversations/Components/Messages.jsx index 89a1b22..e4601b1 100644 --- a/src/views/Conversations/Components/Messages.jsx +++ b/src/views/Conversations/Components/Messages.jsx @@ -5,7 +5,7 @@ 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'; +import { isEmpty, olog } from '@/utils/utils'; const Messages = ({ ...props }) => { // const currentConversation = useConversationStore(useShallow((state) => state.currentConversation)); @@ -21,12 +21,6 @@ const Messages = ({ ...props }) => { } }; - useEffect(() => { - if (activeMessages.length > 0) { - scrollToMessage(null, activeMessages.length - 1); - } - }, [activeMessages]); - const messageRefs = useRef([]); messageRefs.current = activeMessages.map((_, i) => messageRefs.current[i] ?? createRef()); @@ -36,6 +30,13 @@ const Messages = ({ ...props }) => { referance.current.scrollTop = referance.current.scrollHeight; }; + useEffect(() => { + if (activeMessages.length > 0) { + // toBottom(); + scrollToMessage(null, activeMessages.length - 1); + } + }, [activeMessages]); + const [previewVisible, setPreviewVisible] = useState(false); const [previewSrc, setPreviewSrc] = useState(); const onPreviewClose = () => { @@ -67,7 +68,7 @@ const Messages = ({ ...props }) => { // 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 ; + return ; } else if (/https?:\/\/[\S]+/gi.test(part)) { return ( diff --git a/src/views/Conversations/Conversations.css b/src/views/Conversations/Conversations.css index a982504..63f9987 100644 --- a/src/views/Conversations/Conversations.css +++ b/src/views/Conversations/Conversations.css @@ -1,4 +1,3 @@ - .ant-card .ant-card-head{ padding: 0 .5em .5em .5em; min-height: unset; @@ -18,8 +17,13 @@ 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 .emoji-text, +.chatwindow-wrapper .referrer-msg, +.chatwindow-wrapper .rce-mbox-reply-message +{ + /* font-family: 'Apple Color Emoji', 'Twemoji Mozilla', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji', sans-serif; */ + font-family: "Noto Color Emoji", 'Apple Color Emoji', 'Twemoji Mozilla', 'Segoe UI Emoji', 'Segoe UI Symbol', 'EmojiOne Color', 'Android Emoji', sans-serif; + font-weight: 500; } .chatwindow-wrapper .rce-mbox-text a{ color: #4f81a1; @@ -60,6 +64,8 @@ .chatwindow-wrapper .rce-mbox .rce-mbox-reply { background-color: rgba(236, 236, 236, 0.7); } -.chatwindow-wrapper .rce-mbox .epr-emoji-img{ +.chatwindow-wrapper .rce-mbox .epr-emoji-img, +.chatwindow-wrapper .rce-mbox .epr-emoji-native +{ display: inline-block; }