@droppii-org/chat-mobile 0.2.7 → 0.2.8

package/lib/module/components/AttachmentPreview.js

@@ -0,0 +1,250 @@
+"use strict";
+
+import { memo } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import { KContainer, KImage, KColors, KLabel } from '@droppii/libs';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const formatDuration = seconds => {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+};
+const getAttachmentIcon = type => {
+  switch (type) {
+    case 'image':
+      return 'image';
+    case 'video':
+      return 'play-circle';
+    case 'audio':
+      return 'music';
+    case 'document':
+      return 'file-document';
+    case 'file':
+    default:
+      return 'file';
+  }
+};
+export const AttachmentPreview = /*#__PURE__*/memo(({
+  visible,
+  attachments,
+  onRemove
+}) => {
+  if (!visible || !attachments?.length) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(KContainer.View, {
+    paddingH: "0.75rem"
+    // paddingV="0.75rem"
+    ,
+    brW: 1,
+    brC: KColors.palette.gray.w100,
+    background: KColors.white,
+    style: styles.container,
+    children: /*#__PURE__*/_jsx(KContainer.View, {
+      row: true,
+      alignItems: true,
+      minH: 70,
+      children: /*#__PURE__*/_jsx(KContainer.View, {
+        flex: true,
+        children: /*#__PURE__*/_jsx(ScrollView, {
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          scrollEventThrottle: 16,
+          contentContainerStyle: {
+            alignItems: 'center'
+          },
+          children: attachments.map((item, index) => {
+            const {
+              type,
+              metadata,
+              uploadProgress,
+              error,
+              isUploading,
+              thumbnailUrl
+            } = item;
+            const isImage = type === 'image';
+            const isVideo = type === 'video';
+            const hasPreview = isImage || isVideo;
+            return /*#__PURE__*/_jsxs(KContainer.View, {
+              children: [/*#__PURE__*/_jsxs(KContainer.View, {
+                style: styles.thumbnail,
+                center: true,
+                children: [isVideo && thumbnailUrl && /*#__PURE__*/_jsx(KImage.Base, {
+                  uri: thumbnailUrl,
+                  width: 48,
+                  height: 48,
+                  resizeMode: "cover"
+                }), isVideo && !thumbnailUrl && /*#__PURE__*/_jsx(KContainer.View, {
+                  style: [styles.videoBg, styles.videoThumbnail]
+                }), isImage && /*#__PURE__*/_jsx(KImage.Base, {
+                  uri: `file://${metadata.path}`,
+                  width: 48,
+                  height: 48
+                }), !hasPreview && /*#__PURE__*/_jsx(KContainer.View, {
+                  style: styles.iconOverlay,
+                  center: true,
+                  background: KColors.palette.gray.w100,
+                  children: /*#__PURE__*/_jsx(KImage.VectorIcons, {
+                    name: getAttachmentIcon(type),
+                    provider: "MaterialCommunityIcons",
+                    size: 24,
+                    color: KColors.palette.primary.w400
+                  })
+                }), isVideo && metadata.duration && /*#__PURE__*/_jsx(KContainer.View, {
+                  style: styles.durationBadge,
+                  center: true,
+                  children: /*#__PURE__*/_jsx(KLabel.Text, {
+                    typo: "TextXsNormal",
+                    color: KColors.white,
+                    style: styles.durationText,
+                    children: formatDuration(metadata.duration / 1000)
+                  })
+                }), !hasPreview && /*#__PURE__*/_jsx(KContainer.View, {
+                  style: styles.typeIcon,
+                  center: true,
+                  children: /*#__PURE__*/_jsx(KImage.VectorIcons, {
+                    name: getAttachmentIcon(type),
+                    provider: "MaterialCommunityIcons",
+                    size: 14,
+                    color: KColors.white
+                  })
+                }), error && /*#__PURE__*/_jsx(KContainer.View, {
+                  style: styles.errorOverlay,
+                  center: true,
+                  children: /*#__PURE__*/_jsx(KImage.VectorIcons, {
+                    name: "close-circle",
+                    provider: "MaterialCommunityIcons",
+                    size: 28,
+                    color: KColors.white
+                  })
+                }), isUploading && /*#__PURE__*/_jsx(KContainer.View, {
+                  style: styles.progressOverlay,
+                  center: true,
+                  children: /*#__PURE__*/_jsxs(KLabel.Text, {
+                    typo: "TextSmNormal",
+                    color: KColors.white,
+                    children: [uploadProgress, "%"]
+                  })
+                })]
+              }), /*#__PURE__*/_jsx(KContainer.Touchable, {
+                style: styles.removeButton,
+                center: true,
+                br: "round",
+                background: KColors.black,
+                onPress: () => onRemove(type, index),
+                disabled: isUploading,
+                hitSlop: {
+                  top: 10,
+                  bottom: 10,
+                  left: 10,
+                  right: 10
+                },
+                children: /*#__PURE__*/_jsx(KImage.VectorIcons, {
+                  name: "close",
+                  provider: "MaterialCommunityIcons",
+                  size: 14,
+                  color: KColors.white
+                })
+              })]
+            }, `${type}-${index}`);
+          })
+        })
+      })
+    })
+  });
+});
+AttachmentPreview.displayName = 'AttachmentPreview';
+const styles = StyleSheet.create({
+  container: {
+    // minHeight: 80,
+  },
+  thumbnail: {
+    position: 'relative',
+    width: 48,
+    height: 48,
+    borderRadius: 4,
+    overflow: 'hidden',
+    marginRight: 8,
+    backgroundColor: KColors.palette.gray.w50
+  },
+  durationBadge: {
+    position: 'absolute',
+    bottom: 4,
+    right: 4,
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    borderRadius: 3,
+    paddingVertical: 2,
+    paddingHorizontal: 4
+  },
+  durationText: {
+    fontSize: 11,
+    fontWeight: '600'
+  },
+  iconOverlay: {
+    width: 48,
+    height: 48,
+    borderRadius: 4
+  },
+  videoIcon: {
+    position: 'absolute',
+    top: 2,
+    right: 2,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    borderRadius: 8,
+    width: 20,
+    height: 20
+  },
+  typeIcon: {
+    position: 'absolute',
+    bottom: 2,
+    right: 2,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    borderRadius: 6,
+    width: 16,
+    height: 16
+  },
+  videoBg: {
+    width: 48,
+    height: 48,
+    borderRadius: 4
+  },
+  videoThumbnail: {
+    backgroundColor: KColors.black
+  },
+  progressOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)'
+  },
+  errorOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(255, 59, 48, 0.8)'
+  },
+  removeButton: {
+    position: 'absolute',
+    top: -8,
+    right: 2,
+    width: 22,
+    height: 22,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 3
+  },
+  sendButton: {
+    width: 48,
+    height: 48
+  }
+});
+//# sourceMappingURL=AttachmentPreview.js.map

