修改store 取值

src/views/Conversations/Components/ConversationsList.jsx

@@ -16,19 +16,16 @@ const Conversations = () => {
   const { coli_guest_WhatsApp } = orderRow || {};
   const { order_sn } = useParams();
   const navigate = useNavigate();
-  const { loginUser } = useAuthStore();
-  const { userId } = loginUser;
-  const {
-    initialState,
-    activeConversations,
-    currentConversation,
-    conversationsList,
-    addToConversationList,
-    delConversationitem,
-    setCurrentConversation,
-    receivedMessageList,
-    setMsgLoading,
-  } = useConversationStore();
+  const userId = useAuthStore(state => state.loginUser.userId);
+  const initialState = useConversationStore((state) => state.initialState);
+  const activeConversations = useConversationStore((state) => state.activeConversations);
+  const currentConversation = useConversationStore((state) => state.currentConversation);
+  const conversationsList = useConversationStore((state) => state.conversationsList);
+  const addToConversationList = useConversationStore((state) => state.addToConversationList);
+  const delConversationitem = useConversationStore((state) => state.delConversationitem);
+  const setCurrentConversation = useConversationStore((state) => state.setCurrentConversation);
+  const receivedMessageList = useConversationStore((state) => state.receivedMessageList);
+  const setMsgLoading = useConversationStore((state) => state.setMsgLoading);
 
   const [switchToC, setSwitchToC] = useState({});
   const [shouldFetchCList, setShouldFetchCList] = useState(true);

src/views/Conversations/Components/Input/ImageUpload.jsx

@@ -43,7 +43,10 @@ const mockGetOSSData = () => ({
 });
 
 const ImageUpload = ({ disabled, invokeSendMessage }) => {
-  const { currentConversation, setComplexMsg, complexMsg } = useConversationStore();
+  const currentConversation = useConversationStore(state => state.currentConversation);
+  const setComplexMsg = useConversationStore(state => state.setComplexMsg);
+  const complexMsg = useConversationStore(state => state.complexMsg);
+
   const [uploading, setUploading] = useState(false);
   const [OSSData, setOSSData] = useState();
 

src/views/Conversations/Components/Input/Template.jsx

@@ -24,8 +24,9 @@ const splitTemplate = (template) => {
 const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
   const searchInputRef = useRef(null);
   const { notification } = App.useApp();
-  const { loginUser } = useAuthStore()
-  const { currentConversation, templates } = useConversationStore();
+  const loginUser = useAuthStore(state => state.loginUser);
+  const currentConversation = useConversationStore(state => state.currentConversation);
+  const templates = useConversationStore(state => state.templates);
   // 用于替换变量: customer, agent
   const valueMapped = { ...cloneDeep(currentConversation), ...objectMapper(loginUser, { username: [{ key: 'agent_name' }, { key: 'your_name' }] }) };
   useEffect(() => {

src/views/Conversations/Components/InputComposer.jsx

@@ -26,10 +26,16 @@ import InputImageUpload from './Input/ImageUpload';
 import dayjs from 'dayjs';
 
 const InputComposer = () => {
-  const {
-    loginUser: { userId },
-  } = useAuthStore();
-  const { websocket, websocketOpened, currentConversation, referenceMsg, setReferenceMsg, complexMsg, setComplexMsg, sentOrReceivedNewMessage } = useConversationStore();
+  const userId = useAuthStore(state => state.loginUser.userId);
+  const websocket = useConversationStore(state => state.websocket);
+  const websocketOpened = useConversationStore(state => state.websocketOpened);
+  const currentConversation = useConversationStore(state => state.currentConversation);
+  const referenceMsg = useConversationStore(state => state.referenceMsg);
+  const setReferenceMsg = useConversationStore(state => state.setReferenceMsg);
+  const complexMsg = useConversationStore(state => state.complexMsg);
+  const setComplexMsg = useConversationStore(state => state.setComplexMsg);
+  const sentOrReceivedNewMessage = useConversationStore(state => state.sentOrReceivedNewMessage);
+
   const talkabled = !isEmpty(currentConversation.sn) && websocketOpened;
   const gt24h = currentConversation.last_received_time ? dayjs().diff(dayjs(currentConversation.last_received_time), 'hour') > 24 : true;
   const textabled = talkabled && !gt24h;

src/views/Conversations/Components/Messages.jsx

@@ -1,13 +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 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) => (currentConversation.sn ? state.activeConversations[currentConversation.sn] : [])));
+  olog('invoke msg list');
 
   const messagesList = useMemo(
     () =>
@@ -49,6 +54,28 @@ const Messages = () => {
     setPreviewSrc(msg.data.uri);
   };
 
+  const RenderText = memo(function renderText({str}) {
+    const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji}\uFE0F?)/gu);
+    return (
+      <>
+        {(parts || []).map((part, index) => {
+          if (/\p{Emoji}\uFE0F?/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' />;
+          } else if (/https?:\/\/[\S]+/gi.test(part)) {
+            return (
+              <a href={part} target='_blank' key={`${part}${index}`} rel='noreferrer'>
+                {part}
+              </a>
+            );
+          } else {
+            return <span key={`${part}${index}`}>{part}</span>;
+          }
+        })}
+      </>
+    );
+  });
+
   return (
     <div>
       <Spin spinning={msgListLoading} tip={'正在读取...'} wrapperClassName='pt-8 '>
@@ -75,7 +102,7 @@ const Messages = () => {
               {...message}
               onReplyClick={() => setReferenceMsg(message)}
               onOpen={() => handlePreview(message)}
-              {...(message.type === 'text' ? { text: <div dangerouslySetInnerHTML={{ __html: message.text }}></div> } : {})}
+              text={<RenderText str={message?.text || ''} />}
             />
           </Dropdown>
         ))}

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 && (