@droppii-org/chat-mobile 0.2.32 → 0.2.33

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

@@ -24,134 +24,160 @@ import { useSendMessage } from '../../../hooks/message/useSendMessage';
 interface MessageToolboxOverlayProps {
   currentUserId?: string;
   customMessageItemFactory?: (item: DMessageItem) => ReactNode;
+  onPinMessage?: (message: DMessageItem) => void;
+  onUnpinMessage?: (message: DMessageItem) => void;
 }
 
 export const MessageToolboxOverlay = forwardRef<
   MessageToolboxRef,
   MessageToolboxOverlayProps
->(({ currentUserId = '', customMessageItemFactory }, ref) => {
-  const [visible, setVisible] = useState(false);
-  const [message, setMessage] = useState<DMessageItem | undefined>(undefined);
-  const [rect, setRect] = useState<MeasuredRect | null>(null);
-  const toolboxItems = useMemo(
-    () => getMessageToolboxItems(message, currentUserId),
-    [message, currentUserId]
-  );
-  const { retryMessage, revokeMessage } = useSendMessage();
-
-  const hide = useCallback(() => {
-    setVisible(false);
-    setMessage(undefined);
-    setRect(null);
-  }, []);
-
-  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 = '',
+      customMessageItemFactory,
+      onPinMessage,
+      onUnpinMessage,
     },
-    [currentUserId]
-  );
-
-  useImperativeHandle(ref, () => ({ show, hide }), [show, hide]);
-
-  const handleCopyMessage = useCallback(() => {
-    if (!message) return;
-    const text = getCopyableMessageText(message);
-    if (text) {
-      Clipboard.setString(text);
-      UIUtils.toast.open({
-        title: trans('chat:copy_message_success'),
-        theme: 'success',
-      });
-    }
-    hide();
-  }, [message, hide]);
-
-  const handleCopyMessageLink = useCallback(() => {
-    if (!message) return;
-    // UI-only for now: real shareable deeplink format (BR-001) is not decided yet.
-    const placeholderLink = `${message.recvID || message.groupID}:${message.clientMsgID ?? message.serverMsgID ?? ''}`;
-    Clipboard.setString(placeholderLink);
-    UIUtils.toast.open({
-      title: trans('chat:copy_message_link_success'),
-      theme: 'success',
-    });
-    hide();
-  }, [message, hide]);
-
-  const handleRetryMessage = useCallback(() => {
-    if (!message) return;
-    retryMessage(message);
-    hide();
-  }, [message, hide, retryMessage]);
-
-  const handleRevokeMessage = useCallback(async () => {
-    if (!message) return;
-    hide();
-    try {
-      await revokeMessage(message);
+    ref
+  ) => {
+    const [visible, setVisible] = useState(false);
+    const [message, setMessage] = useState<DMessageItem | undefined>(undefined);
+    const [rect, setRect] = useState<MeasuredRect | null>(null);
+    const toolboxItems = useMemo(
+      () => getMessageToolboxItems(message, currentUserId),
+      [message, currentUserId]
+    );
+    const { retryMessage, revokeMessage } = useSendMessage();
+
+    const hide = useCallback(() => {
+      setVisible(false);
+      setMessage(undefined);
+      setRect(null);
+    }, []);
+
+    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]);
+
+    const handleCopyMessage = useCallback(() => {
+      if (!message) return;
+      const text = getCopyableMessageText(message);
+      if (text) {
+        Clipboard.setString(text);
+        UIUtils.toast.open({
+          title: trans('chat:copy_message_success'),
+          theme: 'success',
+        });
+      }
+      hide();
+    }, [message, hide]);
+
+    const handleCopyMessageLink = useCallback(() => {
+      if (!message) return;
+      // UI-only for now: real shareable deeplink format (BR-001) is not decided yet.
+      const placeholderLink = `${message.recvID || message.groupID}:${message.clientMsgID ?? message.serverMsgID ?? ''}`;
+      Clipboard.setString(placeholderLink);
       UIUtils.toast.open({
-        title: trans('msg_type_revoke'),
+        title: trans('chat:copy_message_link_success'),
         theme: 'success',
       });
-    } catch (error: any) {
-      console.error('revokeMessage', error);
-      UIUtils.toast.open({
-        title: trans('chat:generic_error'),
-        theme: 'error',
-      });
+      hide();
+    }, [message, hide]);
+
+    const handleRetryMessage = useCallback(() => {
+      if (!message) return;
+      retryMessage(message);
+      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]);
+
+    const handlePinMessage = useCallback(() => {
+      if (!message) return;
+      hide();
+      onPinMessage?.(message);
+    }, [message, hide, onPinMessage]);
+
+    const handleUnpinMessage = useCallback(() => {
+      if (!message) return;
+      hide();
+      onUnpinMessage?.(message);
+    }, [message, hide, onUnpinMessage]);
+
+    if (!visible || !message || !rect) {
+      return null;
     }
-  }, [message, hide, revokeMessage]);
 