package/lib/module/components/AttachmentPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memo","ScrollView","StyleSheet","KContainer","KImage","KColors","KLabel","jsx","_jsx","jsxs","_jsxs","formatDuration","seconds","mins","Math","floor","secs","toString","padStart","getAttachmentIcon","type","AttachmentPreview","visible","attachments","onRemove","length","View","paddingH","brW","brC","palette","gray","w100","background","white","style","styles","container","children","row","alignItems","minH","flex","horizontal","showsHorizontalScrollIndicator","scrollEventThrottle","contentContainerStyle","map","item","index","metadata","uploadProgress","error","isUploading","thumbnailUrl","isImage","isVideo","hasPreview","thumbnail","center","Base","uri","width","height","resizeMode","videoBg","videoThumbnail","path","iconOverlay","VectorIcons","name","provider","size","color","primary","w400","duration","durationBadge","Text","typo","durationText","typeIcon","errorOverlay","progressOverlay","Touchable","removeButton","br","black","onPress","disabled","hitSlop","top","bottom","left","right","displayName","create","position","borderRadius","overflow","marginRight","backgroundColor","w50","paddingVertical","paddingHorizontal","fontSize","fontWeight","videoIcon","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","sendButton"],"sourceRoot":"../../../src","sources":["components/AttachmentPreview.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/MediaViewer/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.js.map

package/lib/module/components/MediaViewer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/MediaViewer/index.tsx"],"mappings":"","ignoreList":[]}

package/lib/module/components/MediaViewerModal.js

@@ -0,0 +1,57 @@
+"use strict";
+
+import { forwardRef, useImperativeHandle } from 'react';
+import { Modal, StyleSheet } from 'react-native';
+import MediaViewerScreen from "../screens/MediaView/index.js";
+import { useMediaViewer } from "../hooks/useMediaViewer.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const MediaViewerModal = /*#__PURE__*/forwardRef(({
+  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 /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    transparent: false,
+    statusBarTranslucent: true,
+    style: styles.modal,
+    presentationStyle: "overFullScreen",
+    animationType: "fade",
+    onRequestClose: handleDismiss,
+    children: /*#__PURE__*/_jsx(MediaViewerScreen, {
+      images: images,
+      initIndex: initIndex,
+      pagination: images.length > 1,
+      onDismiss: handleDismiss,
+      download: true
+    })
+  });
+});
+MediaViewerModal.displayName = 'MediaViewerModal';
+const styles = StyleSheet.create({
+  modal: {
+    flex: 1
+  }
+});
+//# sourceMappingURL=MediaViewerModal.js.map

