From ba10f2164168d7fcc459b7f0396a8d4ec86b2269 Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Mon, 4 Mar 2024 17:08:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=88=E6=81=AF=E6=BB=9A=E5=8A=A8;=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/msgUtils.js                           |  5 +-
 .../Conversations/Components/Input/Emoji.jsx  |  2 +-
 .../Components/InputComposer.jsx              | 10 ++-
 .../Conversations/Components/Messages.jsx     | 66 ++++++++++++-------
 .../Components/MessagesHeader.jsx             |  4 +-
 src/views/Conversations/Conversations.css     | 12 ++++
 6 files changed, 69 insertions(+), 30 deletions(-)

diff --git a/src/lib/msgUtils.js b/src/lib/msgUtils.js
index fae2c67..de9f751 100644
--- a/src/lib/msgUtils.js
+++ b/src/lib/msgUtils.js
@@ -375,6 +375,7 @@ export const whatsappError = {
  * 系统弹窗通知
  */
 export const handleNotification = (title, _options) => {
+  var notification;
   const options = {
     requireInteraction: true, // 设置手动关闭
     tag: 'global-sales-notification', // 通知ID，同类通知建议设置相同ID，避免通知过多遮挡桌面
@@ -384,11 +385,11 @@ export const handleNotification = (title, _options) => {
 
   // 检查用户是否同意接受通知
   if (Notification.permission === 'granted') {
-    var notification = new Notification(title, options);
+    notification = new Notification(title, options);
   } else if (Notification.permission !== 'denied') {
     Notification.requestPermission().then(function (permission) {
       if (permission === 'granted') {
-        var notification = new Notification(title, options);
+        notification = new Notification(title, options);
       }
     });
   } else {
diff --git a/src/views/Conversations/Components/Input/Emoji.jsx b/src/views/Conversations/Components/Input/Emoji.jsx
index 76bd564..734bba8 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={<EmojiPicker skinTonesDisabled={true} emojiStyle='facebook' onEmojiClick={handlePickEmoji} />}
+        content={<EmojiPicker skinTonesDisabled={true} emojiStyle='apple' onEmojiClick={handlePickEmoji} />}
         // title='😀'
         trigger='click'
         open={openPopup}
diff --git a/src/views/Conversations/Components/InputComposer.jsx b/src/views/Conversations/Components/InputComposer.jsx
index 40c3a2d..08d853b 100644
--- a/src/views/Conversations/Components/InputComposer.jsx
+++ b/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'} />
diff --git a/src/views/Conversations/Components/Messages.jsx b/src/views/Conversations/Components/Messages.jsx
index 5bfc890..1f6a3ce 100644
--- a/src/views/Conversations/Components/Messages.jsx
+++ b/src/views/Conversations/Components/Messages.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef, useMemo, memo } from 'react';
+import { useEffect, useState, useRef, useMemo, memo, createRef, forwardRef } from 'react';
 import { Image, Spin, Dropdown } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 import { MessageBox } from 'react-chat-elements';
@@ -8,16 +8,27 @@ 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] : [])));
   olog('invoke msg list');
 
-  const messagesEndRef = useRef(null);
+  const scrollToMessage = (id, index) => {
+    const _i = index || activeMessages.findIndex((msg) => msg.id === id);
+    if (_i >= 0) {
+      messageRefs.current[_i].current.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }
+
   useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [currentConversation.last_received_time]);
+    if (activeMessages.length > 0) {
+      scrollToMessage(null, activeMessages.length - 1);
+    }
+  }, [activeMessages]);
+
+  const messageRefs = useRef([]);
+  messageRefs.current = activeMessages.map((_, i) => messageRefs.current[i] ?? createRef());
 
   const [previewVisible, setPreviewVisible] = useState(false);
   const [previewSrc, setPreviewSrc] = useState();
@@ -42,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 (
@@ -59,32 +70,40 @@ const Messages = () => {
       </>
     );
   });
+  // eslint-disable-next-line react/display-name
+  const MessageBoxWithRef = forwardRef((props, ref) => (
+    <div ref={ref}>
+      <MessageBox {...props} />
+    </div>
+  ));
 
   return (
     <div>
       <Spin spinning={msgListLoading} tip={'正在读取...'} wrapperClassName='pt-8 '>
         {activeMessages.map((message, index) => (
-          <Dropdown
-            key={message.id}
-            menu={{
-              items: [{ label: '回复', key: 'reply', disabled: !['text'].includes(message.whatsapp_msg_type) }],
-              onClick: ({ key, domEvent }) => {
-                domEvent.stopPropagation();
-                switch (key) {
-                  case 'reply':
-                    return setReferenceMsg(message);
+          // <Dropdown
+          //   key={message.id}
+          //   menu={{
+          //     items: [{ label: '回复', key: 'reply', disabled: !['text'].includes(message.whatsapp_msg_type) }],
+          //     onClick: ({ key, domEvent }) => {
+          //       domEvent.stopPropagation();
+          //       switch (key) {
+          //         case 'reply':
+          //           return setReferenceMsg(message);
 
-                  default:
-                    return;
-                }
-              },
-            }}
-            trigger={['contextMenu']}>
-            <MessageBox
+          //         default:
+          //           return;
+          //       }
+          //     },
+          //   }}
+          //   trigger={['contextMenu']}>
+            <MessageBoxWithRef
+              ref={messageRefs.current[index]}
               key={message.id}
               {...message}
               position={message.sender === 'me' ? 'right' : 'left'}
               onReplyClick={() => setReferenceMsg(message)}
+              onReplyMessageClick={() => scrollToMessage(message.reply.id)}
               onOpen={() => handlePreview(message)}
               text={<RenderText str={message?.text || ''} />}
               {...(message.sender === 'me'
@@ -98,11 +117,10 @@ const Messages = () => {
                     replyButton: ['text'].includes(message.whatsapp_msg_type) ? true : false,
                   })}
             />
-          </Dropdown>
+          // </Dropdown>
         ))}
 
         <Image src={previewSrc} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />
-        <div ref={messagesEndRef}></div>
       </Spin>
     </div>
   );
diff --git a/src/views/Conversations/Components/MessagesHeader.jsx b/src/views/Conversations/Components/MessagesHeader.jsx
index 7febf18..9dbeb96 100644
--- a/src/views/Conversations/Components/MessagesHeader.jsx
+++ b/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>
diff --git a/src/views/Conversations/Conversations.css b/src/views/Conversations/Conversations.css
index c8e8a62..a982504 100644
--- a/src/views/Conversations/Conversations.css
+++ b/src/views/Conversations/Conversations.css
@@ -51,3 +51,15 @@
     word-wrap: break-word;
     height: 100%;
 }
+.chatwindow-wrapper .whatsappme-container .rce-mbox{
+    background-color: #ccd5ae;
+}
+.chatwindow-wrapper .whatsappme-container .rce-mbox-right-notch{
+    fill: #ccd5ae;
+}
+.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;
+}