@droppii-org/chat-mobile 0.2.26 → 0.2.28

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

@@ -1,91 +1,64 @@
 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(
   ({
     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}
+          visible={false}
+          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 =>
+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,7 +51,10 @@ 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 {};
   }
@@ -47,10 +62,12 @@ export const useMessageToolboxItems = (message?: DMessageItem) => {
   const showCopyMessage = isCopyMessageSupported(message);
   const showCopyMessageLink = isCopyMessageLinkSupported(message);
   const showRetryMessage = isRetrySupported(message);
+  const showRevokeMessage = isRevokeMessageSupported(message, currentUserId);
 
   return {
     showCopyMessage,
     showCopyMessageLink,
     showRetryMessage,
+    showRevokeMessage,
   };
 };

package/src/services/attachmentOrchestrator.ts

@@ -15,6 +15,7 @@ import {
   getAttachmentPriorityConfig,
   type AttachmentType,
 } from '../config/attachment-priority';
+import { allSettled } from '../utils/promise';
 
 export namespace AttachmentOrchestratorService {
   export async function sendPreparedAttachments(
@@ -282,7 +283,7 @@ export namespace AttachmentOrchestratorService {
       });
     }
 
-    const sendResults = await Promise.allSettled(
+    const sendResults = await allSettled(
       allMessages.map(async (m) => {
         const message = m as MessageItem;
         const result = await OpenIMSDK.sendMessageNotOss({

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,14 @@ 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',
   '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/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}`;
 };

package/src/utils/promise.ts

@@ -0,0 +1,18 @@
+export type SettledResult<T> =
+  | { status: 'fulfilled'; value: T }
+  | { status: 'rejected'; reason: unknown };
+
+/**
+ * Promise.allSettled polyfill — the RN/Hermes target for this app doesn't
+ * ship it, so a rejection would otherwise short-circuit Promise.all.
+ */
+export const allSettled = <T extends readonly unknown[]>(
+  promises: readonly [...T]
+): Promise<{ [K in keyof T]: SettledResult<Awaited<T[K]>> }> =>
+  Promise.all(
+    promises.map((p) =>
+      Promise.resolve(p)
+        .then((value) => ({ status: 'fulfilled' as const, value }))
+        .catch((reason) => ({ status: 'rejected' as const, reason }))
+    )
+  ) as Promise<{ [K in keyof T]: SettledResult<Awaited<T[K]>> }>;