google Emoji; 更新totalNotify

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],
+    }));
   },
 });
 

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={<EmojiPicker skinTonesDisabled={true} emojiStyle='apple' onEmojiClick={handlePickEmoji} />}
+        content={<EmojiPicker skinTonesDisabled={true} emojiStyle='google' onEmojiClick={handlePickEmoji} />}
         // title='😀'
         trigger='click'
         open={openPopup}

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 <Emoji key={`${part}${index}${code}`} unified={code} size={24} emojiStyle={'apple'} />;
+            return <Emoji key={`${part}${index}${code}`} unified={code} size={24} emojiStyle={'google'} />;
           } else if (/https?:\/\/[\S]+/gi.test(part)) {
             return (
               <a href={part} target='_blank' key={`${part}${index}`} rel='noreferrer'>

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;
 }