@droppii-org/chat-mobile 0.2.75 → 0.2.77

package/src/hooks/useGroupPermission.ts

@@ -1,4 +1,8 @@
-import { PeerType, type GroupPermission } from '@droppii/openim-rn-client-sdk';
+import {
+  GroupMemberRole,
+  GroupPermission,
+  GroupStatus,
+} from '@droppii/openim-rn-client-sdk';
 import { useChatDetailContext } from '../context';
 import { useCallback, useMemo } from 'react';
 import { trans } from '../translation';
@@ -8,17 +12,17 @@ export const useHasGroupPermission = (
   permission: GroupPermission | GroupPermission[],
   mode: 'every' | 'some' = 'every'
 ): boolean => {
-  const { conversation, groupPermissions } = useChatDetailContext();
-  const isNotGroup = conversation?.peerType !== PeerType.Group;
+  const { isGroupConversation, userInfo } = useChatDetailContext();
   const required = Array.isArray(permission) ? permission : [permission];
+  const granted = userInfo?.permissions || [];
 
   return useMemo(() => {
-    if (isNotGroup) return true;
+    if (!isGroupConversation) return true;
     return mode === 'every'
-      ? required.every((p) => groupPermissions?.includes(p))
-      : required.some((p) => groupPermissions?.includes(p));
+      ? required.every((p) => granted?.includes(p))
+      : required.some((p) => granted?.includes(p));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [groupPermissions, isNotGroup, mode]);
+  }, [isGroupConversation, mode]);
 };
 
 export const useGuardedAction = <T extends (...args: any[]) => any>(
@@ -41,3 +45,41 @@ export const useGuardedAction = <T extends (...args: any[]) => any>(
     [allowed, action, options?.deniedMessage]
   ) as T;
 };
+
+export const useHasRoleLevel = (minRoleLevel: GroupMemberRole): boolean => {
+  const { isGroupConversation, userInfo } = useChatDetailContext();
+
+  return useMemo(() => {
+    if (!isGroupConversation) return true;
+    return (userInfo?.roleLevel ?? GroupMemberRole.Normal) >= minRoleLevel;
+  }, [isGroupConversation, userInfo?.roleLevel, minRoleLevel]);
+};
+
+export const useCanSendMessage = (): {
+  allowed: boolean;
+  reason?: string;
+} => {
+  const { userInfo, groupInfo, isGroupConversation } = useChatDetailContext();
+
+  const hasRolePermission = useMemo(
+    () => userInfo?.permissions?.includes(GroupPermission.SendMessage) ?? false,
+    [userInfo?.permissions]
+  );
+  const isOwnerOrAdmin = useHasRoleLevel(GroupMemberRole.Admin);
+
+  if (!isGroupConversation) return { allowed: true };
+
+  if (!hasRolePermission)
+    return {
+      allowed: false,
+      reason: trans('group:cannot_send_message'),
+    };
+
+  if (groupInfo?.status === GroupStatus.Muted && !isOwnerOrAdmin) {
+    return {
+      allowed: false,
+      reason: trans('group:messaging_muted_by_owner'),
+    };
+  }
+  return { allowed: true };
+};

package/src/screens/ChatInfo/ChatInfo.tsx

@@ -2,7 +2,6 @@ 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';
@@ -10,7 +9,8 @@ import ChatInfoDescriptionRow from './ChatInfoDescriptionRow';
 import ChatInfoActions from './ChatInfoActions';
 import type { ChatInfoProps } from './types';
 import { trans } from '../../translation';
