@droppii-org/chat-mobile 0.2.37 → 0.2.39

package/src/screens/chat-detail/ChatCurrentQuotedMessage.tsx

@@ -0,0 +1,153 @@
+import {
+  KColors,
+  KContainer,
+  KImage,
+  KLabel,
+  KRadiusValue,
+  KSpacingValue,
+} from '@droppii/libs';
+import { memo, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { useChatDetailContext } from '../../context';
+import {
+  getMessagePreviewParts,
+  getReplySenderName,
+  parseUrlMetadata,
+} from '../../utils/messageUtils';
+import { trans } from '../../translation';
+import { useUserStore } from '../../store';
+import { MessageType } from '@droppii/openim-rn-client-sdk';
+import { getFileIcon, getMimeType } from '../../utils/imageUtils';
+
+export const ChatCurrentQuotedMessage = memo(() => {
+  const { quotedMessage, conversation, setQuotedMessage } =
+    useChatDetailContext();
+
+  const messagePreview = getMessagePreviewParts(quotedMessage);
+
+  const currentUserId = useUserStore((s) => s.user?.userID);
+
+  const imageUrl = useMemo(() => {
+    switch (quotedMessage?.contentType) {
+      case MessageType.PictureMessage:
+        return quotedMessage?.pictureElem?.snapshotPicture?.url || '';
+      case MessageType.VideoMessage:
+        return quotedMessage?.videoElem?.snapshotUrl || '';
+      case MessageType.UrlTextMessage:
+        const metadata = parseUrlMetadata(quotedMessage?.ex);
+        return metadata?.image || '';
+      default:
+        return '';
+    }
+  }, [quotedMessage]);
+
+  const iconSource = useMemo(() => {
+    if (quotedMessage?.contentType !== MessageType.FileMessage) return '';
+    const mimeType = getMimeType(quotedMessage?.fileElem?.fileName || '');
+    return getFileIcon(mimeType);
+  }, [quotedMessage]);
+
+  if (!quotedMessage) return null;
+
+  return (
+    <KContainer.View style={styles.container}>
+      <KContainer.View style={styles.dot} />
+      <KContainer.VisibleView visible={!!imageUrl}>
+        <KContainer.View style={styles.imageContainer}>
+          <KImage.Base uri={imageUrl} style={styles.imageContainer} />
+          <KContainer.VisibleView
+            visible={quotedMessage?.contentType === MessageType.VideoMessage}
+          >
+            <KContainer.View style={styles.playIconContainer}>
+              <KContainer.View style={styles.playIcon}>
+                <KImage.VectorIcons
+                  name="play-b"
+                  size={12}
+                  color={KColors.white}
+                />
+              </KContainer.View>
+            </KContainer.View>
+          </KContainer.VisibleView>
+        </KContainer.View>
+      </KContainer.VisibleView>
+      <KContainer.VisibleView visible={!!iconSource}>
+        <KImage.Base
+          uri={iconSource}
+          style={styles.icon}
+          resizeMode="contain"
+        />
+      </KContainer.VisibleView>
+      <KContainer.View style={styles.content}>
+        <KLabel.Text typo="TextNmMedium" numberOfLines={1}>
+          {trans('chat:reply_to', {
+            name: getReplySenderName(
+              quotedMessage,
+              currentUserId,
+              conversation
+            ),
+          })}
+        </KLabel.Text>
+        <KLabel.Text
+          typo="TextSmNormal"
+          color={KColors.gray.light}
+          numberOfLines={1}
+          {...messagePreview.textProps}
+        >
+          {messagePreview.text}
+        </KLabel.Text>
+      </KContainer.View>
+      <KContainer.Touchable onPress={() => setQuotedMessage(undefined)}>
+        <KImage.VectorIcons name="close-o" size={16} />
+      </KContainer.Touchable>
+    </KContainer.View>
+  );
+});
+
+ChatCurrentQuotedMessage.displayName = 'ChatCurrentQuotedMessage';
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: KSpacingValue['0.25rem'],
+    paddingHorizontal: KSpacingValue['0.5rem'],
+    backgroundColor: KColors.opacity.grayLight[10],
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['0.5rem'],
+    justifyContent: 'space-between',
+  },
+  dot: {
+    width: 3,
+    height: '100%',
+    backgroundColor: KColors.palette.grayCool.w200,
+    borderRadius: KRadiusValue.x,
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: KSpacingValue['0.25rem'],
+  },
+  icon: {
+    width: 24,
+    height: 24,
+  },
+  imageContainer: {
+    width: 42,
+    height: 42,
+    borderRadius: KRadiusValue['2x'],
+  },
+  playIconContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  playIcon: {
+    borderRadius: 8,
+    padding: KSpacingValue['0.25rem'],
+    backgroundColor: KColors.hexToRgba(KColors.black, 0.6),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/screens/chat-detail/ChatDetail.tsx

@@ -22,12 +22,13 @@ import type { ChatDetailProps } from './types';
 import { normalizeUrl } from '../../utils/url';
 import { MessageToolboxOverlay } from './messageToolbox/MessageToolboxOverlay';
 import type { MeasuredRect, MessageToolboxRef } from './messageToolbox/types';
-import { DBotStatusValue, type DMessageItem } from '../../types/chat';
+import { DBotStatusValue } from '../../types/chat';
 import {
   useGetConversationDetail,
   useGetStatusConversationBot,
 } from '../../hooks/conversation/useGetConversationDetail';
 import { PeerType } from '@droppii/openim-rn-client-sdk';
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 
 const ChatDetail = memo(
   ({
@@ -134,7 +135,7 @@ const ChatDetail = memo(
     );
 
     const handleMessageLongPress = useCallback(
-      (message: DMessageItem, rect: MeasuredRect) => {
+      (message: MessageItem, rect: MeasuredRect) => {
         messageToolboxRef.current?.show(message, rect);
       },
       []

package/src/screens/chat-detail/ChatListLegend.tsx

@@ -9,7 +9,6 @@ import { LegendList, type LegendListRef } from '@legendapp/list/react-native';
 import { KContainer, KColors, KSpacingValue, KLabel } from '@droppii/libs';
 import { precomputeLegendListData } from '../../utils/legendListMessage';
 import type { ChatListProps } from './types';
-import type { DMessageItem } from '../../types/chat';
 import { LegendChatMessage } from './legend/LegendChatMessage';
 import { LegendChatDay } from './legend/LegendChatDay';
 import { LegendChatLoadEarlier } from './legend/LegendChatLoadEarlier';
@@ -20,6 +19,7 @@ import { useResetFlow, useRunFlow } from '../../hooks/flows/useFlow';
 import type { IRunConversationFlowPayload } from '../../types/flows';
 import { useSendMessage } from '../../hooks/message/useSendMessage';
 import { messageStyles } from './legend/messageTypes';
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 
 export const ChatListLegend = memo(
   ({
@@ -90,7 +90,7 @@ export const ChatListLegend = memo(
     );
 
     const handleMessageLongPress = useCallback(
-      (messageId: string, message: DMessageItem) => {
+      (messageId: string, message: MessageItem) => {
         const node = rowRefsMap.current.get(messageId);
         node?.measureInWindow((x, y, width, height) => {
           onLongPress?.(message, { x, y, width, height });
@@ -115,7 +115,7 @@ export const ChatListLegend = memo(
         try {
           if (!item) return null;
 
-          const message = item as DMessageItem;
+          const message = item as MessageItem;
           const isOutgoing = message.sendID === currentUserId;
           const isLastIncoming =
             !isOutgoing &&

package/src/screens/chat-detail/PinnedMessageBar.tsx

@@ -10,68 +10,66 @@ import {
 } from '@droppii/libs';
 import { trans } from '../../translation';
 import {
-  getMessagePreview,
+  getMessagePreviewParts,
   getPinnedMessagePreview,
 } from '../../utils/messageUtils';
-import type { DMessageItem } from '../../types/chat';
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 
 interface PinnedMessageBarProps {
-  messages: DMessageItem[];
+  messages: MessageItem[];
   currentUserId?: string;
   onPress?: () => void;
 }
 
-const PinnedMessageThumbnail = memo(
-  ({ message }: { message: DMessageItem }) => {
-    const preview = useMemo(() => getPinnedMessagePreview(message), [message]);
+const PinnedMessageThumbnail = memo(({ message }: { message: MessageItem }) => {
+  const preview = useMemo(() => getPinnedMessagePreview(message), [message]);
 
-    if (preview.mediaType === 'image' && preview.thumbnailUrl) {
-      return (
-        <KImage.Base
-          uri={preview.thumbnailUrl}
-          style={styles.thumbnail}
-          resizeMode="cover"
-        />
-      );
-    }
-
-    if (preview.mediaType === 'video') {
-      return (
-        <KContainer.View style={styles.thumbnail}>
-          {preview.thumbnailUrl && (
-            <KImage.Base
-              uri={preview.thumbnailUrl}
-              style={styles.thumbnail}
-              resizeMode="cover"
-            />
-          )}
-          <KContainer.View style={styles.videoOverlay} center>
-            <KImage.VectorIcons
-              name="play-circle"
-              provider="MaterialCommunityIcons"
-              size={16}
-              color={KColors.white}
-            />
-          </KContainer.View>
-        </KContainer.View>
-      );
-    }
+  if (preview.mediaType === 'image' && preview.thumbnailUrl) {
+    return (
+      <KImage.Base
+        uri={preview.thumbnailUrl}
+        style={styles.thumbnail}
+        resizeMode="cover"
+      />
+    );
+  }
 
-    if (preview.mediaType === 'file' && preview.fileIcon) {
-      return (
-        <KContainer.View marginL="0.75rem">
+  if (preview.mediaType === 'video') {
+    return (
+      <KContainer.View style={styles.thumbnail}>
+        {preview.thumbnailUrl && (
           <KImage.Base
-            uri={preview.fileIcon}
-            style={styles.fileIcon}
-            resizeMode="contain"
+            uri={preview.thumbnailUrl}
+            style={styles.thumbnail}
+            resizeMode="cover"
+          />
+        )}
+        <KContainer.View style={styles.videoOverlay} center>
+          <KImage.VectorIcons
+            name="play-circle"
+            provider="MaterialCommunityIcons"
+            size={16}
+            color={KColors.white}
           />
         </KContainer.View>
-      );
-    }
+      </KContainer.View>
+    );
+  }
 
-    return null;
+  if (preview.mediaType === 'file' && preview.fileIcon) {
+    return (
+      <KContainer.View marginL="0.75rem">
+        <KImage.Base
+          uri={preview.fileIcon}
+          style={styles.fileIcon}
+          resizeMode="contain"
+        />
+      </KContainer.View>
+    );
   }
-);
+
+  return null;
+});
 
 PinnedMessageThumbnail.displayName = 'PinnedMessageThumbnail';
 
@@ -86,6 +84,7 @@ export const PinnedMessageBar = memo(
       latest.sendID === currentUserId ? 'Bạn' : latest.senderNickname || '';
     const remainingCount = messages.length - 1;
     const { subtitleKey } = getPinnedMessagePreview(latest);
+    const messagePreview = getMessagePreviewParts(latest);
 
     return (
       <KContainer.Touchable
@@ -97,8 +96,12 @@ export const PinnedMessageBar = memo(
 
         <KContainer.View row alignItems flex paddingR="0.75rem">
           <KContainer.View style={styles.content}>
-            <KLabel.Text typo="TextNmMedium" numberOfLines={1}>
-              {getMessagePreview(latest)}
+            <KLabel.Text
+              typo="TextNmMedium"
+              numberOfLines={1}
+              {...messagePreview.textProps}
+            >
+              {messagePreview.text}
             </KLabel.Text>
 
             <KContainer.View row alignItems paddingR="0.75rem">

package/src/screens/chat-detail/PinnedMessagesSheet.tsx

@@ -18,17 +18,16 @@ import { formatMessageTime, messageStyles } from './legend/messageTypes';
 import { MessageToolboxWrapper } from './messageToolbox/MessageToolboxWrapper';
 import { MessageToolboxMenu } from './messageToolbox/MessageToolboxMenu';
 import type { MeasuredRect } from './messageToolbox/types';
-import type { DMessageItem } from '../../types/chat';
 
 interface PinnedMessageToolboxRef {
-  show: (message: DMessageItem, rect: MeasuredRect) => void;
+  show: (message: MessageItem, rect: MeasuredRect) => void;
   hide: () => void;
 }
 
 interface PinnedMessageToolboxOverlayProps {
   currentUserId?: string;
   unpinMessage: (message: MessageItem) => void | Promise<void>;
-  customMessageItemFactory?: (item: DMessageItem) => ReactNode;
+  customMessageItemFactory?: (item: MessageItem) => ReactNode;
 }
 
 // Mirrors MessageToolboxOverlay (used for the main chat list's long-press
@@ -38,7 +37,7 @@ const PinnedMessageToolboxOverlay = memo(
   forwardRef<PinnedMessageToolboxRef, PinnedMessageToolboxOverlayProps>(
     ({ currentUserId, unpinMessage, customMessageItemFactory }, ref) => {
       const [visible, setVisible] = useState(false);
-      const [message, setMessage] = useState<DMessageItem | undefined>(
+      const [message, setMessage] = useState<MessageItem | undefined>(
         undefined
       );
       const [rect, setRect] = useState<MeasuredRect | null>(null);
@@ -49,7 +48,7 @@ const PinnedMessageToolboxOverlay = memo(
         setRect(null);
       }, []);
 
-      const show = useCallback((msg: DMessageItem, msgRect: MeasuredRect) => {
+      const show = useCallback((msg: MessageItem, msgRect: MeasuredRect) => {
         setMessage(msg);
         setRect(msgRect);
         setVisible(true);
@@ -127,7 +126,7 @@ const styles = StyleSheet.create({
 interface PinnedMessagesSheetContentProps {
   currentUserId?: string;
   unpinMessage: (message: MessageItem) => void | Promise<void>;
-  customMessageItemFactory?: (item: DMessageItem) => ReactNode;
+  customMessageItemFactory?: (item: MessageItem) => ReactNode;
 }
 
 const PinnedMessagesSheetContent = memo(
@@ -141,7 +140,7 @@ const PinnedMessagesSheetContent = memo(
     const rowRefsMap = useRef<Map<string, View | null>>(new Map());
 
     const handleLongPress = useCallback(
-      (messageId: string, message: DMessageItem) => {
+      (messageId: string, message: MessageItem) => {
         const node = rowRefsMap.current.get(messageId);
         node?.measureInWindow((x, y, width, height) => {
           toolboxRef.current?.show(message, { x, y, width, height });
@@ -216,7 +215,7 @@ PinnedMessagesSheetContent.displayName = 'PinnedMessagesSheetContent';
 export interface OpenPinnedMessagesSheetParams {
   currentUserId?: string;
   unpinMessage: (message: MessageItem) => void | Promise<void>;
-  customMessageItemFactory?: (item: DMessageItem) => ReactNode;
+  customMessageItemFactory?: (item: MessageItem) => ReactNode;
 }
 
 export const openPinnedMessagesSheet = ({

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

@@ -6,7 +6,6 @@ import { MessageType } from '@droppii/openim-rn-client-sdk';
 import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { runOnJS } from 'react-native-reanimated';
-import type { DMessageItem } from '../../../types/chat';
 import type { MediaItem } from '../../../hooks/useMediaViewer';
 import { TextMessage } from '../../../components/messages/textMessage';
 import { ImageMessage } from '../../../components/messages/imageMessage';
@@ -18,6 +17,7 @@ import { RevokedMessage } from '../../../components/messages/revokedMessage';
 import { MessageStatusIndicator } from '../../../components/messages/MessageStatusIndicator';
 import type { BaseLegendMessageProps } from '../../../components/messages/types';
 import { messageStyles } from './messageTypes';
+import QuotedMessage from '../../../components/messages/quotedMessage';
 
 type MessageProps = BaseLegendMessageProps & {
   onPressUrl?: (url: string) => void;
@@ -25,14 +25,14 @@ type MessageProps = BaseLegendMessageProps & {
 };
 
 interface LegendChatMessageProps {
-  message: DMessageItem;
+  message: MessageItem;
   isOutgoing: boolean;
   createdAtTime: number;
   onMediaPress?: (items: MediaItem[], index?: number) => void;
   onPressUrl?: (url: string) => void;
   onRetry?: (message: MessageItem) => void;
   onLongPress?: () => void;
-  customMessageItemFactory?: (m: DMessageItem) => ReactNode;
+  customMessageItemFactory?: (m: MessageItem) => ReactNode;
 }
 
 // OpenIM message types (not all exposed as MessageType enum)
@@ -43,7 +43,7 @@ const messageComponentMap: Partial<
 > = {
   [MessageType.TextMessage]: TextMessage,
   [MessageType.AtTextMessage]: TextMessage,
-  [MessageType.QuoteMessage]: TextMessage,
+  [MessageType.QuoteMessage]: QuotedMessage,
   [MessageType.UrlTextMessage]: LinkMessage,
   [MessageType.PictureMessage]: ImageMessage,
   [MessageType.VideoMessage]: VideoMessage,

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

@@ -12,13 +12,15 @@ interface MessageToolboxMenuProps {
   showRetryMessage?: boolean;
   showRevokeMessage?: boolean;
   showViewOriginalMessage?: boolean;
-  onCopyMessage?: () => void;
-  onCopyMessageLink?: () => void;
   onPinMessage?: () => void;
   onUnpinMessage?: () => void;
+  onViewOriginalMessage?: () => void;
+  showQuoteMessage?: boolean;
+  onCopyMessage?: () => void;
+  onCopyMessageLink?: () => void;
   onRetryMessage?: () => void;
   onRevokeMessage?: () => void;
-  onViewOriginalMessage?: () => void;
+  onQuoteMessage?: () => void;
 }
 
 export const MessageToolboxMenu = memo(
@@ -30,6 +32,7 @@ export const MessageToolboxMenu = memo(
     showRetryMessage,
     showRevokeMessage,
     showViewOriginalMessage,
+    showQuoteMessage,
     onCopyMessage,
     onCopyMessageLink,
     onPinMessage,
@@ -37,9 +40,18 @@ export const MessageToolboxMenu = memo(
     onRetryMessage,
     onRevokeMessage,
     onViewOriginalMessage,
+    onQuoteMessage,
   }: MessageToolboxMenuProps) => {
     return (
       <KContainer.View style={styles.card}>
+        <MessageToolboxItem
+          icon="arrow-reply-o"
+          color={KColors.gray.dark}
+          label={trans('chat:reply_message')}
+          visible={showQuoteMessage}
+          onPress={onQuoteMessage}
+        />
+
         <MessageToolboxItem
           icon="copy-o"
           color={KColors.gray.dark}

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

@@ -15,17 +15,18 @@ import {
   getCopyableMessageText,
   getMessageToolboxItems,
 } from './messageToolbox.utils';
-import type { DMessageItem } from '../../../types/chat';
 import type { MeasuredRect, MessageToolboxRef } from './types';
 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';
 
 interface MessageToolboxOverlayProps {
   currentUserId?: string;
-  customMessageItemFactory?: (item: DMessageItem) => ReactNode;
-  onPinMessage?: (message: DMessageItem) => void;
-  onUnpinMessage?: (message: DMessageItem) => void;
+  customMessageItemFactory?: (item: MessageItem) => ReactNode;
+  onPinMessage?: (message: MessageItem) => void;
+  onUnpinMessage?: (message: MessageItem) => void;
 }
 
 export const MessageToolboxOverlay = forwardRef<
@@ -41,8 +42,9 @@ export const MessageToolboxOverlay = forwardRef<
     },
     ref
   ) => {
+    const { setQuotedMessage } = useChatDetailContext();
     const [visible, setVisible] = useState(false);
-    const [message, setMessage] = useState<DMessageItem | undefined>(undefined);
+    const [message, setMessage] = useState<MessageItem | undefined>(undefined);
     const [rect, setRect] = useState<MeasuredRect | null>(null);
     const toolboxItems = useMemo(
       () => getMessageToolboxItems(message, currentUserId),
@@ -57,7 +59,7 @@ export const MessageToolboxOverlay = forwardRef<
     }, []);
 
     const show = useCallback(
-      (msg: DMessageItem, msgRect: MeasuredRect) => {
+      (msg: MessageItem, msgRect: MeasuredRect) => {
         const toolboxNotAvailable =
           Object.values(getMessageToolboxItems(msg, currentUserId)).filter(
             Boolean
@@ -135,6 +137,12 @@ export const MessageToolboxOverlay = forwardRef<
       onUnpinMessage?.(message);
     }, [message, hide, onUnpinMessage]);
 
+    const handleQuoteMessage = useCallback(() => {
+      if (!message) return;
+      setQuotedMessage(message);
+      hide();
+    }, [message, hide, setQuotedMessage]);
+
     if (!visible || !message || !rect) {
       return null;
     }
@@ -171,6 +179,7 @@ export const MessageToolboxOverlay = forwardRef<
               onUnpinMessage={handleUnpinMessage}
               onRetryMessage={handleRetryMessage}
               onRevokeMessage={handleRevokeMessage}
+              onQuoteMessage={handleQuoteMessage}
             />
           }
         />

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

@@ -1,5 +1,8 @@
-import { MessageStatus, MessageType } from '@droppii/openim-rn-client-sdk';
-import type { DMessageItem } from '../../../types/chat';
+import {
+  MessageStatus,
+  MessageType,
+  type MessageItem,
+} from '@droppii/openim-rn-client-sdk';
 import { getMessageText } from '../../../utils/legendListMessage';
 import { isMessageRevoked } from '../../../utils/messageUtils';
 
@@ -22,46 +25,50 @@ const PIN_SUPPORTED_TYPES: number[] = [
   MessageType.FileMessage,
 ];
 
-const isMessageSucceeded = (message: DMessageItem): boolean =>
+const isMessageSucceeded = (message: MessageItem): boolean =>
   message.status !== MessageStatus.Failed &&
   message.status !== MessageStatus.Sending;
 
 // Failed or revoked messages never offer either copy action.
-const isEligibleForToolbox = (message: DMessageItem): boolean =>
+const isEligibleForToolbox = (message: MessageItem): boolean =>
   isMessageSucceeded(message) && !isMessageRevoked(message);
 
-const isCopyMessageSupported = (message: DMessageItem): boolean =>
+const isCopyMessageSupported = (message: MessageItem): boolean =>
   isEligibleForToolbox(message) &&
   COPYABLE_TEXT_TYPES.includes(message.contentType);
 
 // All message types are supported, as long as the message is eligible.
-// const isCopyMessageLinkSupported = (message: DMessageItem): boolean =>
+// const isCopyMessageLinkSupported = (message: MessageItem): boolean =>
 //   isEligibleForToolbox(message);
 
-const isRetrySupported = (message: DMessageItem): boolean =>
+const isRetrySupported = (message: MessageItem): boolean =>
   message.status === MessageStatus.Failed;
 
 // Merged/album messages (grouped photos) count as "image" for pinning
 // purposes, mirroring the preview logic in utils/messageUtils.ts.
-const isMergedImageMessage = (message: DMessageItem): boolean =>
+const isMergedImageMessage = (message: MessageItem): boolean =>
   message.contentType === MessageType.MergeMessage &&
   !!message.mergeElem?.multiMessage?.some(
     (msg) => msg.contentType === MessageType.PictureMessage
   );
 
 // BR-002: Pin message supports only successfully sent messages.
-const isPinMessageSupported = (message: DMessageItem): boolean =>
+const isPinMessageSupported = (message: MessageItem): boolean =>
   isEligibleForToolbox(message) &&
   (PIN_SUPPORTED_TYPES.includes(message.contentType) ||
     isMergedImageMessage(message));
 
+const isQuoteMessageSupported = (message: MessageItem): boolean =>
+  isMessageSucceeded(message) &&
+  message?.contentType !== MessageType.RevokeMessage;
+
 // 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,
+  message: MessageItem,
   currentUserId?: string
 ): boolean =>
   isEligibleForToolbox(message) &&
@@ -69,7 +76,7 @@ const isRevokeMessageSupported = (
   message.sendID === currentUserId &&
   Date.now() - (message.sendTime || message.createTime || 0) < REVOKE_WINDOW_MS;
 
-export const getCopyableMessageText = (message: DMessageItem): string => {
+export const getCopyableMessageText = (message: MessageItem): string => {
   if (message.contentType === MessageType.UrlTextMessage) {
     return message.urlTextElem?.content ?? '';
   }
@@ -77,7 +84,7 @@ export const getCopyableMessageText = (message: DMessageItem): string => {
 };
 
 export const getMessageToolboxItems = (
-  message?: DMessageItem,
+  message?: MessageItem,
   currentUserId?: string
 ) => {
   if (message == null) {
@@ -88,6 +95,7 @@ export const getMessageToolboxItems = (
   // const showCopyMessageLink = isCopyMessageLinkSupported(message);
   const showRetryMessage = isRetrySupported(message);
   const showRevokeMessage = isRevokeMessageSupported(message, currentUserId);
+  const showQuoteMessage = isQuoteMessageSupported(message);
 
   const isPinSupported = isPinMessageSupported(message);
   const showPinMessage = isPinSupported && !message.isPinned;
@@ -100,5 +108,6 @@ export const getMessageToolboxItems = (
     showRevokeMessage,
     showPinMessage,
     showUnpinMessage,
+    showQuoteMessage,
   };
 };

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

@@ -1,4 +1,4 @@
-import type { DMessageItem } from '../../../types/chat';
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
 
 export interface MeasuredRect {
   x: number;
@@ -8,6 +8,6 @@ export interface MeasuredRect {
 }
 
 export interface MessageToolboxRef {
-  show: (message: DMessageItem, rect: MeasuredRect) => void;
+  show: (message: MessageItem, rect: MeasuredRect) => void;
   hide: () => void;
 }