-  if (!visible || !message || !rect) {
-    return null;
+    const isOutgoing = message.sendID === currentUserId;
+
+    return (
+      <Modal
+        visible={visible}
+        transparent
+        statusBarTranslucent
+        animationType="fade"
+        onRequestClose={hide}
+      >
+        <Pressable style={styles.backdrop} onPress={hide} />
+
+        <MessageToolboxWrapper
+          rect={rect}
+          isOutgoing={isOutgoing}
+          message={
+            <LegendChatMessage
+              message={message}
+              isOutgoing={isOutgoing}
+              createdAtTime={message.sendTime || message.createTime}
+              customMessageItemFactory={customMessageItemFactory}
+            />
+          }
+          toolbox={
+            <MessageToolboxMenu
+              {...toolboxItems}
+              onCopyMessage={handleCopyMessage}
+              onCopyMessageLink={handleCopyMessageLink}
+              onPinMessage={handlePinMessage}
+              onUnpinMessage={handleUnpinMessage}
+              onRetryMessage={handleRetryMessage}
+              onRevokeMessage={handleRevokeMessage}
+            />
+          }
+        />
+      </Modal>
+    );
   }
-
-  const isOutgoing = message.sendID === currentUserId;
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      statusBarTranslucent
-      animationType="fade"
-      onRequestClose={hide}
-    >
-      <Pressable style={styles.backdrop} onPress={hide} />
-
-      <MessageToolboxWrapper
-        rect={rect}
-        isOutgoing={isOutgoing}
-        message={
-          <LegendChatMessage
-            message={message}
-            isOutgoing={isOutgoing}
-            createdAtTime={message.sendTime || message.createTime}
-            customMessageItemFactory={customMessageItemFactory}
-          />
-        }
-        toolbox={
-          <MessageToolboxMenu
-            {...toolboxItems}
-            onCopyMessage={handleCopyMessage}
-            onCopyMessageLink={handleCopyMessageLink}
-            onRetryMessage={handleRetryMessage}
-            onRevokeMessage={handleRevokeMessage}
-          />
-        }
-      />
-    </Modal>
-  );
-});
+);
 
 MessageToolboxOverlay.displayName = 'MessageToolboxOverlay';
 

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

@@ -11,6 +11,17 @@ const COPYABLE_TEXT_TYPES: number[] = [
   MessageType.UrlTextMessage,
 ];
 
+// BR-001: Pin message supports text, link, image, video, file.
+const PIN_SUPPORTED_TYPES: number[] = [
+  MessageType.TextMessage,
+  MessageType.AtTextMessage,
+  MessageType.QuoteMessage,
+  MessageType.UrlTextMessage,
+  MessageType.PictureMessage,
+  MessageType.VideoMessage,
+  MessageType.FileMessage,
+];
+
 const isMessageSucceeded = (message: DMessageItem): boolean =>
   message.status !== MessageStatus.Failed &&
   message.status !== MessageStatus.Sending;
@@ -30,6 +41,20 @@ const isCopyMessageSupported = (message: DMessageItem): boolean =>
 const isRetrySupported = (message: DMessageItem): 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 =>
