@droppii-org/chat-mobile 0.2.6 → 0.2.8

package/src/components/MediaViewerModal.tsx

@@ -0,0 +1,70 @@
+import { forwardRef, useImperativeHandle } from 'react';
+import { Modal, StyleSheet } from 'react-native';
+import MediaViewerScreen from '../screens/MediaView';
+import { useMediaViewer, type MediaItem } from '../hooks/useMediaViewer';
+
+export interface MediaViewerModalHandle {
+  show: (items: MediaItem[], index?: number) => void;
+}
+
+interface MediaViewerModalProps {
+  onDismiss?: () => void;
+}
+
+export const MediaViewerModal = forwardRef<
+  MediaViewerModalHandle,
+  MediaViewerModalProps
+>(({ onDismiss }, ref) => {
+  const { visible, mediaList, initIndex, show, hide } = useMediaViewer();
+
+  // Expose show method to parent via ref
+  useImperativeHandle(
+    ref,
+    () => ({
+      show,
+    }),
+    [show]
+  );
+
+  const handleDismiss = () => {
+    hide();
+    onDismiss?.();
+  };
+
+  if (!visible || mediaList.length === 0) {
+    return null;
+  }
+
+  const images = mediaList.map((item) => ({
+    url: item.url,
+    isVideo: item.isVideo || false,
+  }));
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={false}
+      statusBarTranslucent={true}
+      style={styles.modal}
+      presentationStyle="overFullScreen"
+      animationType="fade"
+      onRequestClose={handleDismiss}
+    >
+      <MediaViewerScreen
+        images={images}
+        initIndex={initIndex}
+        pagination={images.length > 1}
+        onDismiss={handleDismiss}
+        download
+      />
+    </Modal>
+  );
+});
+
+MediaViewerModal.displayName = 'MediaViewerModal';
+
+const styles = StyleSheet.create({
+  modal: {
+    flex: 1,
+  },
+});

package/src/components/MergedImageGrid.tsx

