@droppii-org/chat-mobile 0.2.66 → 0.2.68

package/src/components/Avatar/TripleAvatar.tsx

@@ -0,0 +1,119 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KColors } from '@droppii/libs';
+import { SingleAvatar } from './SingleAvatar';
+
+interface TripleAvatarProps {
+  primarySource: string | null | undefined;
+  secondarySource: string | null | undefined;
+  tertiarySource: string | null | undefined;
+  size: number;
+  borderColor: string;
+  borderWidth: number;
+  placeholderColor: string;
+  primaryFullName?: string;
+  secondaryFullName?: string;
+  tertiaryFullName?: string;
+}
+
+export const TripleAvatar = memo(
+  ({
+    primarySource,
+    secondarySource,
+    tertiarySource,
+    size,
+    borderColor,
+    borderWidth,
+    placeholderColor,
+    primaryFullName,
+    secondaryFullName,
+    tertiaryFullName,
+  }: TripleAvatarProps) => {
+    const circleSize = Math.round(size * 0.6);
+    const topOffset = Math.round((size - circleSize) / 2);
+    const clusterBorderWidth = borderWidth + 1;
+
+    return (
+      <KContainer.View
+        style={[styles.tripleAvatarContainer, { width: size, height: size }]}
+      >
+        <KContainer.View
+          style={[
+            styles.tripleAvatarChild,
+            styles.tripleAvatarBottomLeft,
+            { width: circleSize, height: circleSize },
+          ]}
+        >
+          <SingleAvatar
+            source={secondarySource}
+            size={circleSize}
+            borderColor={borderColor}
+            borderWidth={clusterBorderWidth}
+            placeholderColor={placeholderColor}
+            backgroundColor={KColors.palette.gray.w300}
+            fullName={secondaryFullName}
+          />
+        </KContainer.View>
+        <KContainer.View
+          style={[
+            styles.tripleAvatarChild,
+            styles.tripleAvatarBottomRight,
+            { width: circleSize, height: circleSize },
+          ]}
+        >
+          <SingleAvatar
+            source={tertiarySource}
+            size={circleSize}
+            borderColor={borderColor}
+            borderWidth={clusterBorderWidth}
+            placeholderColor={placeholderColor}
+            backgroundColor={KColors.palette.gray.w300}
+            fullName={tertiaryFullName}
+          />
+        </KContainer.View>
+        <KContainer.View
+          style={[
+            styles.tripleAvatarChild,
+            styles.tripleAvatarTop,
+            { width: circleSize, height: circleSize, left: topOffset },
+          ]}
+        >
+          <SingleAvatar
+            source={primarySource}
+            size={circleSize}
+            borderColor={borderColor}
+            borderWidth={clusterBorderWidth}
+            placeholderColor={placeholderColor}
+            backgroundColor={KColors.palette.gray.w300}
+            fullName={primaryFullName}
+          />
+        </KContainer.View>
+      </KContainer.View>
+    );
+  }
+);
+
+TripleAvatar.displayName = 'TripleAvatar';
+
+const styles = StyleSheet.create({
+  tripleAvatarContainer: {
+    position: 'relative',
+  },
+  tripleAvatarChild: {
+    position: 'absolute',
+  },
+  tripleAvatarTop: {
+    top: 0,
+    zIndex: 3,
+  },
+  tripleAvatarBottomLeft: {
+    bottom: 0,
+    left: 0,
+    zIndex: 1,
+  },
+  tripleAvatarBottomRight: {
+    bottom: 0,
+    right: 0,
+    zIndex: 2,
+  },
+});

package/src/components/Avatar/index.ts

@@ -1,5 +1,7 @@
 export { default as Avatar } from './Avatar';
 export { SingleAvatar } from './SingleAvatar';
 export { DoubleAvatar } from './DoubleAvatar';
+export { TripleAvatar } from './TripleAvatar';
+export { QuadAvatar } from './QuadAvatar';
 export { AvatarBadge } from './AvatarBadge';
 export type { AvatarProps } from './Avatar.types';

package/src/components/ThreadCard/AvatarSection.tsx