+  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 =>
+  isEligibleForToolbox(message) &&
+  (PIN_SUPPORTED_TYPES.includes(message.contentType) ||
+    isMergedImageMessage(message));
+
 // Revoke is only available within 24h of a successful send.
 const REVOKE_WINDOW_MS = 24 * 60 * 60 * 1000;
 
@@ -64,10 +89,16 @@ export const getMessageToolboxItems = (
   const showRetryMessage = isRetrySupported(message);
   const showRevokeMessage = isRevokeMessageSupported(message, currentUserId);
 
+  const isPinSupported = isPinMessageSupported(message);
+  const showPinMessage = isPinSupported && !message.isPinned;
+  const showUnpinMessage = isPinSupported && !!message.isPinned;
+
   return {
     showCopyMessage,
     // showCopyMessageLink,
     showRetryMessage,
     showRevokeMessage,
+    showPinMessage,
+    showUnpinMessage,
   };
 };

package/src/store/pinnedMessage.ts

@@ -0,0 +1,38 @@
+import { create } from 'zustand';
+import type { DMessageItem } from '../types/chat';
+
+export interface PinnedMessageStore {
+  messages: DMessageItem[];
+  totalCount: number;
+  setMessages: (messages: DMessageItem[], totalCount: number) => void;
+  addMessage: (message: DMessageItem) => void;
+  removeMessage: (clientMsgID: string) => void;
+  reset: () => void;
+}
+
+export const usePinnedMessageStore = create<PinnedMessageStore>()(
+  (set, get) => ({
+    messages: [],
+    totalCount: 0,
+
+    setMessages: (messages, totalCount) => {
+      set({ messages, totalCount });
+    },
+
+    addMessage: (message) => {
+      const messages = [message, ...get().messages];
+      set({ messages, totalCount: messages.length });
+    },
+
+    removeMessage: (clientMsgID) => {
+      const messages = get().messages.filter(
+        (msg) => msg.clientMsgID !== clientMsgID
+      );
+      set({ messages, totalCount: messages.length });
+    },
+
+    reset: () => {
+      set({ messages: [], totalCount: 0 });
+    },
+  })
+);

package/src/translation/resources/i18n.ts

