@droppii-org/chat-mobile 0.2.64 → 0.2.66

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/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,6 +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';
 
 interface ChatComposerInternalProps {
   isEmptyMessage?: boolean;
@@ -95,6 +97,7 @@ export const ChatComposer = memo(
     const { mutateAsync: closeSupportSession } = useCloseSupportSession();
     const { sendMessage } = useSendMessage();
     const compose = useChatCompose();
+    const groupPermissions = useChatDetailContext().groupPermissions;
 
     const {
       activePanelType,
@@ -129,13 +132,26 @@ export const ChatComposer = memo(
     });
 
     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);
       }
-    }, [compose]);
+    }, [compose, groupPermissions]);
 
     const handleInputFocus = useCallback(() => {
       setIsInputFocused(true);

package/src/translation/resources/i18n.ts

@@ -92,6 +92,9 @@ const i18nKey: Record<string, string> = {
   'chat:info_pin_message': 'Ghim trò chuyện',
   '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:info_view_more': 'Xem thêm',
+  'chat:group_description_title': 'Mô tả nhóm',
   'start': 'Bắt đầu',
   'restart': 'Bắt đầu lại',
   'gallery': 'Ảnh/Video',
@@ -129,6 +132,7 @@ const i18nKey: Record<string, string> = {
   'search_conversation:empty_hint': 'Bạn có thể tìm kiếm theo liên hệ',
   'view_all': 'Xem tất cả',
   'search_message:revoked_message': 'Tin nhắn đã được thu hồi',
+  'chat:no_send_permission': 'Bạn không có quyền gửi tin nhắn',
 };
 
 export default {

package/src/types/chat.ts

@@ -1,4 +1,5 @@
 import {
+  GroupPermission,
   MessageType,
   type ConversationItem,
   type MessageItem,
@@ -216,6 +217,7 @@ export interface ChatDetailContextType {
   quotedMessage?: MessageItem;
   setQuotedMessage: (item?: MessageItem) => void;
   conversationFlowMainMenu?: InputButtonItem[];
+  groupPermissions: GroupPermission[];
 }
 
 export interface ChatDetailProviderProps extends PropsWithChildren {}

package/src/types/events.ts

@@ -1,7 +1,10 @@
+import type { GroupPermission } from '@droppii/openim-rn-client-sdk';
+
 export enum ChatEvent {
   ScrollToMessage = 'chat:scroll_to_message',
   ScrollToBottom = 'chat:scroll_to_bottom',
   MessageRevoked = 'chat:message_revoked',
+  GroupPermissionUpdated = 'chat:group_permission_updated',
 }
 
 export interface ScrollToMessagePayload {
@@ -11,3 +14,7 @@ export interface ScrollToMessagePayload {
 export interface MessageRevokedPayload {
   clientMsgID: string;
 }
+
+export interface GroupPermissionUpdatedPayload {
+  permissions: GroupPermission[];
+}

package/src/utils/conversation.ts

@@ -56,3 +56,9 @@ export const getBotId = (conversation?: ConversationItem) => {
   }
   return undefined;
 };
+
+export const isGroupConversation = (
+  conversation?: Pick<ConversationItem, 'conversationType' | 'peerType'>
+) => {
+  return conversation?.peerType === PeerType.Group;
+};