@@ -3,7 +3,7 @@ import { Avatar } from '../Avatar';
 import { PeerType, type ConversationItem } from '@droppii/openim-rn-client-sdk';
 
 interface AvatarSectionProps extends Partial<
-  Pick<ConversationItem, 'peerType'>
+  Pick<ConversationItem, 'peerType' | 'members'>
 > {
   avatar: string | null;
   fullName: string;
@@ -11,7 +11,13 @@ interface AvatarSectionProps extends Partial<
 }
 
 export const AvatarSection = memo(
-  ({ avatar, fullName, peerType, size = 'md' }: AvatarSectionProps) => {
+  ({
+    avatar,
+    fullName,
+    peerType,
+    members,
+    size = 'md',
+  }: AvatarSectionProps) => {
     if (peerType === PeerType.Bot) {
       return (
         <Avatar
@@ -34,6 +40,56 @@ export const AvatarSection = memo(
       );
     }
 
+    const groupMembers = Array.isArray(members) ? members : [];
+
+    if (peerType === PeerType.Group && !avatar && groupMembers.length >= 4) {
+      const [first, second, third] = groupMembers;
+      const remainingCount = groupMembers.length - 3;
+      return (
+        <Avatar
+          type="quad"
+          source={first?.faceURL ?? null}
+          fullName={first?.nickname}
+          secondarySource={second?.faceURL ?? null}
+          secondaryFullName={second?.nickname}
+          tertiarySource={third?.faceURL ?? null}
+          tertiaryFullName={third?.nickname}
+          remainingCount={remainingCount}
+          size={size}
+        />
+      );
+    }
+
+    if (peerType === PeerType.Group && !avatar && groupMembers.length === 3) {
+      const [first, second, third] = groupMembers;
+      return (
+        <Avatar
+          type="triple"
+          source={first?.faceURL ?? null}
+          fullName={first?.nickname}
+          secondarySource={second?.faceURL ?? null}
+          secondaryFullName={second?.nickname}
+          tertiarySource={third?.faceURL ?? null}
+          tertiaryFullName={third?.nickname}
+          size={size}
+        />
+      );
+    }
+
+    if (peerType === PeerType.Group && !avatar && groupMembers.length === 2) {
+      const [first, second] = groupMembers;
+      return (
+        <Avatar
+          type="double"
+          source={first?.faceURL ?? null}
+          fullName={first?.nickname}
+          secondarySource={second?.faceURL ?? null}
+          secondaryFullName={second?.nickname}
+          size={size}
+        />
+      );
+    }
+
     return <Avatar source={avatar} fullName={fullName} size={size} />;
   }
 );

package/src/components/ThreadCard/NamePrefixIcon.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { Image, StyleSheet } from 'react-native';
-import { KContainer, KImage, KColors } from '@droppii/libs';
+import { KContainer, KImage, KColors, type KSpacing } from '@droppii/libs';
 import Images from '../../assets/images';
 import { PeerType } from '@droppii/openim-rn-client-sdk';
 
@@ -13,34 +13,41 @@ const styles = StyleSheet.create({
 
 interface NamePrefixIconProps {
   peerType?: PeerType | string;
+  marginR?: KSpacing;
 }
 
-export const NamePrefixIcon = memo(({ peerType }: NamePrefixIconProps) => {
-  if (peerType === PeerType.Bot) {
-    return (
-      <KContainer.View marginR="0.25rem">
-        <Image source={Images.ICON_DROPPII} style={styles.icon} />
-      </KContainer.View>
-    );
-  }
+export const NamePrefixIcon = memo(
+  ({ peerType, marginR = '0.25rem' }: NamePrefixIconProps) => {
+    if (peerType === PeerType.Bot) {
+      return (
+        <KContainer.View marginR={marginR}>
+          <Image source={Images.ICON_DROPPII} style={styles.icon} />
+        </KContainer.View>
+      );
+    }
 
-  if (peerType === PeerType.Group) {
-    return (
-      <KContainer.View marginR="0.25rem">
-        <KImage.VectorIcons name="user-two-b" size={14} color={KColors.black} />
-      </KContainer.View>
-    );
-  }
+    if (peerType === PeerType.Group) {
+      return (
+        <KContainer.View marginR={marginR}>
+          <KImage.VectorIcons
+            name="user-two-b"
+            size={14}
+            color={KColors.black}
+          />
+        </KContainer.View>
+      );
+    }
 
-  // if (peerType === DChatPeerType.CUSTOMER) {
-  //   return (
-  //     <KContainer.View marginR="0.25rem">
-  //       <Image source={Images.ICON_DROPPII} style={styles.icon} />
-  //     </KContainer.View>
-  //   );
-  // }
+    // if (peerType === DChatPeerType.CUSTOMER) {
+    //   return (
+    //     <KContainer.View marginR={marginR}>
+    //       <Image source={Images.ICON_DROPPII} style={styles.icon} />
+    //     </KContainer.View>
+    //   );
+    // }
 
-  return null;
-});
+    return null;
+  }
+);
 
 NamePrefixIcon.displayName = 'NamePrefixIcon';

package/src/components/ThreadCard/ThreadCard.tsx

@@ -33,6 +33,7 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
     peerType,
     showName,
     faceURL,
+    members,
     unreadCount = 0,
     recvMsgOpt = MessageReceiveOptType.Normal,
     isPinned,
@@ -120,6 +121,7 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
           avatar={faceURL ?? null}
           fullName={fullName}
           peerType={peerType}
+          members={members}
         />
 
         {/* Chat-Content */}

package/src/components/messages/groupNotificationMessage/index.tsx

@@ -0,0 +1,28 @@
+import { memo } from 'react';
+import { KLabel } from '@droppii/libs';
+import { trans } from '../../../translation';
+import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
+import {
+  GROUP_NOTIFICATION_TEXT,
+  getNotificationOpUserNickname,
+} from '../../../utils/messageUtils';
+import type { BaseLegendMessageProps } from '../types';
+
+export const GroupNotificationMessage = memo(
+  ({ message, isOutgoing }: BaseLegendMessageProps) => {
+    const notification = GROUP_NOTIFICATION_TEXT[message.contentType];
+    if (!notification) return null;
+
+    const sender = isOutgoing
+      ? 'Bạn'
+      : message.senderNickname || getNotificationOpUserNickname(message) || '';
+
+    return (
+      <KLabel.Text typo="TextXsNormal" color={CHAT_BUBBLE_COLORS.dayLabel}>
+        {trans(notification.bySenderKey, { sender })}
+      </KLabel.Text>
+    );
+  }
+);
+
+GroupNotificationMessage.displayName = 'GroupNotificationMessage';

package/src/context/ChatContext.tsx

@@ -130,7 +130,7 @@ const ChatSdkBridge = () => {
 };
 
 export const ChatProvider = ({ ...props }: ChatProviderProps) => {
-  const { enabled = false } = props;
+  const { enabled = true } = props;
 
   if (!enabled) {
     return props.children;

package/src/context/ChatDetailContext.tsx

@@ -5,6 +5,7 @@ import {
   useEffect,
   useMemo,
   useState,
+  type ComponentType,
 } from 'react';
 import { DeviceEventEmitter } from 'react-native';
 import {
@@ -189,3 +190,17 @@ export const ChatDetailProvider = ({ children }: ChatDetailProviderProps) => {
     </ChatDetailContext.Provider>
   );
 };
+
+export function withChatDetailProvider<P extends object>(
+  Component: ComponentType<P>
+): ComponentType<P> {
+  const WithChatDetailProvider = (props: P) => (
+    <ChatDetailProvider>
+      <Component {...props} />
+    </ChatDetailProvider>
+  );
+  WithChatDetailProvider.displayName = `withChatDetailProvider(${
+    Component.displayName || Component.name || 'Component'
+  })`;
+  return WithChatDetailProvider;
+}

package/src/core/useChatListener.ts

@@ -2,12 +2,15 @@ import OpenIMSDK, {
   MessageReceiveOptType,
   MessageType,
   OpenIMEvent,
+  SessionType,
   type ConversationItem,
+  type GroupItem,
   type GroupMemberItem,
   type MessageItem,
   type MessagePinned,
   type RevokedInfo,
 } from '@droppii/openim-rn-client-sdk';
+import { useQueryClient } from '@tanstack/react-query';
 import { useCallback, useEffect } from 'react';
 import { useConversationStore } from '../store/conversation';
 import { ToastFlashMessage } from '../utils/toastFlashMessage';
@@ -18,22 +21,31 @@ import isEmpty from 'lodash/isEmpty';
 import { markMessageRevoked, useMessageStore } from '../store/message';
 import { syncPinnedMessagesOnEvent } from '../hooks/message/usePinMessage';
 import { belongsToConversation } from '../utils/message';
+import { getConversationID } from '../utils/conversation';
 import { DeviceEventEmitter } from 'react-native';
 import { ChatEvent } from '../types/events';
+import { conversationQueryKeys } from '../hooks/query-keys';
 
 export const useChatListener = () => {
   const updateOneMessage = useMessageStore((state) => state.updateOneMessage);
   const currentUserId = useUserStore((s) => s.user?.userID);
   const onPressFlashMessage = useChatContext()?.onPressFlashMessage;
   const isShowFLashMessage = useChatContext()?.isShowFLashMessage;
+  const queryClient = useQueryClient();
 
   const onSendMessageProgress = useCallback(
-    ({ progress, message }: { progress: number; message: MessageItem }) => {
-      console.log('[Listener] SendMessageProgress', {
-        clientMsgID: message.clientMsgID,
-        status: message.status,
-        progress,
-      });
+    ({
+      progress: _progress,
+      message,
+    }: {
+      progress: number;
+      message: MessageItem;
+    }) => {
+      // console.log('[Listener] SendMessageProgress', {
+      //   clientMsgID: message.clientMsgID,
+      //   status: message.status,
+      //   progress,
+      // });
       updateOneMessage(message);
     },
     [updateOneMessage]
@@ -41,6 +53,7 @@ export const useChatListener = () => {
 
   const onConversationChanged = useCallback(
     (conversations: ConversationItem[]) => {
+      // console.log('[Listener] OnConversationChanged', conversations);
       const oldMap = useConversationStore.getState().map;
       const visibleConversations: ConversationItem[] = [];
 
@@ -87,26 +100,157 @@ export const useChatListener = () => {
   );
 
   const onNewConversation = useCallback((conversations: ConversationItem[]) => {
-    console.log('[Listener] OnNewConversation', conversations);
+    // console.log(
+    //   '[Listener] OnNewConversation',
+    //   conversations.map((c) => ({
+    //     conversationID: c.conversationID,
+    //     groupID: c.groupID,
+    //     isNotInGroup: c.isNotInGroup,
+    //     isGuardedRemoved: c.groupID
+    //       ? useConversationStore.getState().removedGroupIds.has(c.groupID)
+    //       : false,
+    //   }))
+    // );
     useConversationStore.getState().updateConversations(conversations);
   }, []);
 
-  const onGroupMemberAdded = useCallback((member: GroupMemberItem) => {
-    console.log('[Listener] OnGroupMemberAdded', {
-      userID: member.userID,
-      groupID: member.groupID,
-    });
-  }, []);
+  const onGroupInfoChanged = useCallback(
+    (group: GroupItem) => {
+      // console.log('[Listener] OnGroupInfoChanged', {
+      //   groupID: group.groupID,
+      //   memberCount: group.memberCount,
+      // });
+      queryClient.setQueryData(
+        conversationQueryKeys.groupInfo(group.groupID),
+        group
+      );
+    },
+    [queryClient]
+  );
 
-  const onGroupMemberDeleted = useCallback((member: GroupMemberItem) => {
-    console.log('[Listener] OnGroupMemberDeleted', {
-      userID: member.userID,
-      groupID: member.groupID,
-    });
-  }, []);
+  const onGroupMemberAdded = useCallback(
+    (member: GroupMemberItem) => {
+      // console.log('[Listener] OnGroupMemberAdded', {
+      //   userID: member.userID,
+      //   groupID: member.groupID,
+      //   isCurrentUser: member.userID === currentUserId,
+      // });
+      queryClient.invalidateQueries({
+        queryKey: conversationQueryKeys.groupInfo(member.groupID),
+      });
+
+      // The current user (re)joined this group — lift the removal guard so
+      // a future OnConversationChanged/OnNewConversation for it isn't dropped.
+      if (member.userID === currentUserId) {
+        useConversationStore
+          .getState()
+          .restoreGroupConversation(member.groupID);
+      }
+    },
+    [queryClient, currentUserId]
+  );
+
+  const removeGroupConversation = useCallback(
+    (
+      groupID: string,
+      groupName: string | undefined,
+      reason: 'left' | 'dismissed' | 'kicked'
+    ) => {
+      // console.log('[Listener] removeGroupConversation', { groupID, reason });
+
+      // TEMPORARILY DISABLED: OnConversationChanged/OnNewConversation can
+      // still race this removal and resurrect the conversation before the
+      // removedGroupIds guard is proven reliable. Flip this back to `true`
+      // once that race is confirmed fixed.
+      const REMOVE_FLOW_ENABLED: boolean = false;
+      if (!REMOVE_FLOW_ENABLED) return;
+
+      const conversationID = getConversationID(SessionType.Group, groupID);
+      const conversation = useConversationStore.getState().map[conversationID];
+      const isCurrentConversation =
+        useConversationStore.getState().currentConversationId ===
+        conversationID;
+
+      // Marks groupID as removed so any late-arriving conversation-sync event
+      // for it (see onConversationChanged/onNewConversation) is dropped
+      // instead of silently resurrecting the conversation we just removed.
+      useConversationStore.getState().removeGroupConversation(groupID);
+
+      queryClient.removeQueries({
+        queryKey: conversationQueryKeys.groupInfo(groupID),
+      });
+
+      ToastFlashMessage.show({
+        key: `group-removed-${groupID}`,
+        title: groupName || conversation?.showName || 'Nhóm',
+        body:
+          reason === 'dismissed'
+            ? 'Nhóm đã bị giải tán'
+            : reason === 'kicked'
+              ? 'Bạn đã bị mời khỏi nhóm'
+              : 'Bạn không còn trong nhóm này',
+      });
+
+      if (isCurrentConversation) {
+        DeviceEventEmitter.emit(ChatEvent.GroupRemoved, {
+          groupID,
+          reason,
+        });
+      }
+    },
+    [queryClient]
+  );
+
+  const onGroupMemberDeleted = useCallback(
+    (member: GroupMemberItem) => {
+      // console.log('[Listener] OnGroupMemberDeleted', {
+      //   userID: member.userID,
+      //   groupID: member.groupID,
+      //   isCurrentUser: member.userID === currentUserId,
+      // });
+      queryClient.invalidateQueries({
+        queryKey: conversationQueryKeys.groupInfo(member.groupID),
+      });
+
+      // The removed member is the current user themselves — they were kicked,
+      // so their conversation for this group must be dropped like a leave/dismiss.
+      if (member.userID === currentUserId) {
+        removeGroupConversation(member.groupID, undefined, 'kicked');
+      }
+    },
+    [queryClient, currentUserId, removeGroupConversation]
+  );
+
+  const onJoinedGroupDeleted = useCallback(
+    (group: GroupItem) => {
+      // console.log('[Listener] OnJoinedGroupDeleted', {
+      //   groupID: group.groupID,
+      //   groupName: group.groupName,
+      // });
+      removeGroupConversation(group.groupID, group.groupName, 'left');
+    },
+    [removeGroupConversation]
+  );
+
+  const onGroupDismissed = useCallback(
+    (group: GroupItem) => {
+      // console.log('[Listener] OnGroupDismissed', {
+      //   groupID: group.groupID,
+      //   groupName: group.groupName,
+      // });
+      removeGroupConversation(group.groupID, group.groupName, 'dismissed');
+    },
+    [removeGroupConversation]
+  );
 
   const OnGroupMemberInfoChanged = useCallback(
     (member: GroupMemberItem) => {
+      // console.log('[Listener] OnGroupMemberInfoChanged', {
+      //   userID: member.userID,
+      //   groupID: member.groupID,
+      //   permissions: member.permissions,
+      //   roleLevel: member.roleLevel,
+      // });
       const conversation = useConversationStore
         .getState()
         .getCurrentConversation();
@@ -148,7 +292,7 @@ export const useChatListener = () => {
   );
 
   const onRecvNewMessages = useCallback((messages: MessageItem[]) => {
-    console.log('[Listener] OnRecvNewMessages', messages);
+    // console.log('[Listener] OnRecvNewMessages', messages);
     const conversationId =
       useConversationStore.getState().currentConversationId;
     const targetUserId = useConversationStore.getState().currentUserId;
@@ -164,8 +308,8 @@ export const useChatListener = () => {
     relevant.forEach((msg) => useMessageStore.getState().pushNewMessage(msg));
   }, []);
 
-  const onRecvOfflineNewMessages = useCallback((messages: MessageItem[]) => {
-    console.log('[Listener] onRecvOfflineNewMessages', messages);
+  const onRecvOfflineNewMessages = useCallback((_messages: MessageItem[]) => {
+    // console.log('[Listener] onRecvOfflineNewMessages', _messages);
   }, []);
 
   useEffect(() => {
@@ -174,12 +318,15 @@ export const useChatListener = () => {
     OpenIMSDK.on(OpenIMEvent.OnNewConversation, onNewConversation);
 
     // Group members
+    OpenIMSDK.on(OpenIMEvent.OnGroupInfoChanged, onGroupInfoChanged);
     OpenIMSDK.on(OpenIMEvent.OnGroupMemberAdded, onGroupMemberAdded);
     OpenIMSDK.on(OpenIMEvent.OnGroupMemberDeleted, onGroupMemberDeleted);
     OpenIMSDK.on(
       OpenIMEvent.OnGroupMemberInfoChanged,
       OnGroupMemberInfoChanged
     );
+    OpenIMSDK.on(OpenIMEvent.OnJoinedGroupDeleted, onJoinedGroupDeleted);
+    OpenIMSDK.on(OpenIMEvent.OnGroupDismissed, onGroupDismissed);
 
     // Message status
     OpenIMSDK.on(OpenIMEvent.SendMessageProgress, onSendMessageProgress);
@@ -197,12 +344,15 @@ export const useChatListener = () => {
       OpenIMSDK.off(OpenIMEvent.OnNewConversation, onNewConversation);
 
       // Group members
+      OpenIMSDK.off(OpenIMEvent.OnGroupInfoChanged, onGroupInfoChanged);
       OpenIMSDK.off(OpenIMEvent.OnGroupMemberAdded, onGroupMemberAdded);
       OpenIMSDK.off(OpenIMEvent.OnGroupMemberDeleted, onGroupMemberDeleted);
-      OpenIMSDK.on(
+      OpenIMSDK.off(
         OpenIMEvent.OnGroupMemberInfoChanged,
         OnGroupMemberInfoChanged
       );
+      OpenIMSDK.off(OpenIMEvent.OnJoinedGroupDeleted, onJoinedGroupDeleted);
+      OpenIMSDK.off(OpenIMEvent.OnGroupDismissed, onGroupDismissed);
 
       // Message status
       OpenIMSDK.off(OpenIMEvent.SendMessageProgress, onSendMessageProgress);
@@ -216,6 +366,7 @@ export const useChatListener = () => {
     };
   }, [
     onConversationChanged,
+    onGroupInfoChanged,
     onGroupMemberAdded,
     onGroupMemberDeleted,
     onMessagePinned,
@@ -225,5 +376,7 @@ export const useChatListener = () => {
     onRecvNewMessages,
     onRecvOfflineNewMessages,
     OnGroupMemberInfoChanged,
+    onJoinedGroupDeleted,
+    onGroupDismissed,
   ]);
 };

package/src/hooks/conversation/useGetGroupInfo.ts

@@ -15,4 +15,6 @@ export const useGetGroupInfo = (groupId = '') =>
       }
     },
     enabled: !!groupId,
+    staleTime: 0,
+    refetchOnMount: 'always',
   });