@droppii-org/chat-mobile 0.2.31 → 0.2.33

package/src/hooks/useChatMessages.ts

@@ -14,6 +14,7 @@ import { useMessageStore } from '../store/message';
 import { useUserStore } from '../store/user';
 import { useChatContext } from '../context';
 import { allSettled } from '../utils/promise';
+import { useSetIsShowFLashMessage } from '../context/global';
 
 type UseChatMessagesOptions = {
   conversationId: string;
@@ -46,6 +47,8 @@ export function useChatMessages({
   const conversationIdRef = useRef(conversationId);
   conversationIdRef.current = conversationId;
 
+  const setIsShowFlashMessage = useSetIsShowFLashMessage();
+
   const fetchInitial = useCallback(async () => {
     if (!conversationId) return;
 
@@ -217,16 +220,17 @@ export function useChatMessages({
 
   useEffect(() => {
     if (!enabled || !conversationId) return;
-
+    setIsShowFlashMessage(false);
     const handleNewMessages = (incoming: MessageItem[]) =>
       appendIncomingMessages(incoming);
 
     OpenIMSDK.on(OpenIMEvent.OnRecvNewMessages, handleNewMessages);
 
     return () => {
+      setIsShowFlashMessage(true);
       OpenIMSDK.off(OpenIMEvent.OnRecvNewMessages, handleNewMessages);
     };
-  }, [appendIncomingMessages, conversationId, enabled]);
+  }, [appendIncomingMessages, conversationId, enabled, setIsShowFlashMessage]);
 
   return {
     messages,

package/src/hooks/useImageAttachment.ts

@@ -171,6 +171,8 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
           const maxSize = isVideoFromPicker(item)
             ? UPLOAD_LIMITS.video
             : UPLOAD_LIMITS.image;
+          console.log('maxSize', maxSize);
+          console.log('item.size', item.size);
           return (item.size || 0) <= maxSize;
         };
 

package/src/index.tsx

@@ -29,17 +29,16 @@ export { AttachmentPreview } from './components/AttachmentPreview';
 export { MediaViewerModal } from './components/MediaViewerModal';
 export { Inbox } from './screens/inbox';
 export { default as MediaViewerScreen } from './screens/MediaView';
-export {
-  ChatDetail,
-  ChatDetailHeader,
-  ChatComposer,
-  ChatQuickActions,
-  ChatAttachmentPanel,
-  DEFAULT_QUICK_ACTIONS,
-  DEFAULT_PANNEL_ACTIONS,
-  DChatPannelActionItemType,
-  DChatQuickActionItemType,
-} from './screens/chat-detail';
+export * from './screens/chat-detail';
+
+// export type {
+//   PeerType,
+//   MessageItem,
+//   ConversationItem,
+// } from '@droppii/openim-rn-client-sdk';
+export type { ConversationItem } from '@droppii/openim-rn-client-sdk';
+export { LoginStatus, MessageType } from '@droppii/openim-rn-client-sdk';
+export * from './screens/chat-detail';
 export type {
   DChatActionItem,
   DChatActionIconProvider,
@@ -54,13 +53,6 @@ export type {
   ChatPanelProps,
 } from './screens/chat-detail';
 
-export { LoginStatus, MessageType } from '@droppii/openim-rn-client-sdk';
-export type {
-  PeerType,
-  ConversationItem,
-  MessageItem,
-} from '@droppii/openim-rn-client-sdk';
-
 export { registerUIUtils, UIUtils } from './utils/UIUtils';
 
 export { DFlowContext } from './types/flows';

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}