package/lib/module/components/MediaViewerModal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useImperativeHandle","Modal","StyleSheet","MediaViewerScreen","useMediaViewer","jsx","_jsx","MediaViewerModal","onDismiss","ref","visible","mediaList","initIndex","show","hide","handleDismiss","length","images","map","item","url","isVideo","transparent","statusBarTranslucent","style","styles","modal","presentationStyle","animationType","onRequestClose","children","pagination","download","displayName","create","flex"],"sourceRoot":"../../../src","sources":["components/MediaViewerModal.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,mBAAmB,QAAQ,OAAO;AACvD,SAASC,KAAK,EAAEC,UAAU,QAAQ,cAAc;AAChD,OAAOC,iBAAiB,MAAM,+BAAsB;AACpD,SAASC,cAAc,QAAwB,4BAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAUzE,OAAO,MAAMC,gBAAgB,gBAAGR,UAAU,CAGxC,CAAC;EAAES;AAAU,CAAC,EAAEC,GAAG,KAAK;EACxB,MAAM;IAAEC,OAAO;IAAEC,SAAS;IAAEC,SAAS;IAAEC,IAAI;IAAEC;EAAK,CAAC,GAAGV,cAAc,CAAC,CAAC;;EAEtE;EACAJ,mBAAmB,CACjBS,GAAG,EACH,OAAO;IACLI;EACF,CAAC,CAAC,EACF,CAACA,IAAI,CACP,CAAC;EAED,MAAME,aAAa,GAAGA,CAAA,KAAM;IAC1BD,IAAI,CAAC,CAAC;IACNN,SAAS,GAAG,CAAC;EACf,CAAC;EAED,IAAI,CAACE,OAAO,IAAIC,SAAS,CAACK,MAAM,KAAK,CAAC,EAAE;IACtC,OAAO,IAAI;EACb;EAEA,MAAMC,MAAM,GAAGN,SAAS,CAACO,GAAG,CAAEC,IAAI,KAAM;IACtCC,GAAG,EAAED,IAAI,CAACC,GAAG;IACbC,OAAO,EAAEF,IAAI,CAACE,OAAO,IAAI;EAC3B,CAAC,CAAC,CAAC;EAEH,oBACEf,IAAA,CAACL,KAAK;IACJS,OAAO,EAAEA,OAAQ;IACjBY,WAAW,EAAE,KAAM;IACnBC,oBAAoB,EAAE,IAAK;IAC3BC,KAAK,EAAEC,MAAM,CAACC,KAAM;IACpBC,iBAAiB,EAAC,gBAAgB;IAClCC,aAAa,EAAC,MAAM;IACpBC,cAAc,EAAEd,aAAc;IAAAe,QAAA,eAE9BxB,IAAA,CAACH,iBAAiB;MAChBc,MAAM,EAAEA,MAAO;MACfL,SAAS,EAAEA,SAAU;MACrBmB,UAAU,EAAEd,MAAM,CAACD,MAAM,GAAG,CAAE;MAC9BR,SAAS,EAAEO,aAAc;MACzBiB,QAAQ;IAAA,CACT;EAAC,CACG,CAAC;AAEZ,CAAC,CAAC;AAEFzB,gBAAgB,CAAC0B,WAAW,GAAG,kBAAkB;AAEjD,MAAMR,MAAM,GAAGvB,UAAU,CAACgC,MAAM,CAAC;EAC/BR,KAAK,EAAE;IACLS,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/MergedImageGrid.js

