@droppii-org/chat-mobile 0.2.65 → 0.2.67

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,156 @@ 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,
+      // });
       const conversation = useConversationStore
         .getState()
         .getCurrentConversation();
@@ -148,7 +291,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 +307,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 +317,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 +343,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 +365,7 @@ export const useChatListener = () => {
     };
   }, [
     onConversationChanged,
+    onGroupInfoChanged,
     onGroupMemberAdded,
     onGroupMemberDeleted,
     onMessagePinned,
@@ -225,5 +375,7 @@ export const useChatListener = () => {
     onRecvNewMessages,
     onRecvOfflineNewMessages,
     OnGroupMemberInfoChanged,
+    onJoinedGroupDeleted,
+    onGroupDismissed,
   ]);
 };

package/src/hooks/conversation/useGetGroupInfo.ts

@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query';
+import OpenIMSDK from '@droppii/openim-rn-client-sdk';
+import { conversationQueryKeys } from '../query-keys';
+
+export const useGetGroupInfo = (groupId = '') =>
+  useQuery({
+    queryKey: conversationQueryKeys.groupInfo(groupId),
+    queryFn: async () => {
+      try {
+        const res = await OpenIMSDK.getSpecifiedGroupsInfo([groupId]);
+        return res?.[0];
+      } catch (error) {
+        console.error('useGetGroupInfo error:', error);
+        return null;
+      }
+    },
+    enabled: !!groupId,
+    staleTime: 0,
+    refetchOnMount: 'always',
+  });

package/src/hooks/message/useSendMessage.ts

@@ -268,14 +268,22 @@ export const generateOfflinePushInfo = (message: MessageItem) => {
   const conversationData = useConversationStore
     ?.getState?.()
     ?.getCurrentConversation();
-  const operatorUserID = useUserStore.getState().user?.userID || '';
-  const title = conversationData?.showName || 'Droppii';
+  const operator = useUserStore.getState().user;
+  const operatorUserID = operator?.userID || '';
+  const isSingleChat =
+    conversationData?.conversationType === SessionType.Single;
+  const title = isSingleChat
+    ? operator?.nickname || 'Droppii'
+    : conversationData?.showName || 'Droppii';
+  const icon = isSingleChat
+    ? operator?.faceURL || ''
+    : conversationData?.faceURL || '';
   const desc = getMessagePreview(message);
   return {
     title,
     desc,
     ex: JSON.stringify({
-      icon: conversationData?.faceURL || '',
+      icon,
       conversationId: conversationData?.conversationID || '',
       userId: operatorUserID,
       groupId: conversationData?.groupID || '',

package/src/hooks/query-keys.ts

@@ -32,6 +32,7 @@ export const conversationQueryKeys = {
   detailBySourceId: (sourceId: string) => ['detailBySourceId', sourceId],
   joinedGroup: (groupId?: string) => [...conversationQueryKeys.all, groupId],
   create: (userId?: string) => ['create', userId],
+  groupInfo: (groupId: string) => ['groupInfo', groupId] as const,
 };
 
 export const usersQueryKeys = {

package/src/hooks/useConversationList.ts

@@ -25,14 +25,24 @@ export function useConversationList({
     enabled: enabled !== false,
     queryFn: async () => {
       const offset = (page - 1) * 500;
-      const conversations = await OpenIMSDK.getConversationListSplitApp({
-        offset,
-        count: 500,
-        applicationType,
-      });
+      const [conversations, joinedGroups] = await Promise.all([
+        OpenIMSDK.getConversationListSplitApp({
+          offset,
+          count: 500,
+          applicationType,
+        }),
+        OpenIMSDK.getJoinedGroupList(),
+      ]);
 
-      useConversationStore.getState().updateConversations(conversations);
-      return conversations;
+      const joinedGroupIds = new Set(joinedGroups.map((g) => g.groupID));
+      const resolved = conversations.map((conversation) =>
+        conversation.groupID && !joinedGroupIds.has(conversation.groupID)
+          ? { ...conversation, isNotInGroup: true }
+          : conversation
+      );
+
+      useConversationStore.getState().updateConversations(resolved);
+      return resolved;
     },
   });
 

package/src/screens/ChatInfo/ChatInfo.tsx

@@ -2,12 +2,15 @@ import { memo } from 'react';
 import { KContainer, KNavigation } from '@droppii/libs';
 import { useNavigation } from '@react-navigation/native';
 import { useGetConversationTarget } from '../../hooks/conversation/useGetConversationDetail';
+import { useGetGroupInfo } from '../../hooks/conversation/useGetGroupInfo';
 import { useConversation } from '../../store';
 import ChatInfoProfile from './ChatInfoProfile';
 import ChatInfoMediaRow from './ChatInfoMediaRow';
+import ChatInfoDescriptionRow from './ChatInfoDescriptionRow';
 import ChatInfoActions from './ChatInfoActions';
 import type { ChatInfoProps } from './types';
 import { trans } from '../../translation';
+import { isGroupConversation } from '../../utils/conversation';
 
 const ChatInfo = memo(
   ({
@@ -18,12 +21,17 @@ const ChatInfo = memo(
     onPressOrders,
     onPressCreateGroup,
     onPressAddToGroup,
+    onPressLeaveGroup,
   }: ChatInfoProps) => {
     const navigation = useNavigation();
 
     const conversation = useConversation(conversationId);
     const { data: target } = useGetConversationTarget(conversationId);
     const isTargetActive = target ? target.isActive : true;
+    const isGroup = isGroupConversation(conversation);
+    const { data: groupInfo } = useGetGroupInfo(
+      isGroup ? conversation?.groupID : undefined
+    );
 
     return (
       <KContainer.Page flex edges={['bottom']} background="#EBEDF2">
@@ -45,12 +53,20 @@ const ChatInfo = memo(
             onPressSearch={onPressSearch}
           />
           <ChatInfoMediaRow onPressMedia={onPressMedia} />
+          <KContainer.VisibleView visible={isGroup}>
+            <ChatInfoDescriptionRow
+              introduction={groupInfo?.introduction}
+              groupName={conversation?.showName}
+            />
+          </KContainer.VisibleView>
           <ChatInfoActions
             conversation={conversation}
             isTargetActive={isTargetActive}
+            isGroup={isGroup}
             onPressOrders={onPressOrders}
             onPressCreateGroup={onPressCreateGroup}
             onPressAddToGroup={onPressAddToGroup}
+            onPressLeaveGroup={onPressLeaveGroup}
           />
         </KContainer.ScrollView>
       </KContainer.Page>