@droppii-org/chat-mobile 0.2.27 → 0.2.29

package/src/hooks/useMuteConversation.ts

@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+import OpenIMSDK, {
+  MessageReceiveOptType,
+} from '@droppii/openim-rn-client-sdk';
+import type { ConversationItem } from '@droppii/openim-rn-client-sdk';
+import { useConversationStore } from '../store';
+
+export function useMuteConversation() {
+  const muteConversation = useCallback(
+    async (conversation?: ConversationItem) => {
+      if (conversation == null) return;
+
+      await OpenIMSDK.setConversationRecvMessageOpt({
+        conversationID: conversation.conversationID,
+        opt: MessageReceiveOptType.NotNotify,
+      });
+      useConversationStore
+        .getState()
+        .updateConversations([
+          { ...conversation, recvMsgOpt: MessageReceiveOptType.NotNotify },
+        ]);
+    },
+    []
+  );
+
+  const unmuteConversation = useCallback(
+    async (conversation?: ConversationItem) => {
+      if (conversation == null) return;
+
+      await OpenIMSDK.setConversationRecvMessageOpt({
+        conversationID: conversation.conversationID,
+        opt: MessageReceiveOptType.Normal,
+      });
+      useConversationStore
+        .getState()
+        .updateConversations([
+          { ...conversation, recvMsgOpt: MessageReceiveOptType.Normal },
+        ]);
+    },
+    []
+  );
+
+  return { muteConversation, unmuteConversation };
+}

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

@@ -55,7 +55,7 @@ export const DEFAULT_ATTACHMENT_ACTIONS: DChatAttachmentAction[] = [
     iconName: 'camera-o',
   },
   {
-    id: 'documents',
+    id: 'file',
     label: 'Tài liệu',
     iconName: 'paperclip-o',
   },

package/src/screens/chat-detail/legend/LegendChatMessage.tsx

@@ -13,6 +13,7 @@ import { VideoMessage } from '../../../components/messages/videoMessage';
 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 { MessageStatusIndicator } from '../../../components/messages/MessageStatusIndicator';
 import type { BaseLegendMessageProps } from '../../../components/messages/types';
 import { messageStyles } from './messageTypes';
@@ -47,6 +48,7 @@ const messageComponentMap: Partial<
   [MessageType.VideoMessage]: VideoMessage,
   [MessageType.FileMessage]: FileMessage,
   [MERGED_MESSAGE_TYPE]: MergedMessage,
