@droppii-org/chat-mobile 0.2.77 → 0.2.79

package/src/hooks/groups/useLeaveGroup.ts

@@ -0,0 +1,104 @@
+import OpenIMSDK, {
+  GroupMemberRole,
+  GroupVisibility,
+} from '@droppii/openim-rn-client-sdk';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { conversationQueryKeys, groupQueryKeys } from '../query-keys';
+import { UIUtils } from '../../utils/UIUtils';
+import { trans } from '../../translation';
+
+const showOwnerBlockedModal = () => {
+  UIUtils.alert.open({
+    title: trans('chat:leave_group_blocked_title'),
+    message: trans('chat:leave_group_blocked_desc'),
+    primaryIndex: 0,
+    buttonType: 'horizontal-button',
+    buttons: [
+      { label: trans('chat:leave_group_blocked_button'), kind: 'primary' },
+    ],
+  });
+};
+
+const confirmLeaveGroup = (visibility?: GroupVisibility) =>
+  new Promise<void>((resolve, reject) => {
+    console.log('confirmLeaveGroup', visibility);
+    UIUtils.alert.open({
+      title: trans('chat:leave_group_confirm_title'),
+      message: trans(
+        visibility === GroupVisibility.Public
+          ? 'chat:leave_group_confirm_desc_public'
+          : 'chat:leave_group_confirm_desc_private'
+      ),
+      primaryIndex: 1,
+      buttonType: 'horizontal-button',
+      buttons: [
+        {
+          label: trans('chat:leave_group_confirm_secondary'),
+          kind: 'light',
+          onPress: reject,
+        },
+        {
+          label: trans('chat:leave_group_confirm_primary'),
+          kind: 'danger',
+          onPress: resolve,
+        },
+      ],
+    });
+  });
+
+export const useLeaveGroup = () => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationKey: groupQueryKeys.leave(),
+    mutationFn: (groupID: string) => OpenIMSDK.quitGroup(groupID),
+    onSuccess: (_data, groupID) => {
+      queryClient.invalidateQueries({
+        queryKey: conversationQueryKeys.joinedGroup(groupID),
+      });
+    },
+    onError: () => {
+      UIUtils.toast.open({
+        title: trans('chat:generic_error'),
+        theme: 'error',
+      });
+    },
+  });
+
+  const leaveGroup = async (groupID: string, visibility?: GroupVisibility) => {
+    try {
+      // The owner must transfer ownership before leaving — block instead of
+      // showing the confirm modal.
+      const selfInfo = await OpenIMSDK.getSelfUserInfo(groupID);
+      if (selfInfo?.roleLevel === GroupMemberRole.Owner) {
+        showOwnerBlockedModal();
+        return false;
+      }
+      try {
+        await confirmLeaveGroup(visibility);
+      } catch {
+        return false;
+      }
+
+      // Revalidate right before submitting — role/membership may have
+      // changed while the confirm modal was open.
+      const latestSelfInfo = await OpenIMSDK.getSelfUserInfo(groupID);
+      if (latestSelfInfo?.roleLevel === GroupMemberRole.Owner) {
+        showOwnerBlockedModal();
+        return false;
+      }
+
+      await mutation.mutateAsync(groupID);
+      return true;
+    } catch (error) {
+      console.error('leaveGroup failed', error);
+      UIUtils.toast.open({
+        title: trans('chat:generic_error'),
+        theme: 'error',
+      });
+      return false;
+    }
+  };
+
+  return { leaveGroup, isLeavingGroup: mutation.isPending };
+};

package/src/hooks/query-keys.ts

@@ -68,4 +68,5 @@ export const groupQueryKeys = {
   publicSearch: (keyword: string) =>
     [...groupQueryKeys.public(), keyword] as const,
   join: () => [...groupQueryKeys.all, 'join'] as const,
+  leave: () => [...groupQueryKeys.all, 'leave'] as const,
 };

package/src/hooks/useConversationList.ts

