feat: Chatroom component displays the number of people in the chat room

myZhangDong · myZhangDong · commit adc9a6629a4c · 2024-11-25T17:29:37.000+08:00
diff --git a/module/chat/Chat.tsx b/module/chat/Chat.tsx
@@ -70,7 +70,7 @@ export interface ChatProps {
   renderRepliedMessage?: (repliedMessage: ChatSDK.MessageBody | null) => ReactNode; // 自定义渲染Input上面的被回复的消息
   // Header 的 props
   headerProps?: Omit<HeaderProps, 'suffixIcon'> & {
-    suffixIcon: ('PIN' | 'THREAD' | 'AUDIO' | 'VIDEO' | ReactNode)[];
+    suffixIcon?: ('PIN' | 'THREAD' | 'AUDIO' | 'VIDEO' | ReactNode)[];
   };
   messageListProps?: MsgListProps;
   messageInputProps?: MessageInputProps;
diff --git a/module/chatroomMember/ChatroomMember.tsx b/module/chatroomMember/ChatroomMember.tsx
@@ -75,7 +75,7 @@ const ChatroomMember = (props: ChatroomMemberProps) => {
   const globalConfig = features?.chatroomMember;
   const themeMode = theme?.mode || 'light';
   const { addressStore } = rootStore;
-  const { getConversationList } = useChatroomMember(chatroomId);
+  const { getChatroomMembers } = useChatroomMember(chatroomId);
   useEffect(() => {
     if (!rootStore.loginState || !chatroomId) return;
     const chatroomData = addressStore.chatroom.filter(item => item.id === chatroomId)[0];
@@ -85,14 +85,14 @@ const ChatroomMember = (props: ChatroomMemberProps) => {
         .then(res => {
           // @ts-ignore TODO: getChatRoomDetails 类型错误 data 是数组
           rootStore.addressStore.setChatroom(res.data as ChatSDK.GetChatRoomDetailsResult);
-          getConversationList();
+          getChatroomMembers();
           eventHandler.dispatchSuccess('getChatRoomDetails');
         })
         .catch(err => {
           eventHandler.dispatchError('getChatRoomDetails', err);
         });
     } else {
-      getConversationList();
+      getChatroomMembers();
     }
   }, [rootStore.loginState, chatroomId]);
 
@@ -201,7 +201,7 @@ const ChatroomMember = (props: ChatroomMemberProps) => {
           data={allDataToRender}
           scrollDirection="down"
           loadMoreItems={() => {
-            getConversationList();
+            getChatroomMembers();
           }}
           renderItem={
             memberListProps?.renderItem
diff --git a/module/chatroomMessage/ChatroomMessage.tsx b/module/chatroomMessage/ChatroomMessage.tsx
@@ -12,6 +12,7 @@ import { Tooltip } from '../../component/tooltip/Tooltip';
 import { useTranslation } from 'react-i18next';
 import { renderTxt } from '../textMessage/TextMessage';
 import { eventHandler } from '../../eventHandler';
+import { usePinnedMessage } from '../hooks/usePinnedMessage';
 export interface ChatroomMessageProps {
   prefix?: string;
   className?: string;
@@ -48,6 +49,13 @@ const ChatroomMessage = (props: ChatroomMessageProps) => {
   let customAction;
   let menuNode: ReactNode | undefined;
   let moreAction: CustomAction = { visible: false };
+  const { pinMessage, unpinMessage, clearPinnedMessages, getPinnedMessages, list } =
+    usePinnedMessage({
+      conversation: {
+        conversationType: 'chatRoom',
+        conversationId: message.to,
+      },
+    });
 
   const [textToShow, setTextToShow] = useState((message as ChatSDK.TextMsgBody).msg);
 
@@ -76,6 +84,10 @@ const ChatroomMessage = (props: ChatroomMessageProps) => {
     };
   }
   if (owner === rootStore.client.user) {
+    moreAction.actions?.unshift({
+      content: 'PIN',
+      onClick: () => {},
+    });
     message.from != rootStore.client.user &&
       moreAction.actions?.unshift({
         content: 'MUTE',
@@ -153,6 +165,41 @@ const ChatroomMessage = (props: ChatroomMessageProps) => {
     setIsPopoverOpen(false);
   };
 
+  const handlePinMessage = () => {
+    console.log('pin message', message, list);
+
+    // list.forEach(item => {
+    //   console.log('------->listItem', item);
+    //   // @ts-ignore
+    //   unpinMessage(item.message.mid || item.message.id);
+    // });
+    // // @ts-ignore
+    // pinMessage(message.mid || message.id).then(() => {
+    //   rootStore.pinnedMessagesStore.pushPinnedMessage('chatRoom', message.to, {
+    //     operatorId: rootStore.client.user,
+    //     pinTime: Date.now(),
+    //     message,
+    //   });
+    // });
+
+    const promiseList = list.map(item => {
+      // @ts-ignore
+      return unpinMessage(item.message.mid || item.message.id);
+    });
+    Promise.all(promiseList).then(() => {
+      // @ts-ignore
+      pinMessage(message.mid || message.id).then(() => {
+        rootStore.pinnedMessagesStore.pushPinnedMessage('chatRoom', message.to, {
+          operatorId: rootStore.client.user,
+          pinTime: Date.now(),
+          message,
+        });
+      });
+    });
+
+    setIsPopoverOpen(false);
+  };
+
   const morePrefixCls = getPrefixCls('moreAction', customizePrefixCls);
   const moreClassString = classNames(morePrefixCls, {
     [`${morePrefixCls}-${themeMode}`]: !!themeMode,
@@ -165,28 +212,23 @@ const ChatroomMessage = (props: ChatroomMessageProps) => {
           if (item.content === 'RECALL') {
             return (
               <li key={index} onClick={recallMessage}>
-                <Icon type="ARROW_BACK" width={16} height={16} color="#5270AD"></Icon>
+                <Icon type="ARROW_BACK" width={16} height={16}></Icon>
                 {t('unsend')}
               </li>
             );
           } else if (item.content === 'TRANSLATE') {
             return (
               message?.type === 'txt' && (
                 <li key={index} onClick={translateMessage}>
-                  <Icon type="TRANSLATION" width={16} height={16} color="#5270AD"></Icon>
+                  <Icon type="TRANSLATION" width={16} height={16}></Icon>
                   {t('translate')}
                 </li>
               )
             );
           } else if (item.content === 'MUTE') {
             return (
               <li key={isMuted ? index : -index} onClick={muteMember}>
-                <Icon
-                  type={isMuted ? 'BELL' : 'BELL_SLASH'}
-                  width={16}
-                  height={16}
-                  color="#5270AD"
-                ></Icon>
+                <Icon type={isMuted ? 'BELL' : 'BELL_SLASH'} width={16} height={16}></Icon>
                 {isMuted ? t('unmute') : t('mute')}
               </li>
             );
@@ -196,10 +238,17 @@ const ChatroomMessage = (props: ChatroomMessageProps) => {
             }
             return (
               <li key={index} onClick={reportMessage}>
-                <Icon type="ENVELOPE" width={16} height={16} color="#5270AD"></Icon>
+                <Icon type="ENVELOPE" width={16} height={16}></Icon>
                 {t('report')}
               </li>
             );
+          } else if (item.content === 'PIN') {
+            return (
+              <li key={index} onClick={handlePinMessage}>
+                <Icon type="PIN" width={16} height={16}></Icon>
+                {t('Pin')}
+              </li>
+            );
           }
           return (
             <li
@@ -290,7 +339,7 @@ const ChatroomMessage = (props: ChatroomMessageProps) => {
         >
           <Icon
             type="ELLIPSIS"
-            color="#33B1FF"
+            color="var(--cui-primary-color5)"
             className={`${prefixCls}-body-action`}
             height={20}
           ></Icon>
diff --git a/module/conversation/ConversationList.tsx b/module/conversation/ConversationList.tsx
@@ -93,12 +93,14 @@ const Conversations: FC<ConversationListProps> = props => {
 
   const handleItemClick = (cvs: ConversationData[0], index: number) => () => {
     setActiveCvsId(cvs.conversationId);
-    cvsStore.setCurrentCvs({
-      chatType: cvs.chatType,
-      conversationId: cvs.conversationId,
-      name: cvs.name,
-      unreadCount: 0,
-    });
+    if (cvsStore.currentCvs.conversationId !== cvs.conversationId) {
+      cvsStore.setCurrentCvs({
+        chatType: cvs.chatType,
+        conversationId: cvs.conversationId,
+        name: cvs.name,
+        unreadCount: 0,
+      });
+    }
     onItemClick?.(cvs);
   };
 
diff --git a/module/hooks/chat.ts b/module/hooks/chat.ts
@@ -149,6 +149,24 @@ const useEventHandler = (props: ProviderProps) => {
               noticeType: 'pin',
               time,
             });
+            // Only one message is allowed to be pinned in the chat room
+            if (conversationType === 'chatRoom') {
+              const pinedMsg = getStore().messageStore.message[conversationType][
+                conversationId
+                //@ts-ignore
+              ].find(item => (item.mid === messageId || item.id === messageId) && item);
+              if (pinedMsg) {
+                getStore().pinnedMessagesStore.clearPinnedMessages(
+                  conversationType,
+                  conversationId,
+                );
+                getStore().pinnedMessagesStore.pushPinnedMessage(conversationType, conversationId, {
+                  operatorId: operatorId,
+                  pinTime: time,
+                  message: pinedMsg as ChatSDK.TextMsgBody,
+                });
+              }
+            }
             break;
           case 'unpin':
             getStore().pinnedMessagesStore.deletePinnedMessage(
@@ -360,6 +378,12 @@ const useEventHandler = (props: ProviderProps) => {
           );
         }
       },
+      onChatroomEvent: message => {
+        if (message.operation === 'memberPresence') {
+          const count = message.memberCount as number;
+          typeof count === 'number' && addressStore.updateChatroomMemberCount(message.id, count);
+        }
+      },
     });
 
     return () => {
diff --git a/module/hooks/useChatroomMember.ts b/module/hooks/useChatroomMember.ts
@@ -1,13 +1,14 @@
 import { useContext } from 'react';
 import { RootContext } from '../store/rootContext';
 import { getUsersInfo } from '../utils';
+import { runInAction } from 'mobx';
 const pageSize = 20;
 let pageNum = 1;
 const useChatroomMember = (chatroomId: string) => {
   const rootStore = useContext(RootContext).rootStore;
   const { client } = rootStore;
   let next = true;
-  const getConversationList = () => {
+  const getChatroomMembers = () => {
     client
       .listChatRoomMembers({
         chatRoomId: chatroomId,
@@ -31,6 +32,8 @@ const useChatroomMember = (chatroomId: string) => {
           return !(user in appUserInfo);
         });
         rootStore.addressStore.setChatroomMemberIds(chatroomId, members);
+        rootStore.addressStore.updateChatroomMemberCount(chatroomId, res.count);
+
         if (getInfoMembers.length > 0) {
           getUsersInfo({ userIdList: getInfoMembers, withPresence: false });
         }
@@ -40,7 +43,7 @@ const useChatroomMember = (chatroomId: string) => {
       });
   };
 
-  return { getConversationList, next };
+  return { getChatroomMembers, next };
 };
 
 const clearPageNum = () => {
diff --git a/module/store/AddressStore.ts b/module/store/AddressStore.ts
@@ -118,6 +118,7 @@ class AddressStore {
       getBlockList: action,
       addUsersToBlocklist: action,
       removeUserFromBlocklist: action,
+      updateChatroomMemberCount: action,
     });
   }
 
@@ -364,6 +365,13 @@ class AddressStore {
     // this.groups = [...this.groups, ...filteredGroups];
   }
 
+  updateChatroomMemberCount(roomId: string, count: number) {
+    const idx = this.chatroom.findIndex(item => item.id === roomId);
+    if (idx > -1) {
+      this.chatroom[idx].affiliations_count = count;
+    }
+  }
+
   setChatroomAdmins = (chatroomId: string, admins: string[]) => {
     const idx = this.chatroom.findIndex(item => item.id === chatroomId);
     if (idx > -1) {
@@ -451,9 +459,11 @@ class AddressStore {
   setChatroomMemberIds = (chatroomId: string, membersId: string[]) => {
     const idx = this.chatroom.findIndex(item => item.id === chatroomId);
     if (idx > -1) {
-      this.chatroom[idx].membersId = [
-        ...new Set([...(this.chatroom[idx].membersId || []), ...membersId]),
-      ];
+      runInAction(() => {
+        this.chatroom[idx].membersId = [
+          ...new Set([...(this.chatroom[idx].membersId || []), ...membersId]),
+        ];
+      });
     }
   };
 