+  [MessageType.RevokeMessage]: RevokedMessage,
 };
 
 const MEDIA_TYPES: number[] = [

package/src/screens/chat-detail/messageToolbox/MessageToolboxItem.tsx

@@ -0,0 +1,38 @@
+import { memo } from 'react';
+import { KContainer, KImage, KLabel } from '@droppii/libs';
+
+interface MessageToolboxItemProps {
+  icon: string;
+  color: string;
+  label: string;
+  visible?: boolean;
+  onPress?: () => void;
+}
+
+export const MessageToolboxItem = memo(
+  ({ icon, color, label, visible, onPress }: MessageToolboxItemProps) => {
+    return (
+      <KContainer.VisibleView visible={!!visible}>
+        <KContainer.Touchable
+          row
+          alignItems
+          paddingH={'1rem'}
+          paddingV={'0.5rem'}
+          onPress={onPress}
+        >
+          <KImage.VectorIcons
+            name={icon}
+            provider="DroppiiNew"
+            size={24}
+            color={color}
+          />
+          <KLabel.Text typo="TextMdMedium" color={color} marginL="0.75rem">
+            {label}
+          </KLabel.Text>
+        </KContainer.Touchable>
+      </KContainer.VisibleView>
+    );
+  }
+);
+
+MessageToolboxItem.displayName = 'MessageToolboxItem';

package/src/screens/chat-detail/messageToolbox/MessageToolboxMenu.tsx

@@ -1,21 +1,18 @@
 import { memo } from 'react';
 import { StyleSheet } from 'react-native';
-import {
-  KContainer,
-  KImage,
-  KLabel,
-  KColors,
-  KSpacingValue,
-} from '@droppii/libs';
+import { KContainer, KColors, KSpacingValue } from '@droppii/libs';
 import { trans } from '../../../translation';
+import { MessageToolboxItem } from './MessageToolboxItem';
 
 interface MessageToolboxMenuProps {
   showCopyMessage?: boolean;
   showCopyMessageLink?: boolean;
   showRetryMessage?: boolean;
+  showRevokeMessage?: boolean;
   onCopyMessage: () => void;
   onCopyMessageLink: () => void;
   onRetryMessage: () => void;
+  onRevokeMessage: () => void;
 }
 
 export const MessageToolboxMenu = memo(
@@ -23,69 +20,45 @@ export const MessageToolboxMenu = memo(
     showCopyMessage,
     showCopyMessageLink,
     showRetryMessage,
+    showRevokeMessage,
     onCopyMessage,
     onCopyMessageLink,
     onRetryMessage,
+    onRevokeMessage,
   }: MessageToolboxMenuProps) => {
-    if (!showCopyMessage && !showCopyMessageLink && !showRetryMessage) {
-      return null;
-    }
-
     return (
       <KContainer.View style={styles.card}>
-        <KContainer.VisibleView visible={!!showCopyMessage}>
-          <KContainer.Touchable style={styles.row} onPress={onCopyMessage}>
-            <KImage.VectorIcons
-              name="copy-o"
-              provider="DroppiiNew"
-              size={24}
-              color={KColors.gray.dark}
-            />
-            <KLabel.Text
-              typo="TextMdMedium"
-              color={KColors.gray.dark}
-              marginL="0.75rem"
-            >
-              {trans('chat:copy_message')}
-            </KLabel.Text>
-          </KContainer.Touchable>
-        </KContainer.VisibleView>
+        <MessageToolboxItem
+          icon="copy-o"
+          color={KColors.gray.dark}
+          label={trans('chat:copy_message')}
+          visible={showCopyMessage}
+          onPress={onCopyMessage}
+        />
+
+        <MessageToolboxItem
+          icon="link-o"
+          color={KColors.gray.dark}
+          label={trans('chat:copy_message_link')}
+          visible={showCopyMessageLink}
+          onPress={onCopyMessageLink}
+        />
 
-        <KContainer.VisibleView visible={!!showCopyMessageLink}>
-          <KContainer.Touchable style={styles.row} onPress={onCopyMessageLink}>
-            <KImage.VectorIcons
-              name="link-o"
-              provider="DroppiiNew"
-              size={24}
-              color={KColors.gray.dark}
-            />
-            <KLabel.Text
-              typo="TextMdMedium"
-              color={KColors.gray.dark}
-              marginL="0.75rem"
-            >
-              {trans('chat:copy_message_link')}
-            </KLabel.Text>
-          </KContainer.Touchable>
-        </KContainer.VisibleView>
+        <MessageToolboxItem
+          icon="arrow-reload-o"
+          color={KColors.danger.normal}
+          label={trans('chat:retry_message')}
+          visible={showRetryMessage}
+          onPress={onRetryMessage}
+        />
 
-        <KContainer.VisibleView visible={!!showRetryMessage}>
-          <KContainer.Touchable style={styles.row} onPress={onRetryMessage}>
-            <KImage.VectorIcons
-              name="arrow-reload-o"
-              provider="DroppiiNew"
-              size={24}
-              color={KColors.danger.normal}
-            />
-            <KLabel.Text
-              typo="TextMdMedium"
-              color={KColors.danger.normal}
-              marginL="0.75rem"
-            >
-              {trans('chat:retry_message')}
-            </KLabel.Text>
-          </KContainer.Touchable>
-        </KContainer.VisibleView>
+        <MessageToolboxItem
+          icon="trash-alt-o-1"
+          color={KColors.danger.normal}
+          label={trans('chat:revoke_message')}
+          visible={showRevokeMessage}
+          onPress={onRevokeMessage}
+        />
       </KContainer.View>
     );
   }

package/src/screens/chat-detail/messageToolbox/MessageToolboxOverlay.tsx

@@ -1,4 +1,10 @@
-import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
 import { Modal, Pressable, StyleSheet } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { UIUtils } from '../../../utils/UIUtils';
@@ -7,7 +13,7 @@ import { LegendChatMessage } from '../legend/LegendChatMessage';
 import { MessageToolboxMenu } from './MessageToolboxMenu';
 import {
   getCopyableMessageText,
-  useMessageToolboxItems,
+  getMessageToolboxItems,
 } from './messageToolbox.utils';
 import type { DMessageItem } from '../../../types/chat';
 import type { MeasuredRect, MessageToolboxRef } from './types';
@@ -27,9 +33,11 @@ export const MessageToolboxOverlay = forwardRef<
   const [visible, setVisible] = useState(false);
   const [message, setMessage] = useState<DMessageItem | undefined>(undefined);
   const [rect, setRect] = useState<MeasuredRect | null>(null);
-  const toolboxItems = useMessageToolboxItems(message);
-  const { retryMessage } = useSendMessage();
-  console.log(message);
+  const toolboxItems = useMemo(
+    () => getMessageToolboxItems(message, currentUserId),
+    [message, currentUserId]
+  );
+  const { retryMessage, revokeMessage } = useSendMessage();
 
   const hide = useCallback(() => {
     setVisible(false);
@@ -37,11 +45,21 @@ export const MessageToolboxOverlay = forwardRef<
     setRect(null);
   }, []);
 
-  const show = useCallback((msg: DMessageItem, msgRect: MeasuredRect) => {
-    setMessage(msg);
-    setRect(msgRect);
-    setVisible(true);
-  }, []);
+  const show = useCallback(
+    (msg: DMessageItem, msgRect: MeasuredRect) => {
+      const toolboxNotAvailable =
+        Object.values(getMessageToolboxItems(msg, currentUserId)).filter(
+          Boolean
+        ).length === 0;
+
+      if (toolboxNotAvailable) return;
+
+      setMessage(msg);
+      setRect(msgRect);
+      setVisible(true);
+    },
+    [currentUserId]
+  );
 
   useImperativeHandle(ref, () => ({ show, hide }), [show, hide]);
 
@@ -76,6 +94,24 @@ export const MessageToolboxOverlay = forwardRef<
     hide();
   }, [message, hide, retryMessage]);
 
