@droppii-org/chat-mobile 0.2.65 → 0.2.67

package/src/screens/ChatInfo/ChatInfoActions.tsx

@@ -13,18 +13,22 @@ import { trans } from '../../translation';
 interface ChatInfoActionsProps {
   conversation?: ConversationItem;
   isTargetActive: boolean;
+  isGroup?: boolean;
   onPressOrders?: () => void;
   onPressCreateGroup?: () => void;
   onPressAddToGroup?: () => void;
+  onPressLeaveGroup?: () => void;
 }
 
 const ChatInfoActions = memo(
   ({
     conversation,
     isTargetActive,
+    isGroup,
     onPressOrders,
     onPressCreateGroup,
     onPressAddToGroup,
+    onPressLeaveGroup,
   }: ChatInfoActionsProps) => {
     const { pinConversation, unpinConversation } = usePinConversation();
     const isPinned = Boolean(conversation?.isPinned);
@@ -41,8 +45,10 @@ const ChatInfoActions = memo(
     const handleDeleteHistory = useCallback(() => {}, []);
 
     const primaryData = useMemo(() => {
-      const items: KListItemBaseItemProps[] = [
-        {
+      const items: KListItemBaseItemProps[] = [];
+
+      if (!isGroup) {
+        items.push({
           leftNode: { icon: { vectorName: 'receipt-o' } },
           onPress: onPressOrders,
           paddingH: '0.75rem',
@@ -52,34 +58,34 @@ const ChatInfoActions = memo(
               {trans('chat:info_orders', { name: showName })}
             </KLabel.Text>
           ),
-        },
-      ];
+        });
 
-      if (isTargetActive) {
-        items.push(
-          {
-            leftNode: { icon: { vectorName: 'user-three-o' } },
-            onPress: onPressCreateGroup,
-            paddingH: '0.75rem',
-            paddingV: '0.75rem',
-            customLabel: (
-              <KLabel.Text typo="TextMdMedium" numberOfLines={1}>
-                {trans('chat:info_create_group', { name: showName })}
-              </KLabel.Text>
-            ),
-          },
-          {
-            leftNode: { icon: { vectorName: 'user-add-o' } },
-            onPress: onPressAddToGroup,
-            paddingH: '0.75rem',
-            paddingV: '0.75rem',
-            customLabel: (
-              <KLabel.Text typo="TextMdMedium" numberOfLines={1}>
-                {trans('chat:info_add_to_group')}
-              </KLabel.Text>
-            ),
-          }
-        );
+        if (isTargetActive) {
+          items.push(
+            {
+              leftNode: { icon: { vectorName: 'user-three-o' } },
+              onPress: onPressCreateGroup,
+              paddingH: '0.75rem',
+              paddingV: '0.75rem',
+              customLabel: (
+                <KLabel.Text typo="TextMdMedium" numberOfLines={1}>
+                  {trans('chat:info_create_group', { name: showName })}
+                </KLabel.Text>
+              ),
+            },
+            {
+              leftNode: { icon: { vectorName: 'user-add-o' } },
+              onPress: onPressAddToGroup,
+              paddingH: '0.75rem',
+              paddingV: '0.75rem',
+              customLabel: (
+                <KLabel.Text typo="TextMdMedium" numberOfLines={1}>
+                  {trans('chat:info_add_to_group')}
+                </KLabel.Text>
+              ),
+            }
+          );
+        }
       }
 
       items.push({
@@ -102,6 +108,7 @@ const ChatInfoActions = memo(
       return items;
     }, [
       showName,
+      isGroup,
       isTargetActive,
       isPinned,
       onPressOrders,
@@ -110,8 +117,35 @@ const ChatInfoActions = memo(
       handlePinPress,
     ]);
 
-    const deleteData: KListItemBaseItemProps[] = useMemo(
-      () => [
+    const dangerData: KListItemBaseItemProps[] = useMemo(() => {
+      if (isGroup) {
+        return [
+          {
+            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>
+            ),
+          },
+        ];
+      }
+
+      return [
         {
           label: trans('chat:info_delete_history'),
           leftNode: {
@@ -135,9 +169,8 @@ const ChatInfoActions = memo(
             </KLabel.Text>
           ),
         },
-      ],
-      [handleDeleteHistory]
-    );
+      ];
+    }, [isGroup, onPressLeaveGroup, handleDeleteHistory]);
 
     return (
       <>
@@ -158,7 +191,7 @@ const ChatInfoActions = memo(
           marginT="0.75rem"
           hiddenOverflow
         >
-          <KListItem.Base data={deleteData} />
+          <KListItem.Base data={dangerData} />
         </KContainer.View>
       </>
     );

package/src/screens/ChatInfo/ChatInfoDescriptionRow.tsx

@@ -0,0 +1,102 @@
+import { memo, useCallback, useState } from 'react';
+import { StyleSheet, type TextLayoutEvent } from 'react-native';
+import { KContainer, KLabel, KColors } from '@droppii/libs';
+import { trans } from '../../translation';
+import GroupDescriptionModal from './GroupDescriptionModal';
+
+interface ChatInfoDescriptionRowProps {
+  introduction?: string;
+  groupName?: string;
+}
+
+const EXTRA_TEXT_LENGTH = 14; // Length of "...View More" text
+const MAX_LINES = 2;
+
+const ChatInfoDescriptionRow = memo(
+  ({ introduction, groupName }: ChatInfoDescriptionRowProps) => {
+    const [modalVisible, setModalVisible] = useState(false);
+    const handlePressDescription = useCallback(() => setModalVisible(true), []);
+    const handleCloseDescription = useCallback(
+      () => setModalVisible(false),
+      []
+    );
+
+    const [isTruncated, setIsTruncated] = useState(false);
+    const [displayedText, setDisplayedText] = useState(introduction);
+
+    const handleTextLayout = useCallback((event: TextLayoutEvent) => {
+      const isTextTruncated = event.nativeEvent.lines.length > MAX_LINES;
+
+      setIsTruncated(isTextTruncated);
+
+      if (isTextTruncated) {
+        setDisplayedText(
+          event.nativeEvent.lines
+            .slice(0, MAX_LINES)
+            .map((line) => line.text)
+            .join(' ')
+            .slice(0, -EXTRA_TEXT_LENGTH) + '...'
+        );
+      }
+    }, []);
+
+    const textProps = {
+      color: KColors.gray.dark,
+      typo: 'TextMdMedium' as const,
+      paddingH: '0.75rem' as const,
+    };
+
+    if (!introduction) {
+      return null;
+    }
+
+    return (
+      <>
+        <KContainer.View
+          background={KColors.white}
+          br="3x"
+          marginH="0.75rem"
+          marginT="0.75rem"
+          paddingV="0.75rem"
+        >
+          <KLabel.Text
+            {...textProps}
+            style={styles.hiddenText}
+            numberOfLines={MAX_LINES + 1}
+            onTextLayout={handleTextLayout}
+          >
+            {introduction}
+          </KLabel.Text>
+          <KLabel.Text {...textProps} numberOfLines={2}>
+            {displayedText}
+            <KContainer.VisibleView visible={isTruncated}>
+              <KLabel.Text
+                {...textProps}
+                color={KColors.primary.normal}
+                onPress={handlePressDescription}
+              >
+                {trans('chat:info_view_more')}
+              </KLabel.Text>
+            </KContainer.VisibleView>
+          </KLabel.Text>
+        </KContainer.View>
+        <GroupDescriptionModal
+          visible={modalVisible}
+          groupName={groupName}
+          introduction={introduction}
+          onClose={handleCloseDescription}
+        />
+      </>
+    );
+  }
+);
+
+export default ChatInfoDescriptionRow;
+
+const styles = StyleSheet.create({
+  hiddenText: {
+    position: 'absolute',
+    opacity: 0,
+    zIndex: -1,
+  },
+});

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/ChatInfo/GroupDescriptionModal.tsx

@@ -0,0 +1,67 @@
+import { memo } from 'react';
+import { Modal, StyleSheet } from 'react-native';
+import { KContainer, KNavigation, KLabel, KColors } from '@droppii/libs';
+import { trans } from '../../translation';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+interface GroupDescriptionModalProps {
+  visible: boolean;
+  groupName?: string;
+  introduction?: string;
+  onClose: () => void;
+}
+
+const GroupDescriptionModal = memo(
+  ({
+    visible,
+    groupName,
+    introduction,
+    onClose,
+  }: GroupDescriptionModalProps) => (
+    <Modal
+      visible={visible}
+      transparent={false}
+      statusBarTranslucent
+      style={styles.modal}
+      presentationStyle="fullScreen"
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <SafeAreaProvider>
+        <KContainer.Page flex edges={['bottom']} background={KColors.white}>
+          <KNavigation.Header
+            theme="light"
+            alignment="left"
+            size="small"
+            leftButton={{
+              id: 'GroupDescriptionModalCloseButton',
+              icon: { vectorName: 'close-o' },
+              onPress: onClose,
+            }}
+            title={trans('chat:group_description_title')}
+            subTitle={groupName}
+            shadow
+          />
+          <KLabel.Text
+            paddingH="1rem"
+            paddingT="0.75rem"
+            typo="TextMdNormal"
+            color={KColors.gray.dark}
+          >
+            {introduction}
+          </KLabel.Text>
+        </KContainer.Page>
+      </SafeAreaProvider>
+    </Modal>
+  )
+);
+
+GroupDescriptionModal.displayName = 'GroupDescriptionModal';
+
+export default GroupDescriptionModal;
+
+const styles = StyleSheet.create({
+  modal: {
+    flex: 1,
+  },
+});

package/src/screens/ChatInfo/types.ts

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

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