@@ -0,0 +1,238 @@
+import { memo, useMemo, useState, useCallback } from 'react';
+import { StyleSheet, useWindowDimensions } from 'react-native';
+import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import ChatImageDimens from '../utils/chatImageDimens';
+import type { MediaItem } from '../hooks/useMediaViewer';
+
+interface MergedImageGridProps {
+  images: Array<{
+    pictureElem?: any;
+  }>;
+  maxDisplay?: number;
+  onMediaPress?: (items: MediaItem[], index?: number) => void;
+}
+
+/**
+ * Generic image grid for merged messages
+ * Layout: 1 image (1x1), 2 images (1x2), 3 images (1x3), 4+ images (2x2)
+ * Shows "+N more" overlay on last cell if images exceed limit
+ */
+export const MergedImageGrid = memo(
+  ({ images, maxDisplay = 4, onMediaPress }: MergedImageGridProps) => {
+    const windowWidth = useWindowDimensions().width;
+    const [loadingState, setLoadingState] = useState<Record<number, boolean>>(
+      {}
+    );
+
+    const displayedImages = useMemo(
+      () => images.slice(0, maxDisplay),
+      [images, maxDisplay]
+    );
+    const hiddenCount = Math.max(0, images.length - maxDisplay);
+
+    // Calculate single image dimensions respecting aspect ratio and 80% width limit
+    const singleImageSize = useMemo(() => {
+      if (displayedImages.length !== 1) return null;
+
+      const image = displayedImages[0];
+      const pictureElem = image?.pictureElem;
+      const imgWidth =
+        pictureElem?.width || pictureElem?.bigPicture?.width || 0;
+      const imgHeight =
+        pictureElem?.height || pictureElem?.bigPicture?.height || 0;
+
+      const maxWidth = Math.floor(windowWidth * 0.8);
+      const aspectRatio = imgWidth && imgHeight ? imgWidth / imgHeight : 1;
+
+      // Calculate dimensions respecting aspect ratio and max width
+      let finalWidth = maxWidth;
+      let finalHeight = maxWidth / aspectRatio;
+
+      // If height exceeds reasonable limit, scale down
+      const maxHeight = 400;
+      if (finalHeight > maxHeight) {
+        finalHeight = maxHeight;
+        finalWidth = finalHeight * aspectRatio;
+      }
+
+      return {
+        width: Math.round(finalWidth),
+        height: Math.round(finalHeight),
+      };
+    }, [displayedImages, windowWidth]);
+
+    const mediaItems = useMemo(
+      () =>
+        images
+          .map((image) => {
+            const pictureElem = image.pictureElem;
+            const imageUrl =
+              pictureElem?.snapshotPicture?.url ||
+              pictureElem?.bigPicture?.url ||
+              pictureElem?.sourcePicture?.url;
+            return { url: imageUrl };
+          })
+          .filter((item): item is MediaItem => Boolean(item.url)),
+      [images]
+    );
+
+    const handleImageLoadEnd = useCallback((index: number) => {
+      setLoadingState((prev) => ({
+        ...prev,
+        [index]: false,
+      }));
+    }, []);
+
+    const handleImagePress = useCallback(
+      (index: number) => {
+        onMediaPress?.(mediaItems, index);
+      },
+      [onMediaPress, mediaItems]
+    );
+
+    const initializeLoading = useMemo(() => {
+      const initial: Record<number, boolean> = {};
+      displayedImages.forEach((_, index) => {
+        initial[index] = true;
+      });
+      return initial;
+    }, [displayedImages]);
+
+    useMemo(() => {
+      setLoadingState(initializeLoading);
+    }, [initializeLoading]);
+
+    if (displayedImages.length === 0) {
+      return null;
+    }
+
+    // Calculate columns based on image count
+    let columns = 1;
+    if (displayedImages.length === 2) {
+      columns = 2; // 2 images: horizontal layout (1x2)
+    } else if (displayedImages.length === 3) {
+      columns = 3; // 3 images: horizontal layout (1x3)
+    } else if (displayedImages.length >= 4) {
+      columns = 2; // 4+ images: grid layout (2x2)
+    }
+
+    // Use calculated aspect ratio for single image, 100x100 for multiple images
+    const cellSize =
+      displayedImages.length === 1 && singleImageSize
+        ? singleImageSize.width
+        : 100;
+    const cellHeight =
+      displayedImages.length === 1 && singleImageSize
+        ? singleImageSize.height
+        : cellSize;
+    const gap = 4;
+    const totalWidth = cellSize * columns + gap * (columns - 1);
+
+    return (
+      <KContainer.View
+        style={[
+          styles.grid,
+          {
+            width: totalWidth,
+          },
+        ]}
+      >
+        {displayedImages.map((image, index) => {
+          const pictureElem = image.pictureElem;
+          const imageUrl =
+            pictureElem?.snapshotPicture?.url ||
+            pictureElem?.bigPicture?.url ||
+            pictureElem?.sourcePicture?.url;
+
+          if (!imageUrl) {
+            return null;
+          }
+
+          // Use dynamic optimization based on calculated dimensions
+          const optimizedUrl =
+            ChatImageDimens.getOptimizedImageUrlWithDimensions(
+              imageUrl,
+              cellSize,
+              cellHeight
+            );
+
+          const isLastCell = index === displayedImages.length - 1;
+          const showHiddenCount = isLastCell && hiddenCount > 0;
+          const isImageLoading = loadingState[index] ?? true;
+
+          return (
+            <KContainer.Touchable
+              key={`merged-image-${index}`}
+              onPress={() => handleImagePress(index)}
+              style={[
+                styles.imageCell,
+                {
+                  width: cellSize,
+                  height: cellHeight,
+                },
+              ]}
+            >
+              <KImage.Base
+                uri={optimizedUrl}
+                width={cellSize}
+                height={cellHeight}
+                style={styles.image}
+                onLoadEnd={() => handleImageLoadEnd(index)}
+              />
+
+              {isImageLoading && <KContainer.View style={styles.skeleton} />}
+
+              {/* Hidden count overlay with +N text */}
+              {showHiddenCount && (
+                <KContainer.View style={styles.hiddenOverlay} center>
+                  <KLabel.Text typo="TextMdBold" color={KColors.white}>
+                    +{hiddenCount}
+                  </KLabel.Text>
+                </KContainer.View>
+              )}
+            </KContainer.Touchable>
+          );
+        })}
+      </KContainer.View>
+    );
+  }
+);
+
+MergedImageGrid.displayName = 'MergedImageGrid';
+
+const styles = StyleSheet.create({
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 4,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  imageCell: {
+    position: 'relative',
+    overflow: 'hidden',
+    borderRadius: 8,
+    backgroundColor: '#f0f0f0',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  skeleton: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: '#f0f0f0',
+    borderRadius: 8,
+  },
+  hiddenOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+});