@@ -0,0 +1,173 @@
+"use strict";
+
+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.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 = /*#__PURE__*/memo(({
+  images,
+  maxDisplay = 4,
+  onMediaPress
+}) => {
+  const windowWidth = useWindowDimensions().width;
+  const [loadingState, setLoadingState] = useState({});
+  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 => Boolean(item.url)), [images]);
+  const handleImageLoadEnd = useCallback(index => {
+    setLoadingState(prev => ({
+      ...prev,
+      [index]: false
+    }));
+  }, []);
+  const handleImagePress = useCallback(index => {
+    onMediaPress?.(mediaItems, index);
+  }, [onMediaPress, mediaItems]);
+  const initializeLoading = useMemo(() => {
+    const initial = {};
+    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 /*#__PURE__*/_jsx(KContainer.View, {
+    style: [styles.grid, {
+      width: totalWidth
+    }],
+    children: 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 /*#__PURE__*/_jsxs(KContainer.Touchable, {
+        onPress: () => handleImagePress(index),
+        style: [styles.imageCell, {
+          width: cellSize,
+          height: cellHeight
+        }],
+        children: [/*#__PURE__*/_jsx(KImage.Base, {
+          uri: optimizedUrl,
+          width: cellSize,
+          height: cellHeight,
+          style: styles.image,
+          onLoadEnd: () => handleImageLoadEnd(index)
+        }), isImageLoading && /*#__PURE__*/_jsx(KContainer.View, {
+          style: styles.skeleton
+        }), showHiddenCount && /*#__PURE__*/_jsx(KContainer.View, {
+          style: styles.hiddenOverlay,
+          center: true,
+          children: /*#__PURE__*/_jsxs(KLabel.Text, {
+            typo: "TextMdBold",
+            color: KColors.white,
+            children: ["+", hiddenCount]
+          })
+        })]
+      }, `merged-image-${index}`);
+    })
+  });
+});
+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)'
+  }
+});
+//# sourceMappingURL=MergedImageGrid.js.map

package/lib/module/components/MergedImageGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memo","useMemo","useState","useCallback","StyleSheet","useWindowDimensions","KContainer","KImage","KLabel","KColors","ChatImageDimens","jsx","_jsx","jsxs","_jsxs","MergedImageGrid","images","maxDisplay","onMediaPress","windowWidth","width","loadingState","setLoadingState","displayedImages","slice","hiddenCount","Math","max","length","singleImageSize","image","pictureElem","imgWidth","bigPicture","imgHeight","height","maxWidth","floor","aspectRatio","finalWidth","finalHeight","maxHeight","round","mediaItems","map","imageUrl","snapshotPicture","url","sourcePicture","filter","item","Boolean","handleImageLoadEnd","index","prev","handleImagePress","initializeLoading","initial","forEach","_","columns","cellSize","cellHeight","gap","totalWidth","View","style","styles","grid","children","optimizedUrl","getOptimizedImageUrlWithDimensions","isLastCell","showHiddenCount","isImageLoading","Touchable","onPress","imageCell","Base","uri","onLoadEnd","skeleton","hiddenOverlay","center","Text","typo","color","white","displayName","create","flexDirection","flexWrap","justifyContent","alignItems","position","overflow","borderRadius","backgroundColor","top","left","right","bottom"],"sourceRoot":"../../../src","sources":["components/MergedImageGrid.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ThreadCard/thread-card.utils.js

@@ -1,6 +1,7 @@
 "use strict";
 
 import { MessageType } from '@droppii/openim-rn-client-sdk';
+import { DChatMessageType } from "../../types/message.js";
 const extractTextContent = message => {
   if (message.textElem?.content) return message.textElem.content;
   try {
@@ -10,14 +11,89 @@ const extractTextContent = message => {
     return message.content ?? '';
   }
 };
+const formatDuration = seconds => {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+};
+const getMessagePreview = message => {
+  // 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 => 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, currentUserId) => {
   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 => {
   if (!ts) return '';

package/lib/module/components/ThreadCard/thread-card.utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["MessageType","extractTextContent","message","textElem","content","parsed","JSON","parse","getLastMessageText","currentUserId","contentType","TextMessage","text","sendID","formatTimestamp","ts","date","Date","isNaN","getTime","now","today","getFullYear","getMonth","getDate","yesterday","dateOnly","h","getHours","toString","padStart","m","getMinutes","daysAgo","Math","floor","dayNames","getDay","d","mo"],"sourceRoot":"../../../../src","sources":["components/ThreadCard/thread-card.utils.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["MessageType","DChatMessageType","extractTextContent","message","textElem","content","parsed","JSON","parse","formatDuration","seconds","mins","Math","floor","secs","toString","padStart","getMessagePreview","contentType","CustomMessage","data","dataType","type","Link","linkText","title","Order","orderCode","code","TextMessage","PictureMessage","VideoMessage","videoData","duration","durationStr","FileMessage","fileData","fileName","name","MergeMessage","mergeData","mergeElem","multiMessage","imageCount","filter","msg","length","UrlTextMessage","urlText","urlTextElem","urls","console","log","AtTextMessage","QuoteMessage","getLastMessageText","currentUserId","preview","sendID","formatTimestamp","ts","date","Date","isNaN","getTime","now","today","getFullYear","getMonth","getDate","yesterday","dateOnly","h","getHours","m","getMinutes","daysAgo","dayNames","getDay","d","mo"],"sourceRoot":"../../../../src","sources":["components/ThreadCard/thread-card.utils.ts"],"mappings":"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","ignoreList":[]}