@droppii-org/chat-mobile 0.2.32 → 0.2.33

package/src/hooks/message/usePinMessage.ts

@@ -0,0 +1,153 @@
+import { useCallback, useEffect } from 'react';
+import OpenIMSDK from '@droppii/openim-rn-client-sdk';
+import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import { useConversationStore } from '../../store/conversation';
+import { useMessageStore } from '../../store/message';
+import { usePinnedMessageStore } from '../../store/pinnedMessage';
+import { useUserStore } from '../../store/user';
+import { UIUtils } from '../../utils/UIUtils';
+import { trans } from '../../translation';
+
+const MAX_PINNED_MESSAGES = 5;
+
+export const fetchPinnedMessages = async (conversationID: string) => {
+  const result = await OpenIMSDK.getPinnedMessageList({
+    conversationID,
+    offset: 0,
+    pageSize: MAX_PINNED_MESSAGES,
+  });
+
+  const previouslyPinnedIds = new Set(
+    usePinnedMessageStore.getState().messages.map((msg) => msg.clientMsgID)
+  );
+  const pinnedIds = new Set(result.messageList.map((msg) => msg.clientMsgID));
+
+  usePinnedMessageStore
+    .getState()
+    .setMessages(result.messageList, result.totalCount);
+
+  // Reconcile the per-message `isPinned` flag (used by the toolbox and the
+  // pinned badge) with the authoritative list from the server — messages
+  // pinned outside this session (before remount, or from another device)
+  // never get this flag set otherwise.
+  const { updateOneMessage } = useMessageStore.getState();
+  pinnedIds.forEach((clientMsgID) => {
+    updateOneMessage({ clientMsgID, isPinned: true });
+  });
+  previouslyPinnedIds.forEach((clientMsgID) => {
+    if (!pinnedIds.has(clientMsgID)) {
+      updateOneMessage({ clientMsgID, isPinned: false });
+    }
+  });
+};
+
+const showPinLimitReachedModal = () => {
+  UIUtils.alert.open({
+    title: trans('chat:pin_limit_title'),
+    message: trans('chat:pin_limit_desc'),
+    primaryIndex: 0,
+    buttons: [
+      {
+        label: trans('chat:pin_limit_primary'),
+        kind: 'primary',
+        onPress: () => {},
+      },
+    ],
+  });
+};
+
+export const usePinMessage = (conversationID?: string) => {
+  const pinnedMessages = usePinnedMessageStore((state) => state.messages);
+  const addMessage = usePinnedMessageStore((state) => state.addMessage);
+  const removeMessage = usePinnedMessageStore((state) => state.removeMessage);
+  const reset = usePinnedMessageStore((state) => state.reset);
+
+  useEffect(() => {
+    if (!conversationID) return;
+
+    fetchPinnedMessages(conversationID).catch((error) => {
+      console.error('fetchPinnedMessages', error);
+    });
+
+    return () => {
+      reset();
+    };
+  }, [conversationID, reset]);
+
+  const pinMessage = useCallback(
+    async (message: MessageItem) => {
+      if (!conversationID) return;
+
+      if (pinnedMessages.length >= MAX_PINNED_MESSAGES) {
+        showPinLimitReachedModal();
+        return;
+      }
+
+      try {
+        await OpenIMSDK.pinMsg(conversationID, message.clientMsgID);
+        addMessage(message);
+        useMessageStore.getState().updateOneMessage({
+          clientMsgID: message.clientMsgID,
+          isPinned: true,
+          pinnedByUserID: useUserStore.getState().user?.userID,
+          pinnedTime: Date.now(),
+        });
+        UIUtils.toast.open({
+          title: trans('chat:pin_message_success'),
+          theme: 'success',
+        });
+      } catch (error) {
+        console.error('pinMessage', error);
+        UIUtils.toast.open({
+          title: trans('chat:generic_error'),
+          theme: 'error',
+        });
+      }
+    },
+    [conversationID, pinnedMessages.length, addMessage]
+  );
+
+  const unpinMessage = useCallback(
+    async (message: MessageItem) => {
+      if (!conversationID) return;
+
+      try {
+        await OpenIMSDK.unpinMsg(conversationID, message.clientMsgID);
+        removeMessage(message.clientMsgID);
+        useMessageStore.getState().updateOneMessage({
+          clientMsgID: message.clientMsgID,
+          isPinned: false,
+          pinnedByUserID: undefined,
+          pinnedTime: undefined,
+        });
+        UIUtils.toast.open({
+          title: trans('chat:unpin_message_success'),
+          theme: 'success',
+        });
+      } catch (error) {
+        console.error('unpinMessage', error);
+        UIUtils.toast.open({
+          title: trans('chat:generic_error'),
+          theme: 'error',
+        });
+      }
+    },
+    [conversationID, removeMessage]
+  );
+
+  return {
+    pinnedMessages,
+    pinMessage,
+    unpinMessage,
+  };
+};
+
+export const syncPinnedMessagesOnEvent = (conversationID: string) => {
+  const currentConversationId =
+    useConversationStore.getState().currentConversationId;
+  if (conversationID !== currentConversationId) return;
+
+  fetchPinnedMessages(conversationID).catch((error) => {
+    console.error('syncPinnedMessagesOnEvent', error);
+  });
+};

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