@@ -34,6 +34,19 @@ const i18nKey: Record<string, string> = {
   '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',
+  'chat:pin_message': 'Ghim',
+  'chat:unpin_message': 'Bỏ ghim',
+  'chat:pin_message_success': 'Đã ghim tin nhắn',
+  'chat:unpin_message_success': 'Đã bỏ ghim tin nhắn',
+  'chat:pinned_message_subtitle': 'Tin nhắn từ {{sender}}',
+  'chat:pinned_image_subtitle': 'Hình ảnh từ {{sender}}',
+  'chat:pinned_video_subtitle': 'Video từ {{sender}}',
+  'chat:pinned_file_subtitle': 'Tài liệu từ {{sender}}',
+  'chat:pinned_link_subtitle': 'Liên kết từ {{sender}}',
+  'chat:pin_limit_title': 'Không thể ghim thêm tin nhắn',
+  'chat:pin_limit_desc':
+    'Chỉ được ghim tối đa 5 tin nhắn. Vui lòng bỏ ghim một tin nhắn hiện có trước khi ghim tin nhắn mới.',
+  'chat:pin_limit_primary': 'Đã hiểu',
   'msg_type_image': '[Hình ảnh]',
   'msg_type_voice': '[Tin nhắn thoại]',
   'msg_type_video': '[Video]',

package/src/types/chat.ts

@@ -94,6 +94,9 @@ export interface DMessageItem extends MessageItem {
   atUserIDList?: unknown;
   attachedInfo?: 'null';
   options?: DMessageOption;
+  isPinned?: boolean;
+  pinnedByUserID?: string;
+  pinnedTime?: number;
 }
 
 export interface DMessageOption {
@@ -141,7 +144,7 @@ export interface MessageStore {
   setMessages: (messages: DMessageItem[], hasMore: boolean) => void;
   pushNewMessage: (message: MessageItem) => void;
   updateOneMessage: (
-    message: Partial<MessageItem> & Pick<MessageItem, 'clientMsgID'>
+    message: Partial<DMessageItem> & Pick<MessageItem, 'clientMsgID'>
   ) => void;
   deleteOneMessage: (clientMsgID: string) => void;
   reset: () => void;

package/src/utils/messageUtils.ts

@@ -8,7 +8,9 @@ import {
   type ConversationItem,
 } from '@droppii/openim-rn-client-sdk';
 import { type DMessageItem } from '../types/chat';
+import type { IUrlMetadata } from '../types/common';
 import { formatDuration } from './dateTimeUtils';
+import { getFileIcon, getMimeType } from './imageUtils';
 import { trans } from '../translation';
 
 export const isMessageRevoked = (message: DMessageItem): boolean =>
@@ -92,6 +94,94 @@ export const getMessagePreview = (message: DMessageItem): string => {
   }
 };
 
+export type PinnedMessageMediaType = 'image' | 'video' | 'file' | 'text';
+
+export interface PinnedMessagePreview {
+  mediaType: PinnedMessageMediaType;
+  subtitleKey: string;
+  thumbnailUrl?: string;
+  fileIcon?: number;
+}
+
+const getImageUrl = (pictureElem: any): string | undefined =>
+  pictureElem?.snapshotPicture?.url ||
+  pictureElem?.bigPicture?.url ||
+  pictureElem?.sourcePicture?.url;
+
+// Link messages carry their rich-preview metadata (title/description/image)
+// as a JSON string in `ex`, set by useSendMessage's IMessageItemEx payload.
+const getUrlMetadata = (message: DMessageItem): IUrlMetadata | undefined => {
+  if (!message.ex) return undefined;
+  try {
+    const parsed = JSON.parse(message.ex) as { urlMetadata?: IUrlMetadata };
+    return parsed.urlMetadata;
+  } catch {
+    return undefined;
+  }
+};
+
+export const getPinnedMessagePreview = (
+  message: DMessageItem
+): PinnedMessagePreview => {
+  switch (message.contentType) {
+    case MessageType.PictureMessage: {
+      const thumbnailUrl = getImageUrl((message as any).pictureElem);
+      return {
+        mediaType: 'image',
+        subtitleKey: 'chat:pinned_image_subtitle',
+        thumbnailUrl,
+      };
+    }
+
+    case MessageType.VideoMessage:
+      return {
+        mediaType: 'video',
+        subtitleKey: 'chat:pinned_video_subtitle',
+        thumbnailUrl: message.videoElem?.snapshotUrl,
+      };
+
+    case MessageType.FileMessage: {
+      const fileName = message.fileElem?.fileName || '';
+      return {
+        mediaType: 'file',
+        subtitleKey: 'chat:pinned_file_subtitle',
+        fileIcon: getFileIcon(getMimeType(fileName)),
+      };
+    }
+
+    case MessageType.UrlTextMessage: {
+      const thumbnailUrl = getUrlMetadata(message)?.image;
+      return {
+        mediaType: thumbnailUrl ? 'image' : 'text',
+        subtitleKey: 'chat:pinned_link_subtitle',
+        thumbnailUrl,
+      };
+    }
+
+    case MessageType.MergeMessage: {
+      try {
+        const firstImage = message.mergeElem?.multiMessage?.find(
+          (msg: any) => msg.contentType === MessageType.PictureMessage
+        );
+        const thumbnailUrl = getImageUrl(firstImage?.pictureElem);
+        if (thumbnailUrl) {
+          return {
+            mediaType: 'image',
+            subtitleKey: 'chat:pinned_image_subtitle',
+            thumbnailUrl,
+          };
+        }
+      } catch {
+        // Fall through to default
+      }
+      return { mediaType: 'text', subtitleKey: 'chat:pinned_message_subtitle' };
+    }
+
+    default:
+      return { mediaType: 'text', subtitleKey: 'chat:pinned_message_subtitle' };
+  }
+};
+
 export const getLastMessageText = (
   message: DMessageItem | undefined,
   currentUserId?: string,