+  const handleRevokeMessage = useCallback(async () => {
+    if (!message) return;
+    hide();
+    try {
+      await revokeMessage(message);
+      UIUtils.toast.open({
+        title: trans('msg_type_revoke'),
+        theme: 'success',
+      });
+    } catch (error: any) {
+      console.error('revokeMessage', error);
+      UIUtils.toast.open({
+        title: trans('chat:generic_error'),
+        theme: 'error',
+      });
+    }
+  }, [message, hide, revokeMessage]);
+
   if (!visible || !message || !rect) {
     return null;
   }
@@ -109,6 +145,7 @@ export const MessageToolboxOverlay = forwardRef<
             onCopyMessage={handleCopyMessage}
             onCopyMessageLink={handleCopyMessageLink}
             onRetryMessage={handleRetryMessage}
+            onRevokeMessage={handleRevokeMessage}
           />
         }
       />

package/src/screens/chat-detail/messageToolbox/messageToolbox.utils.ts

@@ -1,6 +1,7 @@
 import { MessageStatus, MessageType } from '@droppii/openim-rn-client-sdk';
 import type { DMessageItem } from '../../../types/chat';
 import { getMessageText } from '../../../utils/legendListMessage';
+import { isMessageRevoked } from '../../../utils/messageUtils';
 
 // Copy message content is only offered for text and link messages.
 const COPYABLE_TEXT_TYPES: number[] = [
@@ -10,28 +11,39 @@ const COPYABLE_TEXT_TYPES: number[] = [
   MessageType.UrlTextMessage,
 ];
 
-export const isMessageRecalled = (message: DMessageItem): boolean =>
-  message.contentType === MessageType.RevokeMessage;
-
-export const isMessageSucceeded = (message: DMessageItem): boolean =>
+const isMessageSucceeded = (message: DMessageItem): boolean =>
   message.status !== MessageStatus.Failed &&
   message.status !== MessageStatus.Sending;
 
-// Failed or recalled messages never offer either copy action.
-export const isEligibleForToolbox = (message: DMessageItem): boolean =>
-  isMessageSucceeded(message) && !isMessageRecalled(message);
+// Failed or revoked messages never offer either copy action.
+const isEligibleForToolbox = (message: DMessageItem): boolean =>
+  isMessageSucceeded(message) && !isMessageRevoked(message);
 
-export const isCopyMessageSupported = (message: DMessageItem): boolean =>
+const isCopyMessageSupported = (message: DMessageItem): boolean =>
   isEligibleForToolbox(message) &&
   COPYABLE_TEXT_TYPES.includes(message.contentType);
 
 // All message types are supported, as long as the message is eligible.
-export const isCopyMessageLinkSupported = (message: DMessageItem): boolean =>
-  isEligibleForToolbox(message);
+// const isCopyMessageLinkSupported = (message: DMessageItem): boolean =>
+//   isEligibleForToolbox(message);
 
-export const isRetrySupported = (message: DMessageItem): boolean =>
+const isRetrySupported = (message: DMessageItem): boolean =>
   message.status === MessageStatus.Failed;
 
+// Revoke is only available within 24h of a successful send.
+const REVOKE_WINDOW_MS = 24 * 60 * 60 * 1000;
+
+// Revoke is only available for messages sent by the current user.
+// And not limited by message content type.
+const isRevokeMessageSupported = (
+  message: DMessageItem,
+  currentUserId?: string
+): boolean =>
+  isEligibleForToolbox(message) &&
+  !!currentUserId &&
+  message.sendID === currentUserId &&
+  Date.now() - (message.sendTime || message.createTime || 0) < REVOKE_WINDOW_MS;
+
 export const getCopyableMessageText = (message: DMessageItem): string => {
   if (message.contentType === MessageType.UrlTextMessage) {
     return message.urlTextElem?.content ?? '';
@@ -39,18 +51,23 @@ export const getCopyableMessageText = (message: DMessageItem): string => {
   return getMessageText(message);
 };
 
-export const useMessageToolboxItems = (message?: DMessageItem) => {
+export const getMessageToolboxItems = (
+  message?: DMessageItem,
+  currentUserId?: string
+) => {
   if (message == null) {
     return {};
   }
 
   const showCopyMessage = isCopyMessageSupported(message);
-  const showCopyMessageLink = isCopyMessageLinkSupported(message);
+  // const showCopyMessageLink = isCopyMessageLinkSupported(message);
   const showRetryMessage = isRetrySupported(message);
+  const showRevokeMessage = isRevokeMessageSupported(message, currentUserId);
 
   return {
     showCopyMessage,
-    showCopyMessageLink,
+    // showCopyMessageLink,
     showRetryMessage,
+    showRevokeMessage,
   };
 };

package/src/store/message.ts

@@ -1,4 +1,5 @@
 import { create } from 'zustand';
+import { MessageType } from '@droppii/openim-rn-client-sdk';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import type { DMessageItem, MessageStore } from '../types/chat';
 import { mergeMessages } from '../utils/message';
@@ -18,7 +19,7 @@ export const useMessageStore = create<MessageStore>()((set, get) => ({
     }));
   },
 
-  updateOneMessage: (message: MessageItem) => {
+  updateOneMessage: (message) => {
     const tmpList = [...get().messages];
     const idx = tmpList.findIndex(
       (msg) => msg.clientMsgID === message.clientMsgID
@@ -42,3 +43,18 @@ export const useMessageStore = create<MessageStore>()((set, get) => ({
     });
   },
 }));
+
+export const markMessageRevoked = (clientMsgID: string) => {
+  const alreadyRevoked = useMessageStore
+    .getState()
+    .messages.some(
+      (msg) =>
+        msg.clientMsgID === clientMsgID &&
+        msg.contentType === MessageType.RevokeMessage
+    );
+  if (alreadyRevoked) return;
+
+  useMessageStore
+    .getState()
+    .updateOneMessage({ clientMsgID, contentType: MessageType.RevokeMessage });
+};

package/src/translation/resources/i18n.ts

@@ -33,12 +33,23 @@ const i18nKey: Record<string, string> = {
   'chat:copy_message_success': 'Sao chép tin nhắn thành công',
   'chat:copy_message_link_success': 'Sao chép đường dẫn tin nhắn thành công',
   'chat:retry_message': 'Gửi lại',
+  'chat:revoke_message': 'Thu hồi',
   'msg_type_image': '[Hình ảnh]',
   'msg_type_voice': '[Tin nhắn thoại]',
   'msg_type_video': '[Video]',
   'msg_type_file': '[File đính kèm]',
   'msg_type_link': '[Liên kết]',
   'msg_type_revoke': 'Đã thu hồi tin nhắn',
+  'chat:revoked_by_sender': '{{sender}} đã thu hồi tin nhắn',
+  'chat:mute_action': 'Tắt thông báo',
+  'chat:unmute_action': 'Bật thông báo',
+  'chat:mute_confirm_title': 'Tắt thông báo',
+  'chat:mute_confirm_desc':
+    'Bạn có thể bỏ lỡ tin nhắn quan trọng nếu tắt thông báo! Bạn có chắc chắn muốn tắt thông báo?',
+  'chat:mute_confirm_primary': 'Tắt thông báo',
+  'chat:mute_confirm_secondary': 'Quay lại',
+  'chat:mute_toast_success': 'Đã tắt thông báo',
+  'chat:unmute_toast_success': 'Đã bật thông báo',
   'start': 'Bắt đầu',
   'restart': 'Bắt đầu lại',
 };

package/src/types/chat.ts

@@ -127,7 +127,9 @@ export interface MessageStore {
   hasMoreNewer: boolean;
   setMessages: (messages: DMessageItem[], hasMore: boolean) => void;
   pushNewMessage: (message: MessageItem) => void;
-  updateOneMessage: (message: MessageItem) => void;
+  updateOneMessage: (
+    message: Partial<MessageItem> & Pick<MessageItem, 'clientMsgID'>
+  ) => void;
   deleteOneMessage: (clientMsgID: string) => void;
   reset: () => void;
 }

package/src/utils/conversation.ts

@@ -65,7 +65,7 @@ export const generateContentBasedOnMessageType = (
     case MessageType.UrlTextMessage:
       return trans('msg_type_link');
     case MessageType.RevokeMessage:
-      return trans('revoked');
+      return trans('msg_type_revoke');
     default:
       return '';
   }

package/src/utils/device.ts

@@ -61,7 +61,7 @@ const DeviceUtils = {
       const result = await ImagePicker.openPicker({
         // cropping: true,
         mediaType: 'any',
-        compressImageQuality: 0.8,
+        compressImageQuality: 1,
         multiple,
         forceJpg: true,
       });

package/src/utils/messageUtils.ts

@@ -10,6 +10,10 @@ import {
 import type { DMessageItem } from '../types/chat';
 import { DChatMessageType } from '../types/message';
 import { formatDuration } from './dateTimeUtils';
+import { trans } from '../translation';
+
+export const isMessageRevoked = (message: DMessageItem): boolean =>
+  message.contentType === MessageType.RevokeMessage;
 
 export const extractTextContent = (message: DMessageItem): string => {
   if (message.textElem?.content) return message.textElem.content;
@@ -96,6 +100,9 @@ export const getMessagePreview = (message: DMessageItem): string => {
     case MessageType.QuoteMessage:
       return extractTextContent(message);
 
+    case MessageType.RevokeMessage:
+      return trans('msg_type_revoke');
+
     default:
       return '[Tin nhắn không được hỗ trợ]';
   }
@@ -111,19 +118,17 @@ export const getLastMessageText = (
   const preview = getMessagePreview(message);
   if (!preview) return '';
 
-  // Add sender name for outgoing messages
-  if (currentUserId && message.sendID === currentUserId) {
-    return `Bạn: ${preview}`;
-  }
-
-  // Add sender nickname for incoming messages
-  if (message.senderNickname) {
-    return `${message.senderNickname}: ${preview}`;
-  }
+  const sender =
+    currentUserId && message.sendID === currentUserId
+      ? 'Bạn'
+      : message.senderNickname ||
+        (conversation?.peerType === PeerType.Bot
+          ? conversation?.showName || ''
+          : undefined);
 
-  if (conversation?.peerType === PeerType.Bot) {
-    return `${conversation?.showName || ''}: ${preview}`;
-  }
+  if (!sender) return preview;
 
-  return preview;
+  return isMessageRevoked(message)
+    ? trans('chat:revoked_by_sender', { sender })
+    : `${sender}: ${preview}`;
 };