@droppii-org/chat-mobile 0.2.66 → 0.2.67

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

@@ -15,4 +15,6 @@ export const useGetGroupInfo = (groupId = '') =>
       }
     },
     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/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/ChatInfoProfile.tsx

@@ -93,12 +93,15 @@ const ChatInfoProfile = memo(
             fullName={showName}
             badge={badge}
           />
-          <KContainer.View row alignItems marginT="0.5rem">
-            <NamePrefixIcon peerType={conversation?.peerType} />
+          <KContainer.View row alignItems marginT="0.5rem" paddingH={'0.75rem'}>
+            <NamePrefixIcon
+              peerType={conversation?.peerType}
+              marginR="0.5rem"
+            />
             <KLabel.Text
               typo="TextLgBold"
               color={KColors.black}
-              numberOfLines={1}
+              numberOfLines={2}
             >
               {showName}
             </KLabel.Text>

package/src/screens/chat-detail/ChatComposer.tsx

@@ -63,7 +63,11 @@ import { ChatCurrentQuotedMessage } from './ChatCurrentQuotedMessage';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
 import { openBotMenuSheet } from './BotMenuSheet';
 import { UIUtils } from '../../utils/UIUtils';
-import { GroupPermission, SessionType } from '@droppii/openim-rn-client-sdk';
+import {
+  GroupPermission,
+  PeerType,
+  SessionType,
+} from '@droppii/openim-rn-client-sdk';
 import { useConversationStore } from '../../store';
 
 interface ChatComposerInternalProps {
@@ -88,10 +92,12 @@ export const ChatComposer = memo(
 
     const {
       isBotConversation,
+      conversation,
       conversationFlow,
       conversationFlowMainMenu,
       flowState,
     } = useChatDetailContext();
+    const isGroupConversation = conversation?.peerType === PeerType.Group;
     const { mutate: runFlow, isPending } = useRunFlow();
     const { mutate: resetFlow } = useResetFlow();
     const { mutateAsync: closeSupportSession } = useCloseSupportSession();
@@ -409,7 +415,7 @@ export const ChatComposer = memo(
       conversationFlow?.flowCurrentStep?.type === ReactFlowsNodeTypes.Start &&
       isEmptyMessage;
 
-    if (isDisableCompose) {
+    if (isDisableCompose && !isGroupConversation) {
       content = (
         <KContainer.View row alignItems justifyContent>
           <KContainer.View marginR="0.25rem">
@@ -441,14 +447,17 @@ export const ChatComposer = memo(
       content = (
         <KContainer.View background={'#F9F9FA'}>
           <ChatCurrentQuotedMessage />
-          <ChatQuickActions
-            visible
-            actions={DEFAULT_QUICK_ACTIONS}
-            onActionPress={(action) =>
-              console.log('[ChatComposer] quick action:', action.id)
-            }
-          />
-
+          <KContainer.VisibleView
+            visible={conversation?.peerType === PeerType.Bot}
+          >
+            <ChatQuickActions
+              visible
+              actions={DEFAULT_QUICK_ACTIONS}
+              onActionPress={(action) =>
+                console.log('[ChatComposer] quick action:', action.id)
+              }
+            />
+          </KContainer.VisibleView>
           {compose.showLinkPreview && (
             <ChatLinkPreview
               metadata={compose.urlMetadata}

package/src/screens/chat-detail/ChatDetail.tsx

@@ -32,7 +32,7 @@ import {
 } from '../../hooks/conversation/useGetConversationDetail';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import { useMessages } from '../../hooks/message/useMessages';
-import { ChatEvent } from '../../types/events';
+import { ChatEvent, type GroupRemovedPayload } from '../../types/events';
 import { useSetIsShowFLashMessage } from '../../context/global';
 
 const ChatDetail = memo(
@@ -112,6 +112,17 @@ const ChatDetail = memo(
       };
     }, [conversationId, targetUserId, targetGroupId, setShowFLashMessage]);
 
+    useEffect(() => {
+      const sub = DeviceEventEmitter.addListener(
+        ChatEvent.GroupRemoved,
+        (payload: GroupRemovedPayload) => {
+          if (payload.groupID !== targetGroupId) return;
+          (onBack ?? handleBackDefault)();
+        }
+      );
+      return () => sub.remove();
+    }, [targetGroupId, onBack, handleBackDefault]);
+
     const resolvedShowAddMember =
       showAddMember ?? shouldShowAddMember(conversation);
 

package/src/screens/chat-detail/ChatDetailHeader.tsx

@@ -12,6 +12,8 @@ import type { ChatDetailHeaderProps } from './types';
 import { useConversation } from '../../store';
 import { getConversationSubtitle } from './conversationHeader.utils';
 import { useGetUsersInfo } from '../../hooks/users/useGetUsersInfo';
+import { useGetGroupInfo } from '../../hooks/conversation/useGetGroupInfo';
+import { isGroupConversation } from '../../utils/conversation';
 
 const ChatDetailHeader = memo(
   ({
@@ -28,7 +30,10 @@ const ChatDetailHeader = memo(
     const { data: usersInfo } = useGetUsersInfo(
       targetUserId ? [targetUserId] : []
     );
-
+    const isGroup = isGroupConversation(conversation);
+    const { data: groupInfo } = useGetGroupInfo(
+      isGroup ? conversation?.groupID : undefined
+    );
     const { faceURL, showName } = useMemo(() => {
       const userInfo = usersInfo?.[0];
       const resolvedFaceURL = conversation?.faceURL || userInfo?.faceURL;
@@ -103,6 +108,7 @@ const ChatDetailHeader = memo(
               avatar={faceURL || null}
               fullName={showName || ''}
               peerType={conversation?.peerType}
+              members={conversation?.members}
             />
 
             <KContainer.View flex marginL="0.5rem">
@@ -123,14 +129,24 @@ const ChatDetailHeader = memo(
                   color={KColors.palette.gray.w500}
                   numberOfLines={1}
                 >
-                  {getConversationSubtitle(conversation)}
+                  {getConversationSubtitle(
+                    conversation,
+                    groupInfo?.memberCount
+                  )}
                 </KLabel.Text>
               )}
             </KContainer.View>
           </KContainer.Touchable>
         </KContainer.View>
       ),
-      [onBack, onPressAvatar, conversation, faceURL, showName]
+      [
+        onBack,
+        onPressAvatar,
+        conversation,
+        faceURL,
+        showName,
+        groupInfo?.memberCount,
+      ]
     );
 
     return (

package/src/screens/chat-detail/conversationHeader.utils.ts

@@ -18,18 +18,26 @@ export const getConversationAvatarUri = (
 };
 
 export const getConversationSubtitle = (
-  conversation?: ConversationItem
+  conversation?: ConversationItem,
+  memberCount?: number
 ): string | undefined => {
   if (!conversation) {
     return undefined;
   }
 
   if (conversation.peerType === PeerType.Group) {
-    const unreadLabel =
-      (conversation.unreadCount ?? 0) > 0
-        ? `${conversation.unreadCount} tin nhắn mới`
-        : 'Không có tin mới';
-    return `20 thành viên • ${unreadLabel}`;
+    if (typeof memberCount !== 'number') {
+      return 'Nhấn để xem thông tin';
+    }
+
+    // const unreadLabel =
+    //   (conversation.unreadCount ?? 0) > 0
+    //     ? `${conversation.unreadCount} tin nhắn mới`
+    //     : 'Không có tin mới';
+    // if (memberCount == null) {
+    //   return unreadLabel;
+    // }
+    return `${memberCount} thành viên`;
   }
 
   if (conversation.peerType === PeerType.Customer) {

package/src/screens/chat-detail/legend/LegendChatMessage.tsx

@@ -1,4 +1,4 @@
-import { KContainer, KImage, KColors } from '@droppii/libs';
+import { KContainer, KImage, KColors, KSpacingValue } from '@droppii/libs';
 import { StyleSheet } from 'react-native';
 import { memo, useCallback, useMemo } from 'react';
 import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
@@ -14,11 +14,13 @@ import { FileMessage } from '../../../components/messages/fileMessage';
 import { LinkMessage } from '../../../components/messages/linkMessage';
 import { MergedMessage } from '../../../components/messages/mergedMessage';
 import { RevokedMessage } from '../../../components/messages/revokedMessage';
+import { GroupNotificationMessage } from '../../../components/messages/groupNotificationMessage';
 import { MessageStatusIndicator } from '../../../components/messages/MessageStatusIndicator';
 import type { BaseLegendMessageProps } from '../../../components/messages/types';
 import { messageStyles } from './messageTypes';
 import QuotedMessage from '../../../components/messages/quotedMessage';
 import { StickerMessage } from '../../../components/messages/stickerMessage';
+import { GROUP_NOTIFICATION_TEXT } from '../../../utils/messageUtils';
 
 type MessageProps = BaseLegendMessageProps & {
   onPressUrl?: (url: string) => void;
@@ -38,6 +40,16 @@ interface LegendChatMessageProps {
   isHighlighted?: boolean;
 }
 
+// Notification-style messages (group created/renamed/member changes/etc.)
+// are system banners, not user-authored text — they render centered,
+// full-width, without a bubble, avatar/status chrome, or left/right
+// alignment (see SYSTEM_MESSAGE_TYPES below). Driven by the same lookup
+// messageUtils uses to build their preview/thread text, so adding a new
+// notification content type there is enough to cover both places.
+const GROUP_NOTIFICATION_TYPES = Object.keys(GROUP_NOTIFICATION_TEXT).map(
+  Number
+) as MessageType[];
+
 const messageComponentMap: Partial<
   Record<MessageType, ComponentType<MessageProps>>
 > = {
@@ -51,6 +63,9 @@ const messageComponentMap: Partial<
   [MessageType.MergeMessage]: MergedMessage,
   [MessageType.RevokeMessage]: RevokedMessage,
   [MessageType.StickerMessage]: StickerMessage,
+  ...Object.fromEntries(
+    GROUP_NOTIFICATION_TYPES.map((type) => [type, GroupNotificationMessage])
+  ),
 };
 
 const MEDIA_TYPES: number[] = [
@@ -59,6 +74,8 @@ const MEDIA_TYPES: number[] = [
   MessageType.MergeMessage,
 ];
 
+const SYSTEM_MESSAGE_TYPES: number[] = GROUP_NOTIFICATION_TYPES;
+
 export const LegendChatMessage = memo(
   ({
     message,
@@ -86,6 +103,20 @@ export const LegendChatMessage = memo(
       return customNode;
     }
 
+    if (SYSTEM_MESSAGE_TYPES.includes(message?.contentType)) {
+      const SystemMessageComponent =
+        messageComponentMap[message.contentType] ?? TextMessage;
+      return (
+        <KContainer.View center style={styles.systemMessageWrapper}>
+          <SystemMessageComponent
+            message={message}
+            isOutgoing={isOutgoing}
+            createdAtTime={createdAtTime}
+          />
+        </KContainer.View>
+      );
+    }
+
     const MessageComponent: ComponentType<MessageProps> =
       messageComponentMap[message?.contentType] ?? TextMessage;
 
@@ -134,6 +165,10 @@ const styles = StyleSheet.create({
   content: {
     position: 'relative',
   },
+  systemMessageWrapper: {
+    width: '100%',
+    marginVertical: KSpacingValue['0.25rem'],
+  },
   pinBadge: {
     position: 'absolute',
     // Capped at the inter-row gap (messageRowLeft/Right's marginBottom) so the

package/src/screens/inbox/MessagesTab.tsx

@@ -49,7 +49,6 @@ export const MessagesTab = memo(({ onPressThread }: MessagesTabProps) => {
       </KLabel.Text>
     </KContainer.View>
   );
-
   if (isLoading && data.length === 0) {
     return LoadingComponent;
   }