fix: Emoji repeat

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

src/views/Conversations/Components/InputComposer.jsx

@@ -67,7 +67,13 @@ const InputComposer = () => {
   };
 
   const focusInput = () => {
-    textInputRef.current.focus({ cursor: 'end' });
+    textInputRef.current.focus({ cursor: 'end', preventScroll: true, });
+  };
+
+  const addEmoji = emoji => {
+    setTextContent(prevValue => {
+      return prevValue + emoji;
+    });
   };
 
   const handleSendText = () => {
@@ -129,7 +135,7 @@ const InputComposer = () => {
       <Flex justify={'space-between'} className=' bg-gray-200 p-1 rounded-b'>
         <Flex gap={4} className='*:text-primary *:rounded-none'>
           <InputTemplate key='templates' disabled={textabled} invokeSendMessage={invokeSendMessage} />
-          <InputEmoji key='emoji' disabled={!textabled} inputEmoji={(s) => setTextContent(`${textContent}${s}`)} />
+          <InputEmoji key='emoji' disabled={!textabled} inputEmoji={addEmoji} />
           {/* <InputImageUpload key={'addNewPic'} disabled={!textabled} invokeSendMessage={invokeSendMessage} /> */}
           {/* <Button type='text' className='' icon={<YoutubeOutlined />} size={'middle'} />
           <Button type='text' className='' icon={<AudioOutlined />} size={'middle'} />

src/views/Conversations/Components/Messages.jsx

@@ -8,7 +8,7 @@ import { Emoji } from 'emoji-picker-react';
 import { olog } from '@/utils/utils';
 
 const Messages = () => {
-  const currentConversation = useConversationStore(useShallow((state) => state.currentConversation));
+  // 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] : [])));
@@ -53,7 +53,7 @@ const Messages = () => {
           // 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='facebook' />;
+            return <Emoji key={`${part}${index}${code}`} unified={code} size={24} emojiStyle={'apple'} />;
           } else
           if (/https?:\/\/[\S]+/gi.test(part)) {
             return (

src/views/Conversations/Components/MessagesHeader.jsx

@@ -1,6 +1,6 @@
 import useConversationStore from '@/stores/ConversationStore';
 import useAuthStore from '@/stores/AuthStore'
-import { Flex, Typography, Avatar, Alert, Button, Tooltip } from 'antd';
+import { Flex, Typography, Avatar, Alert, Button, Tooltip, Spin } from 'antd';
 import { ReloadOutlined, ApiOutlined } from '@ant-design/icons';
 import { LoadingOutlined } from '@ant-design/icons';
 
@@ -11,6 +11,7 @@ const MessagesHeader = () => {
   const websocketRetrytimes = useConversationStore(state => state.websocketRetrytimes);
   const currentConversation = useConversationStore(state => state.currentConversation);
   const connectWebsocket = useConversationStore(state => state.connectWebsocket);
+  const msgListLoading = useConversationStore((state) => state.msgListLoading);
 
   return (
     <>
@@ -43,6 +44,7 @@ const MessagesHeader = () => {
                 没有WhatsApp号码
               </Typography.Text>
             )}
+            <Spin spinning={msgListLoading} />
           </Flex>
           <Flex vertical={true} justify='space-between'>
             <Typography.Text>{/* <LocalTimeClock /> <Typography.Text strong>{order?.location} </Typography.Text> */}</Typography.Text>

src/views/Conversations/Conversations.css

@@ -60,4 +60,6 @@
 .chatwindow-wrapper .rce-mbox .rce-mbox-reply {
     background-color: rgba(236, 236, 236, 0.7);
 }
-
+.chatwindow-wrapper .rce-mbox .epr-emoji-img{
+    display: inline-block;
+}