-import { isGroupConversation } from '../../utils/conversation';
+import { withChatDetailProvider } from '../../context';
+import { useChatDetailContext } from '../../context';
 
 const ChatInfo = memo(
   ({
@@ -22,16 +22,14 @@ const ChatInfo = memo(
     onPressCreateGroup,
     onPressAddToGroup,
     onPressLeaveGroup,
+    onDismissGroup,
   }: 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
-    );
+    const isGroup = useChatDetailContext().isGroupConversation;
 
     return (
       <KContainer.Page flex edges={['bottom']} background="#EBEDF2">
@@ -54,10 +52,7 @@ const ChatInfo = memo(
           />
           <ChatInfoMediaRow onPressMedia={onPressMedia} />
           <KContainer.VisibleView visible={isGroup}>
-            <ChatInfoDescriptionRow
-              introduction={groupInfo?.introduction}
-              groupName={conversation?.showName}
-            />
+            <ChatInfoDescriptionRow groupName={conversation?.showName} />
           </KContainer.VisibleView>
           <ChatInfoActions
             conversation={conversation}
@@ -67,6 +62,7 @@ const ChatInfo = memo(
             onPressCreateGroup={onPressCreateGroup}
             onPressAddToGroup={onPressAddToGroup}
             onPressLeaveGroup={onPressLeaveGroup}
+            onDismissGroup={onDismissGroup}
           />
         </KContainer.ScrollView>
       </KContainer.Page>
@@ -74,4 +70,4 @@ const ChatInfo = memo(
   }
 );
 
-export default ChatInfo;
+export default withChatDetailProvider(ChatInfo);

package/src/screens/ChatInfo/ChatInfoActions.tsx

@@ -6,9 +6,14 @@ import {
   type KListItemBaseItemProps,
   KLabel,
 } from '@droppii/libs';
-import type { ConversationItem } from '@droppii/openim-rn-client-sdk';
+import {
+  GroupMemberRole,
+  type ConversationItem,
+} from '@droppii/openim-rn-client-sdk';
 import { usePinConversation } from '../../hooks/usePinConversation';
 import { trans } from '../../translation';
+import { useChatDetailContext } from '../../context';
+import { useDismissGroup } from '../../hooks/groups/useDismissGroup';
 
 interface ChatInfoActionsProps {
   conversation?: ConversationItem;
@@ -18,6 +23,7 @@ interface ChatInfoActionsProps {
   onPressCreateGroup?: () => void;
   onPressAddToGroup?: () => void;
   onPressLeaveGroup?: () => void;
+  onDismissGroup?: () => void;
 }
 
 const ChatInfoActions = memo(
@@ -29,10 +35,17 @@ const ChatInfoActions = memo(
     onPressCreateGroup,
     onPressAddToGroup,
     onPressLeaveGroup,
+    onDismissGroup,
   }: ChatInfoActionsProps) => {
     const { pinConversation, unpinConversation } = usePinConversation();
     const isPinned = Boolean(conversation?.isPinned);
     const showName = conversation?.showName || '';
+    const { userInfo } = useChatDetailContext();
+    const { dismissGroup } = useDismissGroup({ onSuccess: onDismissGroup });
+
+    const isOwner = useMemo(() => {
+      return userInfo?.roleLevel === GroupMemberRole.Owner;
+    }, [userInfo?.roleLevel]);
 
     const handlePinPress = useCallback(() => {
       if (isPinned) {
@@ -44,6 +57,11 @@ const ChatInfoActions = memo(
 
     const handleDeleteHistory = useCallback(() => {}, []);
 
+    const handleDismissGroup = useCallback(() => {
+      if (!conversation?.groupID) return;
+      dismissGroup(conversation?.groupID);
+    }, [dismissGroup, conversation?.groupID]);
+
     const primaryData = useMemo(() => {
       const items: KListItemBaseItemProps[] = [];
 
@@ -118,17 +136,40 @@ const ChatInfoActions = memo(
     ]);
 
     const dangerData: KListItemBaseItemProps[] = useMemo(() => {
+      const items: KListItemBaseItemProps[] = [];
       if (isGroup) {
-        return [
-          {
+        items.push({
+          leftNode: {
+            icon: {
+              vectorName: 'logout-o',
+              tintColor: KColors.danger.normal,
+            },
+          },
+          tintColor: KColors.danger.normal,
+          onPress: onPressLeaveGroup,
+          showChevron: false,
+          paddingH: '0.75rem',
+          paddingV: '0.75rem',
+          customLabel: (
+            <KLabel.Text
+              typo="TextMdMedium"
+              color={KColors.danger.normal}
+              numberOfLines={1}
+            >
+              {trans('chat:info_leave_group')}
+            </KLabel.Text>
+          ),
+        });
+        if (isOwner) {
+          items.push({
             leftNode: {
               icon: {
-                vectorName: 'logout-o',
+                vectorName: 'minus-circle-o',
                 tintColor: KColors.danger.normal,
               },
             },
             tintColor: KColors.danger.normal,
-            onPress: onPressLeaveGroup,
+            onPress: handleDismissGroup,
             showChevron: false,
             paddingH: '0.75rem',
             paddingV: '0.75rem',
@@ -138,39 +179,45 @@ const ChatInfoActions = memo(
                 color={KColors.danger.normal}
                 numberOfLines={1}
               >
-                {trans('chat:info_leave_group')}
+                {trans('chat:dismiss_group')}
               </KLabel.Text>
             ),
-          },
-        ];
+          });
+        }
       }
 
-      return [
-        {
-          label: trans('chat:info_delete_history'),
-          leftNode: {
-            icon: {
-              vectorName: 'trash-alt-o-1',
-              tintColor: KColors.danger.normal,
-            },
+      items.push({
+        label: trans('chat:info_delete_history'),
+        leftNode: {
+          icon: {
+            vectorName: 'trash-alt-o-1',
+            tintColor: KColors.danger.normal,
           },
-          tintColor: KColors.danger.normal,
-          onPress: handleDeleteHistory,
-          showChevron: false,
-          paddingH: '0.75rem',
-          paddingV: '0.75rem',
-          customLabel: (
-            <KLabel.Text
-              typo="TextMdMedium"
-              color={KColors.danger.normal}
-              numberOfLines={1}
-            >
-              {trans('chat:info_delete_history')}
-            </KLabel.Text>
-          ),
         },
-      ];
-    }, [isGroup, onPressLeaveGroup, handleDeleteHistory]);
+        tintColor: KColors.danger.normal,
+        onPress: handleDeleteHistory,
+        showChevron: false,
+        paddingH: '0.75rem',
+        paddingV: '0.75rem',
+        customLabel: (
+          <KLabel.Text
+            typo="TextMdMedium"
+            color={KColors.danger.normal}
+            numberOfLines={1}
+          >
+            {trans('chat:info_delete_history')}
+          </KLabel.Text>
+        ),
+      });
+
+      return items;
+    }, [
+      isGroup,
+      onPressLeaveGroup,
+      handleDeleteHistory,
+      isOwner,
+      handleDismissGroup,
+    ]);
 
     return (
       <>

package/src/screens/ChatInfo/ChatInfoDescriptionRow.tsx

@@ -3,9 +3,9 @@ import { StyleSheet, type TextLayoutEvent } from 'react-native';
 import { KContainer, KLabel, KColors } from '@droppii/libs';
 import { trans } from '../../translation';
 import GroupDescriptionModal from './GroupDescriptionModal';
+import { useChatDetailContext } from '../../context';
 
 interface ChatInfoDescriptionRowProps {
-  introduction?: string;
   groupName?: string;
 }
 
@@ -13,7 +13,8 @@ const EXTRA_TEXT_LENGTH = 14; // Length of "...View More" text
 const MAX_LINES = 2;
 
 const ChatInfoDescriptionRow = memo(
-  ({ introduction, groupName }: ChatInfoDescriptionRowProps) => {
+  ({ groupName }: ChatInfoDescriptionRowProps) => {
+    const introduction = useChatDetailContext().groupInfo?.introduction;
     const [modalVisible, setModalVisible] = useState(false);
     const handlePressDescription = useCallback(() => setModalVisible(true), []);
     const handleCloseDescription = useCallback(

package/src/screens/ChatInfo/types.ts

@@ -9,4 +9,5 @@ export interface ChatInfoProps {
   onPressCreateGroup?: () => void;
   onPressAddToGroup?: () => void;
   onPressLeaveGroup?: () => void;
+  onDismissGroup?: () => void;
 }

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

@@ -63,11 +63,8 @@ import { ChatCurrentQuotedMessage } from './ChatCurrentQuotedMessage';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
 import { openBotMenuSheet } from './BotMenuSheet';
 import { UIUtils } from '../../utils/UIUtils';
-import { GroupPermission, PeerType } from '@droppii/openim-rn-client-sdk';
-import {
-  useGuardedAction,
-  useHasGroupPermission,
-} from '../../hooks/useGroupPermission';
+import { PeerType } from '@droppii/openim-rn-client-sdk';
+import { useCanSendMessage } from '../../hooks/useGroupPermission';
 import { useIsJoinedGroup } from '../../hooks/useIsJoinedGroup';
 
 interface ChatComposerInternalProps {
@@ -107,9 +104,8 @@ export const ChatComposer = memo(
     const { mutateAsync: closeSupportSession } = useCloseSupportSession();
     const { sendMessage } = useSendMessage();
     const compose = useChatCompose();
-    const isSendMessageAllowed = useHasGroupPermission(
-      GroupPermission.SendMessage
-    );
+    const { allowed: isSendMessageAllowed, reason: sendDeniedReason } =
+      useCanSendMessage();
 
     const { data: isJoinedGroup } = useIsJoinedGroup(conversation?.groupID);
 
@@ -149,20 +145,22 @@ export const ChatComposer = memo(
       onAttachmentOpenChange: setIsAttachmentOpen,
     });
 
-    const handleSend = useGuardedAction(
-      GroupPermission.SendMessage,
-      useCallback(async () => {
-        if (compose.isUploading || !compose.canSend) return;
-        try {
-          await compose.send();
-        } catch (error) {
-          if (__DEV__) console.error('[ChatComposer] Failed to send:', error);
-        }
-      }, [compose]),
-      {
-        deniedMessage: trans('chat:no_send_permission'),
+    const handleSend = useCallback(async () => {
+      if (!isSendMessageAllowed) {
+        UIUtils.toast.open({
+          title: sendDeniedReason,
+          theme: 'info',
+        });
+        return;
       }
-    );
+
+      if (compose.isUploading || !compose.canSend) return;
+      try {
+        await compose.send();
+      } catch (error) {
+        if (__DEV__) console.error('[ChatComposer] Failed to send:', error);
+      }
+    }, [compose, isSendMessageAllowed, sendDeniedReason]);
 
     const handleInputFocus = useCallback(() => {
       setIsInputFocused(true);
@@ -474,7 +472,7 @@ export const ChatComposer = memo(
       );
     } else if (!isSendMessageAllowed) {
       content = (
-        <KContainer.View row alignItems justifyContent>
+        <KContainer.View row alignItems justifyContent paddingT={'1rem'}>
           <KContainer.View marginR="0.25rem">
             <KImage.VectorIcons
               name="info-circle-o"
@@ -482,9 +480,7 @@ export const ChatComposer = memo(
               color={KColors.palette.gray.w600}
             />
           </KContainer.View>
-          <KLabel.Text typo="TextXsNormal">
-            {trans('group:cannot_send_message')}
-          </KLabel.Text>
+          <KLabel.Text typo="TextXsNormal">{sendDeniedReason}</KLabel.Text>
         </KContainer.View>
       );
     } else {

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

@@ -11,9 +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 { useGetGroupInfo } from '../../hooks/conversation/useGetGroupInfo';
-import { isGroupConversation } from '../../utils/conversation';
 import { useGetConversationDetail } from '../../hooks/conversation/useGetConversationDetail';
+import { useChatDetailContext } from '../../context';
 
 const ChatDetailHeader = memo(
   ({
@@ -34,11 +33,7 @@ const ChatDetailHeader = memo(
     const { data: usersInfo } = useGetUsersInfo(
       targetUserId ? [targetUserId] : []
     );
-
-    const isGroup = isGroupConversation(conversation);
-    const { data: groupInfo } = useGetGroupInfo(
-      isGroup ? conversation?.groupID : undefined
-    );
+    const memberCount = useChatDetailContext().groupInfo?.memberCount;
 
     const { faceURL, showName } = useMemo(() => {
       const userInfo = usersInfo?.[0];
@@ -135,24 +130,14 @@ const ChatDetailHeader = memo(
                   color={KColors.palette.gray.w500}
                   numberOfLines={1}
                 >
-                  {getConversationSubtitle(
-                    conversation,
-                    groupInfo?.memberCount
-                  )}
+                  {getConversationSubtitle(conversation, memberCount)}
                 </KLabel.Text>
               )}
             </KContainer.View>
           </KContainer.Touchable>
         </KContainer.View>
       ),
-      [
-        onBack,
-        onPressAvatar,
-        conversation,
-        faceURL,
-        showName,
-        groupInfo?.memberCount,
-      ]
+      [onBack, onPressAvatar, conversation, faceURL, showName, memberCount]
     );
 
     return (

package/src/translation/resources/i18n.ts

@@ -124,6 +124,7 @@ 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:dismiss_group': 'Giải tán nhóm',
   'chat:info_view_more': 'Xem thêm',
   'chat:group_description_title': 'Mô tả nhóm',
   'start': 'Bắt đầu',
@@ -171,9 +172,17 @@ const i18nKey: Record<string, string> = {
   'group:join': 'Tham gia',
   'group:not_in_group': 'Bạn cần tham gia nhóm để gửi tin nhắn',
   'group:cannot_send_message': 'Bạn không thể gửi tin nhắn vào nhóm này',
+  'group:messaging_muted_by_owner':
+    'Chỉ chủ nhóm và quản trị viên được phép gửi tin nhắn',
   'group:joined_group': 'Đã tham gia nhóm {{groupName}}',
   'group:public_group': 'Nhóm công khai',
   'group:private_group': 'Nhóm riêng tư',
+  'group:dismiss_confirm_title': 'Giải tán nhóm?',
+  'group:dismiss_confirm_desc':
+    'Tất cả thành viên và tin nhắn sẽ bị xoá. Bạn có chắc chắn muốn giải tán nhóm?',
+  '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',
 };
 
 export default {

package/src/types/chat.ts

@@ -1,8 +1,9 @@
 import {
-  GroupPermission,
   MessageType,
   type ConversationItem,
+  type GroupItem,
   type MessageItem,
+  type SelfUserInfo,
 } from '@droppii/openim-rn-client-sdk';
 import type { PropsWithChildren } from 'react';
 import type { IUrlMetadata } from './common';
@@ -206,6 +207,7 @@ export interface MessageStore {
 export interface ChatDetailContextType {
   conversationFlow?: IConversationFlow;
   isBotConversation: boolean;
+  isGroupConversation: boolean;
   setConverationFlowStep: (
     step?: IConversationFlowStep,
     isEnd?: boolean,
@@ -217,7 +219,8 @@ export interface ChatDetailContextType {
   quotedMessage?: MessageItem;
   setQuotedMessage: (item?: MessageItem) => void;
   conversationFlowMainMenu?: InputButtonItem[];
-  groupPermissions: GroupPermission[];
+  userInfo?: SelfUserInfo;
+  groupInfo?: GroupItem | null;
 }
 
 export interface ChatDetailProviderProps extends PropsWithChildren {}

package/src/types/events.ts

@@ -1,4 +1,4 @@
-import type { GroupPermission } from '@droppii/openim-rn-client-sdk';
+import type { SelfUserInfo } from '@droppii/openim-rn-client-sdk';
 
 export enum ChatEvent {
   ScrollToMessage = 'chat:scroll_to_message',
@@ -16,9 +16,7 @@ export interface MessageRevokedPayload {
   clientMsgID: string;
 }
 
-export interface GroupPermissionUpdatedPayload {
-  permissions: GroupPermission[];
-}
+export type GroupPermissionUpdatedPayload = Partial<SelfUserInfo>;
 
 export interface GroupRemovedPayload {
   groupID: string;