@@ -6,6 +6,8 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { KContainer } from '@droppii/libs';
 import { useNavigation } from '@react-navigation/native';
 import { useChatMessages } from '../../hooks/useChatMessages';
+import { usePinMessage } from '../../hooks/message/usePinMessage';
+import { PinnedMessageBar } from './PinnedMessageBar';
 import {
   MediaViewerModal,
   type MediaViewerModalHandle,
@@ -76,6 +78,9 @@ const ChatDetail = memo(
       hasMoreEarlier,
     } = useChatMessages({ conversationId, enabled });
 
+    const { pinnedMessages, pinMessage, unpinMessage } =
+      usePinMessage(conversationId);
+
     useEffect(() => {
       if (conversationId) {
         useConversationStore.getState().setCurrentConversation(conversationId);
@@ -121,6 +126,11 @@ const ChatDetail = memo(
           onPressAvatar={onPressAvatar}
         />
 
+        <PinnedMessageBar
+          messages={pinnedMessages}
+          currentUserId={currentUserId}
+        />
+
         <KeyboardAvoidingView
           style={styles.keyboardAvoiding}
           behavior="padding"
@@ -150,6 +160,8 @@ const ChatDetail = memo(
           ref={messageToolboxRef}
           currentUserId={currentUserId}
           customMessageItemFactory={customMessageItemFactory}
+          onPinMessage={pinMessage}
+          onUnpinMessage={unpinMessage}
         />
       </KContainer.Page>
     );

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

@@ -0,0 +1,177 @@
+import { memo, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+  KSpacingValue,
+  KBadge,
+} from '@droppii/libs';
+import { trans } from '../../translation';
+import {
+  getMessagePreview,
+  getPinnedMessagePreview,
+} from '../../utils/messageUtils';
+import type { DMessageItem } from '../../types/chat';
+
+interface PinnedMessageBarProps {
+  messages: DMessageItem[];
+  currentUserId?: string;
+}
+
+const PinnedMessageThumbnail = memo(
+  ({ message }: { message: DMessageItem }) => {
+    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 === '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';
+
+export const PinnedMessageBar = memo(
+  ({ messages, currentUserId }: PinnedMessageBarProps) => {
+    if (messages.length === 0) {
+      return null;
+    }
+
+    const latest = messages[0]!;
+    const sender =
+      latest.sendID === currentUserId ? 'Bạn' : latest.senderNickname || '';
+    const remainingCount = messages.length - 1;
+    const { subtitleKey } = getPinnedMessagePreview(latest);
+
+    return (
+      <KContainer.View style={styles.container}>
+        <PinnedMessageThumbnail message={latest} />
+
+        <KContainer.View row alignItems flex paddingR="0.75rem">
+          <KContainer.View style={styles.content}>
+            <KLabel.Text typo="TextNmMedium" numberOfLines={1}>
+              {getMessagePreview(latest)}
+            </KLabel.Text>
+
+            <KContainer.View row alignItems paddingR="0.75rem">
+              <KImage.VectorIcons
+                name="thumbtack-b"
+                size={12}
+                color={KColors.primary.normal}
+              />
+              <KLabel.Text
+                typo="TextSmNormal"
+                color={KColors.gray.light}
+                numberOfLines={1}
+                marginL={'0.25rem'}
+              >
+                {trans(subtitleKey, { sender })}
+              </KLabel.Text>
+            </KContainer.View>
+          </KContainer.View>
+
+          {remainingCount > 0 && (
+            <KBadge.BaseV2
+              badge={`+${remainingCount}`}
+              skipConvertBadge
+              badgeSize={{ width: 26, height: 20 }}
+              wrapperLabelTextStyle={{ paddingHorizontal: 3 }}
+            />
+          )}
+          <KImage.VectorIcons
+            name="angle-down-o"
+            size={20}
+            color={KColors.gray.normal}
+          />
+        </KContainer.View>
+      </KContainer.View>
+    );
+  }
+);
+
+PinnedMessageBar.displayName = 'PinnedMessageBar';
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: KColors.palette.gray.w25,
+  },
+  content: {
+    flex: 1,
+    paddingRight: KSpacingValue['0.75rem'],
+    paddingLeft: KSpacingValue['0.75rem'],
+    paddingVertical: KSpacingValue['0.25rem'],
+  },
+  thumbnail: {
+    width: 51,
+    height: 51,
+    overflow: 'hidden',
+    backgroundColor: '#000',
+  },
+  videoOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.25)',
+  },
+  fileIcon: {
+    width: 24,
+    height: 24,
+  },
+  badge: {
+    minWidth: 32,
+    height: 22,
+    paddingHorizontal: KSpacingValue['0.25rem'],
+    borderRadius: KSpacingValue['1rem'],
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: KColors.primary.normal,
+    marginRight: KSpacingValue['0.75rem'],
+  },
+});

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

@@ -1,4 +1,5 @@
-import { KContainer } from '@droppii/libs';
+import { KContainer, KImage, KColors } from '@droppii/libs';
+import { StyleSheet } from 'react-native';
 import { memo, useMemo } from 'react';
 import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
 import { MessageType } from '@droppii/openim-rn-client-sdk';
@@ -89,15 +90,27 @@ export const LegendChatMessage = memo(
           isOutgoing={isOutgoing}
           onRetry={onRetry}
         />
-        <LongPressWrapper onLongPress={onLongPress}>
-          <MessageComponent
-            message={message}
-            isOutgoing={isOutgoing}
-            createdAtTime={createdAtTime}
-            onMediaPress={hasMediaPress ? onMediaPress : undefined}
-            onPressUrl={hasUrlPress ? onPressUrl : undefined}
-          />
-        </LongPressWrapper>
+        <KContainer.View style={styles.content}>
+          <LongPressWrapper onLongPress={onLongPress}>
+            <MessageComponent
+              message={message}
+              isOutgoing={isOutgoing}
+              createdAtTime={createdAtTime}
+              onMediaPress={hasMediaPress ? onMediaPress : undefined}
+              onPressUrl={hasUrlPress ? onPressUrl : undefined}
+            />
+          </LongPressWrapper>
+
+          {message?.isPinned && (
+            <KContainer.View style={styles.pinBadge}>
+              <KImage.VectorIcons
+                name="thumbtack-b"
+                size={12}
+                color={KColors.primary.normal}
+              />
+            </KContainer.View>
+          )}
+        </KContainer.View>
       </KContainer.View>
     );
   }
@@ -105,6 +118,30 @@ export const LegendChatMessage = memo(
 
 LegendChatMessage.displayName = 'LegendChatMessage';
 
+const styles = StyleSheet.create({
+  content: {
+    position: 'relative',
+  },
+  pinBadge: {
+    position: 'absolute',
+    top: -8,
+    right: -8,
+    width: 24,
+    height: 20,
+    borderRadius: 100,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: KColors.pageBackground,
+    shadowColor: KColors.black,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.15,
+    shadowRadius: 2,
+    elevation: 3,
+    borderWidth: 1,
+    borderColor: KColors.white,
+  },
+});
+
 const LongPressWrapper = ({
   children,
   onLongPress,

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

@@ -7,10 +7,14 @@ import { MessageToolboxItem } from './MessageToolboxItem';
 interface MessageToolboxMenuProps {
   showCopyMessage?: boolean;
   showCopyMessageLink?: boolean;
+  showPinMessage?: boolean;
+  showUnpinMessage?: boolean;
   showRetryMessage?: boolean;
   showRevokeMessage?: boolean;
   onCopyMessage: () => void;
   onCopyMessageLink: () => void;
+  onPinMessage: () => void;
+  onUnpinMessage: () => void;
   onRetryMessage: () => void;
   onRevokeMessage: () => void;
 }
@@ -19,10 +23,14 @@ export const MessageToolboxMenu = memo(
   ({
     showCopyMessage,
     showCopyMessageLink,
+    showPinMessage,
+    showUnpinMessage,
     showRetryMessage,
     showRevokeMessage,
     onCopyMessage,
     onCopyMessageLink,
+    onPinMessage,
+    onUnpinMessage,
     onRetryMessage,
     onRevokeMessage,
   }: MessageToolboxMenuProps) => {
@@ -44,6 +52,22 @@ export const MessageToolboxMenu = memo(
           onPress={onCopyMessageLink}
         />
 
+        <MessageToolboxItem
+          icon="thumbtack-o"
+          color={KColors.gray.dark}
+          label={trans('chat:pin_message')}
+          visible={showPinMessage}
+          onPress={onPinMessage}
+        />
+
+        <MessageToolboxItem
+          icon="thumbtack-off-o"
+          color={KColors.gray.dark}
+          label={trans('chat:unpin_message')}
+          visible={showUnpinMessage}
+          onPress={onUnpinMessage}
+        />
+
         <MessageToolboxItem
           icon="arrow-reload-o"
           color={KColors.danger.normal}