会话列表和消息右键菜单

src/views/Conversations/ChatWindow.jsx

@@ -18,16 +18,7 @@ const { Sider, Content, Header, Footer } = Layout;
  *
  */
 const ChatWindow = () => {
-  console.log('chat window;;;;;;;;;;;;;;;;;;;;;;;;');
-  // const { order_sn } = useParams();
-  // const { loginUser } = useAuthContext();
-  // const { currentConversation } = useConversationStore();
 
-  useEffect(() => {
-    console.log('chat window 222;;;;;;;;;;;;;;;;;;;;;;;;');
-
-    return () => {};
-  }, []);
   const [collapsedLeft, setCollapsedLeft] = useState(false);
   const [collapsedRight, setCollapsedRight] = useState(false);
 
@@ -40,7 +31,7 @@ const ChatWindow = () => {
           className='h-full overflow-y-auto'
           style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}
           collapsible={true}
-          breakpoint='xxl'
+          breakpoint='xl'
           collapsedWidth={73}
           collapsed={collapsedLeft}
           onBreakpoint={(broken) => {
@@ -76,7 +67,7 @@ const ChatWindow = () => {
           className=' overflow-y-auto'
           style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}
           collapsible={true}
-          breakpoint='xxl'
+          breakpoint='xl'
           collapsedWidth={0}
           trigger={null}
           collapsed={collapsedRight}>

src/views/Conversations/Components/ConversationsList.jsx

@@ -4,75 +4,22 @@ import { Button, Dropdown } from 'antd';
 import { MoreOutlined } from '@ant-design/icons';
 import { useAuthContext } from '@/stores/AuthContext';
 import { fetchOrderConversationsList, fetchConversationItemClose, fetchMessages } from '@/actions/ConversationActions';
-import { ChatList, } from 'react-chat-elements';
+import { ChatList, ChatItem } from 'react-chat-elements';
 import { isEmpty } from '@/utils/utils';
 import useConversationStore from '@/stores/ConversationStore';
 
-const CDropdown = (props) => {
-  const { delConversationitem } = useConversationStore();
-
-  const handleConversationItemClose = async () => {
-    await fetchConversationItemClose({ conversationid: props.sn, opisn: props.opi_sn });
-    delConversationitem(props);
-  };
-  return (
-    <Dropdown
-      key={'more-action'}
-      trigger={'click'}
-      menu={{
-        items: [{ key: 'close', danger: true, label: '关闭会话' }],
-        onClick: (e) => {
-          e.domEvent.stopPropagation();
-          switch (e.key) {
-            case 'close':
-              return handleConversationItemClose();
-
-            default:
-              return;
-          }
-        },
-      }}>
-      <Button key={'More'} type='text' title='More' className=' rounded-none text-gray-400' icon={<MoreOutlined />} size={'middle'} onClick={(e) => e.stopPropagation()} />
-    </Dropdown>
-  );
-}
 /**
  * []
  */
 const Conversations = () => {
-  const { state: orderRow } = useLocation()
+  const { state: orderRow } = useLocation();
   const { coli_guest_WhatsApp } = orderRow || {};
   const { order_sn } = useParams();
   const navigate = useNavigate();
   const { loginUser } = useAuthContext();
   const { userId } = loginUser;
-  const { initialState, activeConversations, currentConversation, conversationsList, addToConversationList, setCurrentConversation, receivedMessageList, setMsgLoading } = useConversationStore();
+  const { initialState, activeConversations, currentConversation, conversationsList, addToConversationList, delConversationitem, setCurrentConversation, receivedMessageList, setMsgLoading } =
-  const [chatlist, setChatlist] = useState([]);
+    useConversationStore();
-  useEffect(() => {
-    setChatlist(
-      conversationsList.map((item) => ({
-        ...item,
-        avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${item.whatsapp_name.trim() || item.whatsapp_phone_number}`,
-        id: item.sn,
-        alt: item.whatsapp_name,
-        title: item.whatsapp_name.trim() || item.whatsapp_phone_number,
-        // subtitle: item.whatsapp_phone_number,
-        // subtitle: item.lastMessage,
-        date: item.last_received_time, // last_send_time
-        unread: item.unread_msg_count,
-        // showMute: true,
-        // muted: false,
-        // showVideoCall: true,
-        // statusColor: '#ccd5ae',
-        // statusColorType: 'badge',
-        // statusText: 'online',
-        className: String(item.sn) === String(currentConversation.sn) ? '__active text-primary underline  bg-whatsapp-me ' : '',
-        customStatusComponents: [() => CDropdown(item)],
-      }))
-    );
-
-    return () => {};
-  }, [conversationsList, currentConversation]);
 
   const [switchToC, setSwitchToC] = useState({});
   const [shouldFetchCList, setShouldFetchCList] = useState(true);
@@ -118,7 +65,7 @@ const Conversations = () => {
   };
 
   const onSwitchConversation = (item) => {
-    if ( ! isEmpty(item.coli_sn)) {
+    if (!isEmpty(item.coli_sn)) {
       setSwitchToC(item);
       setShouldFetchCList(false);
       navigate(`/order/chat/${item.coli_sn}`, { replace: true });
@@ -128,13 +75,45 @@ const Conversations = () => {
     switchConversation(item);
   };
 
+  const handleConversationItemClose = async (item) => {
+    await fetchConversationItemClose({ conversationid: item.sn, opisn: item.opi_sn });
+    delConversationitem(item);
+  };
   return (
     <>
-      <ChatList
+      <div className=' overflow-x-hidden'>
-        className=' overflow-x-hidden'
+        {conversationsList.map((item) => (
-        dataSource={chatlist}
+          <Dropdown
-        onClick={(item) => onSwitchConversation(item)}
+            key={item.sn}
-      />
+            menu={{
+              items: [{ label: '关闭会话', key: 'close', danger: true, }],
+              onClick: ({ key, domEvent }) => {
+                domEvent.stopPropagation();
+                switch (key) {
+                  case 'close':
+                    return handleConversationItemClose(item);
+
+                  default:
+                    return;
+                }
+              },
+            }}
+            trigger={['contextMenu']}>
+            <ChatItem
+              {...item}
+              key={item.sn}
+              id={item.sn}
+              avatar={`https://api.dicebear.com/7.x/avataaars/svg?seed=${item.whatsapp_name.trim() || item.whatsapp_phone_number}`}
+              alt={`${item.whatsapp_name.trim()}`}
+              title={item.whatsapp_name.trim() || item.whatsapp_phone_number}
+              date={item.last_received_time}
+              unread={item.unread_msg_count}
+              className={String(item.sn) === String(currentConversation.sn) ? '__active text-primary underline  bg-whatsapp-me border-y-0 border-e-0 border-s-2 border-solid border-whatsapp-me ' : ''}
+              onClick={() => onSwitchConversation(item)}
+            />
+          </Dropdown>
+        ))}
+      </div>
     </>
   );
 };

src/views/Conversations/Components/Messages.jsx

@@ -53,23 +53,23 @@ const Messages = () => {
     <div>
       <Spin spinning={msgListLoading} tip={'正在读取...'} wrapperClassName='pt-8 '>
         {messagesList.map((message, index) => (
-          // <Dropdown
+          <Dropdown
-          //   key={message.key}
+            key={message.key}
-          //   menu={{
+            menu={{
-          //     items: [{ label: '回复', key: 'reply' }],
+              items: [{ label: '回复', key: 'reply' }],
-          //     onClick: ({ key, domEvent }) => {
+              onClick: ({ key, domEvent }) => {
-          //       domEvent.stopPropagation();
+                domEvent.stopPropagation();
-          //       switch (key) {
+                switch (key) {
-          //         case 'reply':
+                  case 'reply':
-          //           return setReferenceMsg(message);
+                    return setReferenceMsg(message);
 
-          //         default:
+                  default:
-          //           return;
+                    return;
-          //       }
+                }
-          //     },
+              },
-          //   }}
+            }}
-          //   trigger={['contextMenu']}
+            trigger={['contextMenu']}
-          // >
+          >
             <MessageBox
               key={message.key}
               {...message}
@@ -77,7 +77,7 @@ const Messages = () => {
               onOpen={() => handlePreview(message)}
               {...(message.type === 'text' ? { text: <div dangerouslySetInnerHTML={{ __html: message.text }}></div> } : {})}
             />
-          // </Dropdown>
+          </Dropdown>
         ))}
 
         <Image src={previewSrc} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />