@droppii-org/chat-mobile 0.2.66 → 0.2.68

package/src/hooks/message/usePinMessage.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import OpenIMSDK from '@droppii/openim-rn-client-sdk';
+import OpenIMSDK, { GroupPermission } from '@droppii/openim-rn-client-sdk';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import { useConversationStore } from '../../store/conversation';
 import { useMessageStore } from '../../store/message';
@@ -7,6 +7,7 @@ import { usePinnedMessageStore } from '../../store/pinnedMessage';
 import { useUserStore } from '../../store/user';
 import { UIUtils } from '../../utils/UIUtils';
 import { trans } from '../../translation';
+import { useGuardedAction } from '../useGroupPermission';
 
 const PINNED_MESSAGES_PAGE_SIZE = 5;
 
@@ -147,9 +148,14 @@ export const usePinMessage = (conversationID?: string) => {
     [conversationID, removeMessage]
   );
 
+  const pinMessageWithPermission = useGuardedAction(
+    GroupPermission.PinMessage,
+    pinMessage
+  );
+
   return {
     pinnedMessages,
-    pinMessage,
+    pinMessage: pinMessageWithPermission,
     unpinMessage,
   };
 };

package/src/hooks/message/useSendMessage.ts

@@ -33,8 +33,8 @@ import type { StickerItem } from '../../types/sticker';
 import { useQueryClient } from '@tanstack/react-query';
 import { stickerQueryKeys } from '../query-keys';
 import { getMessagePreview } from '../../utils/messageUtils';
-import { UIUtils } from '../../utils/UIUtils';
 import { trans } from '../../translation';
+import { useGuardedAction } from '../useGroupPermission';
 
 const buildSendParams = (
   message: MessageItem,
@@ -52,8 +52,7 @@ export const useSendMessage = () => {
   const applicationType = useChatContext().applicationType;
   const pushNewMessage = useMessageStore((state) => state.pushNewMessage);
   const updateOneMessage = useMessageStore((state) => state.updateOneMessage);
-  const { quotedMessage, setQuotedMessage, groupPermissions } =
-    useChatDetailContext();
+  const { quotedMessage, setQuotedMessage } = useChatDetailContext();
   const queryClient = useQueryClient();
 
   const dispatchSend = useCallback(
@@ -107,16 +106,6 @@ export const useSendMessage = () => {
       const recvID = currentConversation?.userID || targetUserId;
       const groupID = currentConversation?.groupID || targetGroupId;
       if (!recvID && !groupID) return;
-      if (
-        currentConversation?.conversationType === SessionType.Group &&
-        !groupPermissions?.includes(GroupPermission.SendMessage)
-      ) {
-        UIUtils.toast.open({
-          title: trans('chat:no_send_permission'),
-          theme: 'info',
-        });
-        return;
-      }
 
       const messageList: MessageItem[] = [];
 
@@ -192,7 +181,6 @@ export const useSendMessage = () => {
       quotedMessage,
       setQuotedMessage,
       queryClient,
-      groupPermissions,
     ]
   );
 
@@ -257,8 +245,16 @@ export const useSendMessage = () => {
     markMessageRevoked(message.clientMsgID);
   }, []);
 
-  return {
+  const sendMessageWithPermission = useGuardedAction(
+    GroupPermission.SendMessage,
     sendMessage,
+    {
+      deniedMessage: trans('chat:no_send_permission'),
+    }
+  );
+
+  return {
+    sendMessage: sendMessageWithPermission,
     retryMessage,
     revokeMessage,
   };
@@ -268,14 +264,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/hooks/useGroupPermission.ts

@@ -0,0 +1,43 @@
+import { PeerType, type GroupPermission } from '@droppii/openim-rn-client-sdk';
+import { useChatDetailContext } from '../context';
+import { useCallback, useMemo } from 'react';
+import { trans } from '../translation';
+import { UIUtils } from '../utils/UIUtils';
+
+export const useHasGroupPermission = (
+  permission: GroupPermission | GroupPermission[],
+  mode: 'every' | 'some' = 'every'
+): boolean => {
+  const { conversation, groupPermissions } = useChatDetailContext();
+  const isNotGroup = conversation?.peerType !== PeerType.Group;
+  const required = Array.isArray(permission) ? permission : [permission];
+
+  return useMemo(() => {
+    if (isNotGroup) return true;
+    return mode === 'every'
+      ? required.every((p) => groupPermissions?.includes(p))
+      : required.some((p) => groupPermissions?.includes(p));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [groupPermissions, isNotGroup, mode]);
+};
+
+export const useGuardedAction = <T extends (...args: any[]) => any>(
+  permission: GroupPermission,
+  action: T,
+  options?: { deniedMessage?: string }
+): T => {
+  const allowed = useHasGroupPermission(permission);
+  return useCallback(
+    (...args: Parameters<T>) => {
+      if (!allowed) {
+        UIUtils.toast.open({
+          title: options?.deniedMessage ?? trans('chat:no_permission'),
+          theme: 'info',
+        });
+        return;
+      }
+      return action(...args);
+    },
+    [allowed, action, options?.deniedMessage]
+  ) as T;
+};

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,8 +63,8 @@ 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 { useConversationStore } from '../../store';
+import { GroupPermission, PeerType } from '@droppii/openim-rn-client-sdk';
+import { useGuardedAction } from '../../hooks/useGroupPermission';
 
 interface ChatComposerInternalProps {
   isEmptyMessage?: boolean;
@@ -88,16 +88,17 @@ 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();
     const { sendMessage } = useSendMessage();
     const compose = useChatCompose();
-    const groupPermissions = useChatDetailContext().groupPermissions;
 
     const {
       activePanelType,
@@ -131,27 +132,20 @@ export const ChatComposer = memo(
       onAttachmentOpenChange: setIsAttachmentOpen,
     });
 
-    const handleSend = useCallback(async () => {
-      const currentConversation = useConversationStore
-        .getState()
-        .getCurrentConversation();
-      if (
-        currentConversation?.conversationType === SessionType.Group &&
-        !groupPermissions?.includes(GroupPermission.SendMessage)
-      ) {
-        UIUtils.toast.open({
-          title: trans('chat:no_send_permission'),
-          theme: 'info',
-        });
-        return;
-      }
-      if (compose.isUploading || !compose.canSend) return;
-      try {
-        await compose.send();
-      } catch (error) {
-        if (__DEV__) console.error('[ChatComposer] Failed to send:', error);
+    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'),
       }
-    }, [compose, groupPermissions]);
+    );
 
     const handleInputFocus = useCallback(() => {
       setIsInputFocused(true);
@@ -409,7 +403,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 +435,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/chat-detail/messageToolbox/MessageToolboxOverlay.tsx

@@ -20,7 +20,11 @@ import { MessageToolboxWrapper } from './MessageToolboxWrapper';
 import type { ReactNode } from 'react';
 import { useSendMessage } from '../../../hooks/message/useSendMessage';
 import { useChatDetailContext } from '../../../context';
-import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import {
+  GroupPermission,
+  type MessageItem,
+} from '@droppii/openim-rn-client-sdk';
+import { useHasGroupPermission } from '../../../hooks/useGroupPermission';
 
 interface MessageToolboxOverlayProps {
   currentUserId?: string;
@@ -51,6 +55,7 @@ export const MessageToolboxOverlay = forwardRef<
       [message, currentUserId]
     );
     const { retryMessage, revokeMessage } = useSendMessage();
+    const isPinAllowed = useHasGroupPermission(GroupPermission.PinMessage);
 
     const hide = useCallback(() => {
       setVisible(false);
@@ -173,6 +178,8 @@ export const MessageToolboxOverlay = forwardRef<
           toolbox={
             <MessageToolboxMenu
               {...toolboxItems}
+              showPinMessage={toolboxItems.showPinMessage && isPinAllowed}
+              showUnpinMessage={toolboxItems.showUnpinMessage && isPinAllowed}
               onCopyMessage={handleCopyMessage}
               onCopyMessageLink={handleCopyMessageLink}
               onPinMessage={handlePinMessage}

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;
   }