@@ -23,26 +23,17 @@ export function useConversationList({
   const query = useQuery({
     queryKey: [...conversationQueryKeys.list(applicationType), page],
     enabled: enabled !== false,
+    staleTime: 1000 * 60 * 1, // 5 minutes
     queryFn: async () => {
       const offset = (page - 1) * 500;
-      const [conversations, joinedGroups] = await Promise.all([
-        OpenIMSDK.getConversationListSplitApp({
-          offset,
-          count: 500,
-          applicationType,
-        }),
-        OpenIMSDK.getJoinedGroupList(),
-      ]);
+      const conversations = await OpenIMSDK.getConversationListSplitApp({
+        offset,
+        count: 500,
+        applicationType,
+      });
 
-      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;
+      useConversationStore.getState().updateConversations(conversations);
+      return conversations;
     },
   });
 

package/src/screens/ChatInfo/ChatInfo.tsx

@@ -1,7 +1,9 @@
-import { memo } from 'react';
+import { memo, useCallback } 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 { useLeaveGroup } from '../../hooks/groups/useLeaveGroup';
 import { useConversation } from '../../store';
 import ChatInfoProfile from './ChatInfoProfile';
 import ChatInfoMediaRow from './ChatInfoMediaRow';
@@ -31,6 +33,29 @@ const ChatInfo = memo(
     const isTargetActive = target ? target.isActive : true;
     const isGroup = useChatDetailContext().isGroupConversation;
 
+    const { data: groupInfo } = useGetGroupInfo(
+      isGroup ? conversation?.groupID : undefined
+    );
+    const { leaveGroup } = useLeaveGroup();
+
+    const handleLeaveGroup = useCallback(async () => {
+      if (!conversation?.groupID) return;
+
+      const didLeave = await leaveGroup(
+        conversation.groupID,
+        groupInfo?.visibility
+      );
+      if (didLeave) {
+        (onPressLeaveGroup ?? navigation.goBack)();
+      }
+    }, [
+      conversation?.groupID,
+      groupInfo?.visibility,
+      leaveGroup,
+      navigation.goBack,
+      onPressLeaveGroup,
+    ]);
+
     return (
       <KContainer.Page flex edges={['bottom']} background="#EBEDF2">
         <KNavigation.Header
@@ -61,7 +86,7 @@ const ChatInfo = memo(
             onPressOrders={onPressOrders}
             onPressCreateGroup={onPressCreateGroup}
             onPressAddToGroup={onPressAddToGroup}
-            onPressLeaveGroup={onPressLeaveGroup}
+            onPressLeaveGroup={handleLeaveGroup}
             onDismissGroup={onDismissGroup}
           />
         </KContainer.ScrollView>

package/src/screens/ChatInfo/ChatInfoDescriptionRow.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
 import { StyleSheet, type TextLayoutEvent } from 'react-native';
 import { KContainer, KLabel, KColors } from '@droppii/libs';
 import { trans } from '../../translation';
@@ -47,6 +47,10 @@ const ChatInfoDescriptionRow = memo(
       paddingH: '0.75rem' as const,
     };
 
+    useEffect(() => {
+      setDisplayedText(introduction);
+    }, [introduction]);
+
     if (!introduction) {
       return null;
     }

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

@@ -35,9 +35,10 @@ import {
   type MessageItem,
 } from '@droppii/openim-rn-client-sdk';
 import { useMessages } from '../../hooks/message/useMessages';
-import { ChatEvent, type GroupRemovedPayload } from '../../types/events';
+import { ChatEvent } from '../../types/events';
 import { useSetIsShowFLashMessage } from '../../context/global';
 import { useJoinGroup } from '../../hooks/groups/useJoinGroup';
+import { useGroupAccessGuard } from '../../hooks/groups/useGroupAccessGuard';
 
 const ChatDetail = memo(
   ({
@@ -119,16 +120,14 @@ 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 handleAccessBlocked = useCallback(() => {
+      (onBack ?? handleBackDefault)();
+    }, [onBack, handleBackDefault]);
+
+    const { isCheckingAccess } = useGroupAccessGuard({
+      groupID: conversation?.groupID || targetGroupId,
+      onBlocked: handleAccessBlocked,
+    });
 
     const resolvedShowAddMember =
       showAddMember ?? shouldShowAddMember(conversation);
@@ -197,7 +196,6 @@ const ChatDetail = memo(
           onPressAddMember={onPressAddMember}
           onPressMenu={handlePressMenu}
           onPressAvatar={handlePressMenu}
-          targetGroupId={targetGroupId}
         />
 
         <PinnedMessageBar
@@ -210,7 +208,7 @@ const ChatDetail = memo(
           messages={messages}
           conversationId={conversationId}
           customMessageItemFactory={customMessageItemFactory}
-          isLoading={initLoading || isLoadingConversation}
+          isLoading={initLoading || isLoadingConversation || isCheckingAccess}
           onLoadMoreOld={getMoreOldMessages}
           hasMoreOld={hasMoreOld}
           moreOldLoading={moreOldLoading}

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

@@ -11,8 +11,8 @@ import { NamePrefixIcon } from '../../components/ThreadCard/NamePrefixIcon';
 import type { ChatDetailHeaderProps } from './types';
 import { getConversationSubtitle } from './conversationHeader.utils';
 import { useGetUsersInfo } from '../../hooks/users/useGetUsersInfo';
-import { useGetConversationDetail } from '../../hooks/conversation/useGetConversationDetail';
 import { useChatDetailContext } from '../../context';
+import { useConversation } from '../../store';
 
 const ChatDetailHeader = memo(
   ({
@@ -24,12 +24,8 @@ const ChatDetailHeader = memo(
     onPressAddMember,
     onPressMenu,
     onPressAvatar,
-    targetGroupId,
   }: ChatDetailHeaderProps) => {
-    const { conversationData: conversation } = useGetConversationDetail({
-      targetGroupId,
-      targetUserId: targetUserId,
-    });
+    const conversation = useConversation(conversationId);
     const { data: usersInfo } = useGetUsersInfo(
       targetUserId ? [targetUserId] : []
     );

package/src/screens/chat-detail/types.ts

@@ -49,7 +49,6 @@ export interface ChatDetailHeaderProps {
   onPressAvatar?: () => void;
   conversationId: string;
   targetUserId?: string;
-  targetGroupId?: string;
 }
 
 export interface ChatQuickActionsRenderParams {

package/src/screens/inbox/CommunityTab.tsx

@@ -1,4 +1,4 @@
-import { KContainer, KSpacingValue } from '@droppii/libs';
+import { KColors, KContainer, KSpacingValue } from '@droppii/libs';
 import { memo, useCallback } from 'react';
 import { ActivityIndicator, StyleSheet } from 'react-native';
 import type { SearchPublicGroupInfo } from '@droppii/openim-rn-client-sdk';
@@ -41,7 +41,7 @@ export const CommunityTab = memo(({ onPressGroup }: CommunityTabProps) => {
     <KContainer.Page flex>
       {isFetching && !isFetchingNextPage && !isRefetching ? (
         <KContainer.View flex center>
-          <ActivityIndicator />
+          <ActivityIndicator color={KColors.primary.normal} size="small" />
         </KContainer.View>
       ) : (
         <KContainer.FlatList

package/src/screens/inbox/MessagesTab.tsx

@@ -39,7 +39,7 @@ export const MessagesTab = memo(({ onPressThread }: MessagesTabProps) => {
 
   const LoadingComponent = (
     <KContainer.View center flex paddingV="3rem">
-      <ActivityIndicator size="large" color={KColors.palette.primary.w400} />
+      <ActivityIndicator color={KColors.primary.normal} size="small" />
     </KContainer.View>
   );
 

package/src/store/conversation.ts

@@ -52,23 +52,14 @@ export const useConversationStore = create<ConversationStore>()((set, get) => ({
     const existing = get().map[id];
     if (!existing) return;
 
-    const merged = { ...existing, ...data };
     const nextMap = { ...get().map };
-    if (merged.isNotInGroup) {
-      delete nextMap[id];
-    } else {
-      nextMap[id] = merged;
-    }
+    nextMap[id] = { ...existing, ...data };
     set(sortConversation(nextMap));
   },
   updateConversations(conversations) {
     const nextMap = conversations.reduce(
       (pre, curr) => {
-        if (curr.isNotInGroup) {
-          delete pre[curr.conversationID];
-        } else {
-          pre[curr.conversationID] = curr;
-        }
+        pre[curr.conversationID] = curr;
         return pre;
       },
       { ...get().map }
@@ -86,14 +77,19 @@ export const useConversationStore = create<ConversationStore>()((set, get) => ({
   },
   removeGroupConversation(groupID) {
     const conversationID = getConversationID(SessionType.Group, groupID);
+    const existing = get().map[conversationID];
+    if (!existing) return;
 
-    const newMap = { ...get().map };
-    delete newMap[conversationID];
-
-    set({
-      map: newMap,
-      list: get().list.filter((item) => item !== conversationID),
-    });
+    // Mark rather than delete: the conversation leaves the inbox and loses its
+    // pin, but stays addressable so a public group is still readable. Access
+    // itself is decided by useGroupAccessGuard, not by the store.
+    const nextMap = { ...get().map };
+    nextMap[conversationID] = {
+      ...existing,
+      isNotInGroup: true,
+      isPinned: false,
+    };
+    set(sortConversation(nextMap));
   },
   reset() {
     set({

package/src/translation/resources/i18n.ts

@@ -75,16 +75,31 @@ const i18nKey: Record<string, string> = {
   'chat:group_created_by': '{{sender}} đã tạo nhóm',
   'msg_type_group_name_updated': 'Đã đổi tên nhóm',
   'chat:group_name_updated_by': '{{sender}} đã đổi tên nhóm',
+  'chat:group_name_updated_by_named':
+    '{{sender}} đã đổi tên nhóm thành {{newGroupName}}',
   'msg_type_group_info_updated': 'Đã cập nhật thông tin nhóm',
   'chat:group_info_updated_by': '{{sender}} đã cập nhật thông tin nhóm',
   'msg_type_member_quit': 'Đã rời khỏi nhóm',
-  'chat:member_quit_by': '{{sender}} đã rời khỏi nhóm',
+  'chat:member_quit_by': '{{sender}} đã rời nhóm',
   'msg_type_group_owner_transferred': 'Đã chuyển quyền trưởng nhóm',
   'chat:group_owner_transferred_by': '{{sender}} đã chuyển quyền trưởng nhóm',
+  'chat:group_owner_transferred_by_named':
+    '{{sender}} đã chuyển quyền trưởng nhóm cho {{memberName}}',
   'msg_type_member_kicked': 'Đã xoá thành viên khỏi nhóm',
   'chat:member_kicked_by': '{{sender}} đã xoá thành viên khỏi nhóm',
+  'chat:member_kicked_by_named': '{{sender}} đã xoá {{names}} khỏi nhóm',
   'msg_type_member_invited': 'Đã thêm thành viên vào nhóm',
   'chat:member_invited_by': '{{sender}} đã thêm thành viên vào nhóm',
+  'chat:member_invited_by_named': '{{sender}} đã thêm {{names}} vào nhóm',
+  'msg_type_group_member_set_admin': 'Đã chỉ định quản trị viên mới',
+  'chat:group_member_set_admin_by':
+    '{{sender}} đã đặt {{memberName}} làm quản trị viên',
+  'chat:group_member_set_admin_by_generic':
+    '{{sender}} đã đặt một thành viên làm quản trị viên',
+  'msg_type_message_pinned': 'Đã ghim một tin nhắn',
+  'chat:group_message_pinned_by': '{{sender}} đã ghim một tin nhắn',
+  'msg_type_message_unpinned': 'Đã bỏ ghim một tin nhắn',
+  'chat:group_message_unpinned_by': '{{sender}} đã bỏ ghim một tin nhắn',
   'msg_type_member_enter': 'Đã tham gia nhóm',
   'chat:member_enter_by': '{{sender}} đã tham gia nhóm',
   'msg_type_group_dismissed': 'Nhóm đã bị giải tán',
@@ -124,6 +139,17 @@ const i18nKey: Record<string, string> = {
   'chat:info_unpin_message': 'Bỏ ghim trò chuyện',
   'chat:info_delete_history': 'Xoá lịch sử trò chuyện',
   'chat:info_leave_group': 'Rời nhóm',
+  'chat:leave_group_confirm_title': 'Rời nhóm?',
+  'chat:leave_group_confirm_desc_private':
+    'Sau khi rời nhóm, bạn sẽ không thể xem tin nhắn từ cuộc trò chuyện này nữa. Bạn có chắc chắn muốn rời khỏi nhóm?',
+  'chat:leave_group_confirm_desc_public':
+    'Sau khi rời nhóm, bạn sẽ không thể nhắn tin hay nhận thông báo từ cuộc trò chuyện này nữa. Bạn có chắc chắn muốn rời khỏi nhóm?',
+  'chat:leave_group_confirm_primary': 'Rời nhóm',
+  'chat:leave_group_confirm_secondary': 'Ở lại nhóm',
+  'chat:leave_group_blocked_title': 'Không thể rời nhóm',
+  'chat:leave_group_blocked_desc':
+    'Bạn không thể rời nhóm khi đang là chủ nhóm, vui lòng chuyển quyền chủ nhóm cho thành viên khác và thử lại!',
+  'chat:leave_group_blocked_button': 'Đã hiểu',
   'chat:dismiss_group': 'Giải tán nhóm',
   'chat:info_view_more': 'Xem thêm',
   'chat:group_description_title': 'Mô tả nhóm',
@@ -183,6 +209,10 @@ const i18nKey: Record<string, string> = {
   'group:dismiss_confirm_primary': 'Giải tán',
   'group:dismiss_confirm_secondary': 'Quay lại',
   'group:dismiss_toast_success': 'Đã giải tán nhóm',
+  'group:access_blocked_title': 'Không thể xem cuộc trò chuyện này',
+  'group:access_blocked_desc':
+    'Bạn hiện không có quyền truy cập vào cuộc trò chuyện hoặc tin nhắn này.',
+  'group:access_blocked_button': 'Đã hiểu',
 };
 
 export default {

package/src/utils/conversation.ts

@@ -38,9 +38,12 @@ export const getConversationID = (
 };
 
 export const sortConversation = (map: Record<string, ConversationItem>) => {
-  const list = Object.keys(map).sort((a, b) =>
-    conversationCompare(map[a]!, map[b]!)
-  );
+  // `map` holds every conversation that can still be opened; `list` is the
+  // inbox. A group the user is no longer in stays addressable — a public group
+  // remains readable via deeplink or search — but must not show in the inbox.
+  const list = Object.keys(map)
+    .filter((id) => !map[id]?.isNotInGroup)
+    .sort((a, b) => conversationCompare(map[a]!, map[b]!));
   return { map, list };
 };
 

package/src/utils/legendListMessage.ts

@@ -28,8 +28,12 @@ export const getMessageText = (message: MessageItem): string => {
     case MessageType.FaceMessage:
       return '[Sticker]';
     default:
+      // Never surface the raw notification payload as message text — it
+      // contains other users' userID/nickname/faceURL/permissions and would
+      // render verbatim as a normal chat bubble for any content type that
+      // isn't (yet) mapped in GROUP_NOTIFICATION_TEXT.
       if (message.notificationElem?.detail) {
-        return message.notificationElem.detail;
+        return '';
       }
       return message.content || '';
   }

package/src/utils/messageUtils.ts

@@ -79,6 +79,120 @@ export const GROUP_NOTIFICATION_TEXT: Partial<
     previewKey: 'msg_type_group_name_updated',
     bySenderKey: 'chat:group_name_updated_by',
   },
+  [MessageType.GroupMemberSetToAdmin]: {
+    previewKey: 'msg_type_group_member_set_admin',
+    bySenderKey: 'chat:group_member_set_admin_by_generic',
+  },
+  // One content type, two texts (pinned vs unpinned) — the base entry here is
+  // just the "unpinned" fallback; resolveNotificationText() below overrides
+  // it to the "pinned" keys when notificationElem.detail.isPinned is true.
+  [MessageType.PinMsg]: {
+    previewKey: 'msg_type_message_unpinned',
+    bySenderKey: 'chat:group_message_unpinned_by',
+  },
+};
+
+const parseNotificationDetail = (message: MessageItem): any => {
+  if (!message.notificationElem?.detail) return undefined;
+  try {
+    return JSON.parse(message.notificationElem.detail);
+  } catch {
+    return undefined;
+  }
+};
+
+// PM-approved rule for "N members added/removed at once": 1-2 names are
+// listed in full, 3+ collapse to the first two names plus a trailing count.
+// Renders identically to the spec either way — e.g. 4 invites become
+// "B, C và 2 người khác".
+const formatMemberNames = (
+  members: Array<{ nickname?: string }> | undefined
+): string | undefined => {
+  const names = (members ?? [])
+    .map((member) => member?.nickname)
+    .filter((nickname): nickname is string => !!nickname);
+
+  if (names.length === 0) return undefined;
+  if (names.length <= 2) return names.join(', ');
+  return `${names[0]}, ${names[1]} và ${names.length - 2} người khác`;
+};
+
+export interface ResolvedNotificationText {
+  previewKey: string;
+  bySenderKey: string;
+  params: Record<string, string>;
+}
+
+// GROUP_NOTIFICATION_TEXT above only covers the static "no extra data needed"
+// shape. This resolver layers in the per-event params (affected member name,
+// new group name, pinned/unpinned) confirmed against real captured payloads —
+// upgrading to a `_named`/`_by` key when the data is present, and silently
+// falling back to the generic base key when it's missing or malformed so the
+// UI never shows a raw `{{placeholder}}` or throws on a bad payload.
+export const resolveNotificationText = (
+  message: MessageItem
+): ResolvedNotificationText | undefined => {
+  const base = GROUP_NOTIFICATION_TEXT[message.contentType];
+  if (!base) return undefined;
+
+  let previewKey = base.previewKey;
+  let bySenderKey = base.bySenderKey;
+  const params: Record<string, string> = {};
+  const detail = parseNotificationDetail(message);
+
+  switch (message.contentType) {
+    case MessageType.GroupNameUpdated: {
+      const newGroupName = detail?.group?.groupName;
+      if (newGroupName) {
+        params.newGroupName = newGroupName;
+        bySenderKey = 'chat:group_name_updated_by_named';
+      }
+      break;
+    }
+    case MessageType.MemberInvited: {
+      const names = formatMemberNames(detail?.invitedUserList);
+      if (names) {
+        params.names = names;
+        bySenderKey = 'chat:member_invited_by_named';
+      }
+      break;
+    }
+    case MessageType.MemberKicked: {
+      const names = formatMemberNames(detail?.kickedUserList);
+      if (names) {
+        params.names = names;
+        bySenderKey = 'chat:member_kicked_by_named';
+      }
+      break;
+    }
+    case MessageType.GroupOwnerTransferred: {
+      const memberName = detail?.newGroupOwner?.nickname;
+      if (memberName) {
+        params.memberName = memberName;
+        bySenderKey = 'chat:group_owner_transferred_by_named';
+      }
+      break;
+    }
+    case MessageType.GroupMemberSetToAdmin: {
+      const memberName = detail?.changedUser?.nickname;
+      if (memberName) {
+        params.memberName = memberName;
+        bySenderKey = 'chat:group_member_set_admin_by';
+      }
+      break;
+    }
+    case MessageType.PinMsg: {
+      if (detail?.isPinned === true) {
+        previewKey = 'msg_type_message_pinned';
+        bySenderKey = 'chat:group_message_pinned_by';
+      }
+      break;
+    }
+    default:
+      break;
+  }
+
+  return { previewKey, bySenderKey, params };
 };
 
 export const extractTextContent = (message: MessageItem): string => {
@@ -118,7 +232,7 @@ export const getMessagePreview = (message?: MessageItem): string => {
     case MessageType.FileMessage: {
       const fileName = message?.fileElem?.fileName;
       if (fileName) {
-        return `[File] ${fileName}`;
+        return `[File] ${truncateMiddle(fileName, 20)}`;
       }
       return '[File]';
     }
@@ -177,9 +291,9 @@ export const getMessagePreview = (message?: MessageItem): string => {
       return trans('msg_type_burn_message_change');
 
     default: {
-      const groupNotification = GROUP_NOTIFICATION_TEXT[message.contentType];
-      if (groupNotification) {
-        return trans(groupNotification.previewKey);
+      const resolved = resolveNotificationText(message);
+      if (resolved) {
+        return trans(resolved.previewKey, resolved.params);
       }
       return '[Tin nhắn không được hỗ trợ]';
     }
@@ -305,8 +419,11 @@ export const getNotificationOpUserNickname = (
   try {
     const parsed = JSON.parse(message.notificationElem.detail) as {
       opUser?: { nickname?: string };
+      quitUser?: { nickname?: string };
     };
-    return parsed?.opUser?.nickname;
+    // MemberQuit puts the leaver in `quitUser`, not `opUser` — every other
+    // group-notification content type uses `opUser` for the actor.
+    return parsed?.opUser?.nickname ?? parsed?.quitUser?.nickname;
   } catch {
     return undefined;
   }
@@ -353,9 +470,12 @@ export const getLastMessageText = ({
     return trans('chat:revoked_by_sender', { sender });
   }
 
-  const groupNotification = GROUP_NOTIFICATION_TEXT[message.contentType];
-  if (groupNotification) {
-    return trans(groupNotification.bySenderKey, { sender });
+  const resolvedNotification = resolveNotificationText(message);
+  if (resolvedNotification) {
+    return trans(resolvedNotification.bySenderKey, {
+      sender,
+      ...resolvedNotification.params,
+    });
   }
 
   const hideSenderPrefix =