package/src/components/ThreadCard/AvatarSection.tsx

@@ -1,21 +1,18 @@
 import { memo } from 'react';
 import { Avatar } from '../Avatar';
-import { DChatCategory } from '../../types/chat';
 import type { DConversationItem } from '../../types/chat';
+import { PeerType } from '@droppii/openim-rn-client-sdk';
 
 interface AvatarSectionProps extends Partial<
-  Pick<DConversationItem, 'chatCategory' | 'applicationType' | 'chatType'>
+  Pick<DConversationItem, 'peerType' | 'applicationType'>
 > {
   avatar: string | null;
   fullName: string;
 }
 
 export const AvatarSection = memo(
-  ({ avatar, fullName, chatCategory, applicationType }: AvatarSectionProps) => {
-    if (
-      chatCategory === DChatCategory.BIZ_BOT_CRM ||
-      chatCategory === DChatCategory.BIZ_BOT_PDP
-    ) {
+  ({ avatar, fullName, peerType, applicationType }: AvatarSectionProps) => {
+    if (peerType === PeerType.Bot) {
       return (
         <Avatar
           source={avatar}
@@ -25,7 +22,7 @@ export const AvatarSection = memo(
       );
     }
 
-    if (applicationType === 'MALL') {
+    if (peerType === PeerType.Customer || applicationType === 'MALL') {
       return (
         <Avatar
           source={avatar}

package/src/components/ThreadCard/NamePrefixIcon.tsx

@@ -1,8 +1,8 @@
 import { memo } from 'react';
 import { Image, StyleSheet } from 'react-native';
 import { KContainer, KImage, KColors } from '@droppii/libs';
-import { DChatCategory, DChatType } from '../../types/chat';
 import Images from '../../assets/images';
+import { PeerType } from '@droppii/openim-rn-client-sdk';
 
 const styles = StyleSheet.create({
   icon: {
@@ -12,46 +12,35 @@ const styles = StyleSheet.create({
 });
 
 interface NamePrefixIconProps {
-  chatCategory?: DChatCategory;
-  chatType?: DChatType;
+  peerType?: PeerType | string;
 }
 
-export const NamePrefixIcon = memo(
-  ({ chatCategory, chatType }: NamePrefixIconProps) => {
-    if (chatCategory === DChatCategory.BIZ_BOT_CRM) {
-      return (
-        <KContainer.View marginR="0.25rem">
-          <Image source={Images.ICON_DROPPII} style={styles.icon} />
-        </KContainer.View>
-      );
-    }
-    if (chatCategory === DChatCategory.BIZ_BOT_PDP) {
-      return (
-        <KContainer.View marginR="0.25rem">
-          <KImage.VectorIcons
-            name="robot-outline"
-            provider="MaterialCommunityIcons"
-            size={14}
-            color={KColors.palette.primary.w400}
-          />
-        </KContainer.View>
-      );
-    }
-
-    if (chatType === DChatType.GROUP) {
-      return (
-        <KContainer.View marginR="0.25rem">
-          <KImage.VectorIcons
-            name="user-two-b"
-            size={14}
-            color={KColors.black}
-          />
-        </KContainer.View>
-      );
-    }
+export const NamePrefixIcon = memo(({ peerType }: NamePrefixIconProps) => {
+  if (peerType === PeerType.Bot) {
+    return (
+      <KContainer.View marginR="0.25rem">
+        <Image source={Images.ICON_DROPPII} style={styles.icon} />
+      </KContainer.View>
+    );
+  }
 
-    return null;
+  if (peerType === PeerType.Group) {
+    return (
+      <KContainer.View marginR="0.25rem">
+        <KImage.VectorIcons name="user-two-b" size={14} color={KColors.black} />
+      </KContainer.View>
+    );
   }
-);
+
+  // if (peerType === DChatPeerType.CUSTOMER) {
+  //   return (
+  //     <KContainer.View marginR="0.25rem">
+  //       <Image source={Images.ICON_DROPPII} style={styles.icon} />
+  //     </KContainer.View>
+  //   );
+  // }
+
+  return null;
+});
 
 NamePrefixIcon.displayName = 'NamePrefixIcon';

package/src/components/ThreadCard/ThreadCard.tsx

@@ -1,12 +1,10 @@
 import { memo, useCallback } from 'react';
-import { StyleSheet, type GestureResponderEvent } from 'react-native';
+import { type GestureResponderEvent } from 'react-native';
 import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
-import { DChatCategory } from '../../types/chat';
 import { AvatarSection } from './AvatarSection';
 import { NamePrefixIcon } from './NamePrefixIcon';
 import { UnreadBadge } from './UnreadBadge';
 import { formatTimestamp, getLastMessageText } from './thread-card.utils';
-import Images from '../../assets/images';
 import { useConversation, useUserStore } from '../../store';
 
 interface ThreadCardProps {
@@ -16,19 +14,20 @@ interface ThreadCardProps {
 
 const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
   const {
-    peer,
-    chatCategory,
+    peerType,
+    showName,
+    faceURL,
     lastMessage,
     unreadCount = 0,
-    isMuted,
-    pinnedAt,
+    recvMsgOpt,
+    isPinned,
     applicationType,
-    chatType,
     latestMsgSendTime,
   } = useConversation(item) ?? {};
 
-  const fullName = peer?.fullName ?? peer?.username ?? '';
+  const fullName = showName ?? '';
   const hasUnread = unreadCount > 0;
+  const isMuted = (recvMsgOpt ?? 0) !== 0;
   const timestamp = formatTimestamp(
     latestMsgSendTime ?? lastMessage?.sendTime ?? null
   );
@@ -52,30 +51,25 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
       activeOpacity={0.7}
     >
       <AvatarSection
-        avatar={peer?.avatar ?? null}
+        avatar={faceURL ?? null}
         fullName={fullName}
-        chatCategory={chatCategory}
+        peerType={peerType}
         applicationType={applicationType}
-        chatType={chatType}
       />
 
       {/* Chat-Content */}
       <KContainer.View flex marginL="0.5rem" paddingB={2}>
         {/* Row-Title */}
         <KContainer.View row alignItems="center">
-          <NamePrefixIcon chatCategory={chatCategory} chatType={chatType} />
-          <KContainer.VisibleView
-            visible={
-              // chatCategory === DChatCategory.BIZ_BOT_CRM ||
-              chatCategory === DChatCategory.BIZ_BOT_PDP
-            }
-          >
+          <NamePrefixIcon peerType={peerType} />
+          {/* For verified PDP (configuration details to be defined later) */}
+          {/* <KContainer.VisibleView visible={peerType === DChatPeerType.BOT}>
             <KImage.Base
               uri={Images.ICON_BOT}
               size={14}
               style={styles.botIcon}
             />
-          </KContainer.VisibleView>
+          </KContainer.VisibleView> */}
           <KLabel.Text
             typo={hasUnread ? 'TextMdBold' : 'TextMdNormal'}
             numberOfLines={1}
@@ -84,7 +78,7 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
           >
             {fullName}
           </KLabel.Text>
-          <KContainer.VisibleView visible={!!isMuted}>
+          <KContainer.VisibleView visible={isMuted}>
             <KContainer.View marginL="0.25rem">
               <KImage.VectorIcons
                 name="bell-off"
@@ -115,7 +109,7 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
           >
             {lastMessageText}
           </KLabel.Text>
-          <KContainer.VisibleView visible={Boolean(pinnedAt)}>
+          <KContainer.VisibleView visible={Boolean(isPinned)}>
             <KContainer.View marginL="0.5rem">
               <KImage.VectorIcons
                 name="pin-outline"
@@ -135,11 +129,3 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
 ThreadCard.displayName = 'ThreadCard';
 
 export default ThreadCard;
-
-const styles = StyleSheet.create({
-  botIcon: {
-    width: 16,
-    height: 16,
-    marginRight: 4,
-  },
-});

package/src/components/ThreadCard/thread-card.utils.ts

@@ -1,5 +1,6 @@
 import { MessageType } from '@droppii/openim-rn-client-sdk';
 import type { DMessageItem } from '../../types/chat';
+import { DChatMessageType } from '../../types/message';
 
 const extractTextContent = (message: DMessageItem): string => {
   if (message.textElem?.content) return message.textElem.content;
@@ -11,18 +12,108 @@ const extractTextContent = (message: DMessageItem): string => {
   }
 };
 
+const formatDuration = (seconds: number): string => {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+};
+
+const getMessagePreview = (message: DMessageItem): string => {
+  // Check custom message type first
+  if (message.contentType === MessageType.CustomMessage) {
+    try {
+      const data = JSON.parse(message.content);
+      const dataType = data.dataType || data.type;
+
+      if (dataType === DChatMessageType.Link) {
+        const linkText = data.content || data.title || 'Link';
+        return linkText;
+      }
+
+      if (dataType === DChatMessageType.Order) {
+        const orderCode = data.orderCode || data.code || '';
+        return `[Đơn hàng] ${orderCode}`;
+      }
+    } catch {
+      // Fall through to default
+    }
+  }
+
+  // Handle standard message types
+  switch (message.contentType) {
+    case MessageType.TextMessage:
+      return extractTextContent(message);
+
+    case MessageType.PictureMessage:
+      return '[Hình ảnh]';
+
+    case MessageType.VideoMessage:
+      try {
+        const videoData = JSON.parse(message.content);
+        const duration = videoData.duration || 0;
+        const durationStr = duration > 0 ? ` ${formatDuration(duration)}` : '';
+        return `[Video]${durationStr}`;
+      } catch {
+        return '[Video]';
+      }
+
+    case MessageType.FileMessage:
+      try {
+        const fileData = JSON.parse(message.content);
+        const fileName = fileData.fileName || fileData.name || 'File';
+        return `[File] ${fileName}`;
+      } catch {
+        return '[File]';
+      }
+
+    case MessageType.MergeMessage:
+      // Show image count for merged messages containing images
+      try {
+        const mergeData = message.mergeElem;
+        if (mergeData?.multiMessage) {
+          const imageCount = mergeData.multiMessage.filter(
+            (msg: any) => msg.contentType === MessageType.PictureMessage
+          ).length;
+          if (imageCount > 0) {
+            return `${imageCount} [Hình ảnh]`;
+          }
+        }
+      } catch {
+        // Fall through to default
+      }
+      return '';
+
+    case MessageType.UrlTextMessage:
+      // Preview link message - show with [Link] prefix
+      const urlText =
+        message?.urlTextElem?.content || message?.urlTextElem?.urls?.[0] || '';
+      console.log('message', urlText);
+      return urlText ? `[Link] ${urlText}` : '[Link]';
+
+    case MessageType.AtTextMessage:
+    case MessageType.QuoteMessage:
+      return extractTextContent(message);
+
+    default:
+      return '[Tin nhắn không được hỗ trợ]';
+  }
+};
+
 export const getLastMessageText = (
   message: DMessageItem | undefined,
   currentUserId?: string
 ): string => {
   if (!message) return '';
-  if (message.contentType !== MessageType.TextMessage) return '';
 
-  const text = extractTextContent(message);
+  const preview = getMessagePreview(message);
+  if (!preview) return '';
+
+  // Add sender name
   if (currentUserId && message.sendID === currentUserId) {
-    return `Bạn: ${text}`;
+    return `Bạn: ${preview}`;
   }
-  return text;
+
+  return preview;
 };
 
 export const formatTimestamp = (ts: number | string | null): string => {

package/src/components/messages/fileMessage/index.tsx

@@ -0,0 +1,30 @@
+import { memo } from 'react';
+import { KContainer, KLabel } from '@droppii/libs';
+import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
+import { messageStyles } from '../styles';
+import type { BaseLegendMessageProps } from '../types';
+
+export const FileMessage = memo(
+  ({ message, isOutgoing }: BaseLegendMessageProps) => {
+    const fileName = message.fileElem?.fileName || message.content || '[File]';
+
+    return (
+      <KContainer.View style={messageStyles.wrapper}>
+        <KContainer.View
+          style={[
+            messageStyles.bubble,
+            isOutgoing
+              ? messageStyles.bubbleSent
+              : messageStyles.bubbleReceived,
+          ]}
+        >
+          <KLabel.Text typo="TextSmNormal" color={CHAT_BUBBLE_COLORS.text}>
+            📎 {fileName}
+          </KLabel.Text>
+        </KContainer.View>
+      </KContainer.View>
+    );
+  }
+);
+
+FileMessage.displayName = 'FileMessage';