@droppii-org/chat-mobile 0.2.7 → 0.2.8

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';

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

@@ -0,0 +1,137 @@
+import { memo, useState, useCallback, useMemo } from 'react';
+import { StyleSheet, Image, useWindowDimensions } from 'react-native';
+import { KContainer, KImage } from '@droppii/libs';
+import ChatImageDimens from '../../../utils/chatImageDimens';
+import { messageStyles } from '../styles';
+import type { BaseLegendMessageProps } from '../types';
+
+export const ImageMessage = memo(
+  ({ message, onMediaPress }: BaseLegendMessageProps) => {
+    const windowWidth = useWindowDimensions().width;
+    const [isLoading, setIsLoading] = useState(true);
+    const pictureElem = (message as any).pictureElem;
+    const rawImageUrl =
+      pictureElem?.snapshotPicture?.url ||
+      pictureElem?.bigPicture?.url ||
+      pictureElem?.sourcePicture?.url;
+
+    // Calculate dimensions respecting aspect ratio and 80% device width
+    const imageDimensions = useMemo(() => {
+      if (!rawImageUrl) return { width: 250, height: 250 };
+
+      const responseWidth =
+        pictureElem?.width ||
+        pictureElem?.bigPicture?.width ||
+        pictureElem?.snapshotPicture?.width;
+      const responseHeight =
+        pictureElem?.height ||
+        pictureElem?.bigPicture?.height ||
+        pictureElem?.snapshotPicture?.height;
+
+      let imgWidth = responseWidth;
+      let imgHeight = responseHeight;
+
+      // If no dimensions in response, try to resolve from image source
+      if (!imgWidth || !imgHeight) {
+        try {
+          const source = Image.resolveAssetSource({ uri: rawImageUrl });
+          imgWidth = source?.width || 300;
+          imgHeight = source?.height || 300;
+        } catch {
+          // Fallback to default if resolution fails
+          imgWidth = 300;
+          imgHeight = 300;
+        }
+      }
+
+      const aspectRatio = imgWidth / imgHeight;
+      // Account for all margins/padding: use 75% of window width with buffer
+      const horizontalBuffer = 16; // Left and right combined buffer
+      const maxWidth = Math.floor(windowWidth * 0.75 - horizontalBuffer);
+
+      // Calculate final dimensions
+      let finalWidth = maxWidth;
+      let finalHeight = maxWidth / aspectRatio;
+
+      // Cap maximum height to avoid overly tall images
+      const maxHeight = 500;
+      if (finalHeight > maxHeight) {
+        finalHeight = maxHeight;
+        finalWidth = finalHeight * aspectRatio;
+      }
+
+      return {
+        width: Math.round(finalWidth),
+        height: Math.round(finalHeight),
+      };
+    }, [pictureElem, rawImageUrl, windowWidth]);
+
+    const handleLoadEnd = useCallback(() => {
+      setIsLoading(false);
+    }, []);
+
+    const handlePress = useCallback(() => {
+      onMediaPress?.([{ url: rawImageUrl }], 0);
+    }, [onMediaPress, rawImageUrl]);
+
+    if (!rawImageUrl) {
+      return null;
+    }
+
+    // Use dynamic optimization matching calculated dimensions
+    const optimizedUrl = ChatImageDimens.getOptimizedImageUrlWithDimensions(
+      rawImageUrl,
+      imageDimensions.width,
+      imageDimensions.height
+    );
+
+    return (
+      <KContainer.View style={[messageStyles.wrapper, styles.wrapper]}>
+        <KContainer.Touchable
+          onPress={handlePress}
+          style={[
+            messageStyles.imageBubble,
+            styles.imageContainer,
+            {
+              width: imageDimensions.width,
+              height: imageDimensions.height,
+            },
+          ]}
+        >
+          <KImage.Base
+            uri={optimizedUrl}
+            width={imageDimensions.width}
+            height={imageDimensions.height}
+            style={[messageStyles.imageBubble]}
+            onLoadEnd={handleLoadEnd}
+          />
+
+          {isLoading && <KContainer.View style={styles.skeleton} />}
+        </KContainer.Touchable>
+      </KContainer.View>
+    );
+  }
+);
+
+ImageMessage.displayName = 'ImageMessage';
+
+const styles = StyleSheet.create({
+  wrapper: {
+    // paddingRight: 8,
+    overflow: 'hidden',
+  },
+  skeleton: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: '#f0f0f0',
+    borderRadius: 8,
+  },
+  imageContainer: {
+    position: 'relative',
+    overflow: 'hidden',
+    borderRadius: 8,
+  },
+});

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

@@ -0,0 +1,162 @@
+import { memo } from 'react';
+import { Linking, StyleSheet } from 'react-native';
+import {
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+  KSpacingValue,
+} from '@droppii/libs';
+import type { DMessageItem } from '../../../types/chat';
+import type { IUrlMetadata } from '../../../types/common';
+import { formatMessageTime } from '../types';
+import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
+
+interface BaseLegendMessageProps {
+  message: DMessageItem;
+  isOutgoing: boolean;
+  createdAtTime: number;
+}
+
+const parseUrlMetadata = (ex?: string): IUrlMetadata | undefined => {
+  if (!ex) return undefined;
+  try {
+    const parsed = JSON.parse(ex) as any;
+    // Handle nested urlMetadata structure
+    return parsed.urlMetadata || parsed;
+  } catch {
+    return undefined;
+  }
+};
+
+const renderTextWithLinks = (content: string, urls: string[]) => {
+  if (!urls.length) {
+    return <KLabel.Text typo="TextMdNormal">{content}</KLabel.Text>;
+  }
+
+  return (
+    <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
+      {content}
+    </KLabel.Text>
+  );
+};
+
+export const LinkMessage = memo(
+  ({ message, isOutgoing, createdAtTime }: BaseLegendMessageProps) => {
+    const content = message?.urlTextElem?.content;
+    const urls = message?.urlTextElem?.urls ?? [];
+    const metadata = parseUrlMetadata(message.ex);
+    const timeLabel = formatMessageTime(createdAtTime);
+
+    return (
+      <KContainer.View style={styles.wrapper}>
+        <KContainer.View
+          style={[
+            styles.bubble,
+            isOutgoing ? styles.bubbleSent : styles.bubbleReceived,
+          ]}
+        >
+          {!!content?.trim() && (
+            <KContainer.View style={styles.textRow}>
+              {renderTextWithLinks(content, urls)}
+            </KContainer.View>
+          )}
+
+          {metadata && (
+            <KContainer.Touchable
+              style={styles.card}
+              onPress={() => metadata.url && Linking.openURL(metadata.url)}
+            >
+              {!!metadata.image && (
+                <KContainer.View style={styles.cardThumb}>
+                  <KImage.Base
+                    uri={metadata.image}
+                    style={StyleSheet.absoluteFill}
+                    resizeMode="cover"
+                  />
+                </KContainer.View>
+              )}
+              <KContainer.View style={styles.cardBody}>
+                {!!metadata.title && (
+                  <KLabel.Text
+                    typo="TextNmMedium"
+                    color={KColors.palette.gray.w900}
+                    numberOfLines={1}
+                  >
+                    {metadata.title}
+                  </KLabel.Text>
+                )}
+                {!!metadata.url && (
+                  <KLabel.Text
+                    typo="TextXsMedium"
+                    color={KColors.palette.primary.w400}
+                    numberOfLines={1}
+                  >
+                    {metadata.url}
+                  </KLabel.Text>
+                )}
+                {!!metadata.description && (
+                  <KLabel.Text
+                    typo="TextXsNormal"
+                    color={KColors.gray.normal}
+                    numberOfLines={2}
+                  >
+                    {metadata.description}
+                  </KLabel.Text>
+                )}
+              </KContainer.View>
+            </KContainer.Touchable>
+          )}
+        </KContainer.View>
+
+        {!isOutgoing && timeLabel ? (
+          <KLabel.Text
+            typo="TextXsNormal"
+            color={CHAT_BUBBLE_COLORS.timestamp}
+            marginL="0.25rem"
+          >
+            {timeLabel}
+          </KLabel.Text>
+        ) : null}
+      </KContainer.View>
+    );
+  }
+);
+
+LinkMessage.displayName = 'LinkMessage';
+
+const styles = StyleSheet.create({
+  wrapper: {
+    maxWidth: '80%',
+  },
+  bubble: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    paddingVertical: KSpacingValue['0.5rem'],
+    borderRadius: KSpacingValue['1.25rem'],
+  },
+  bubbleReceived: {
+    backgroundColor: CHAT_BUBBLE_COLORS.received,
+  },
+  bubbleSent: {
+    backgroundColor: CHAT_BUBBLE_COLORS.sent,
+  },
+  textRow: {
+    paddingHorizontal: KSpacingValue['0.25rem'],
+  },
+  card: {
+    borderRadius: KSpacingValue['0.75rem'],
+    borderWidth: 1,
+    borderColor: 'rgba(57,62,64,0.1)',
+    backgroundColor: KColors.white,
+    overflow: 'hidden',
+  },
+  cardThumb: {
+    width: '100%',
+    aspectRatio: 16 / 9,
+  },
+  cardBody: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    paddingVertical: KSpacingValue['0.5rem'],
+    gap: 2,
+  },
+});

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

@@ -0,0 +1,45 @@
+import { memo } from 'react';
+import { KContainer } from '@droppii/libs';
+import { MergedImageGrid } from '../../MergedImageGrid';
+import { messageStyles } from '../styles';
+import type { BaseLegendMessageProps } from '../types';
+
+export const MergedMessage = memo(
+  ({ message, isOutgoing, onMediaPress }: BaseLegendMessageProps) => {
+    const mergeElem = (message as any).mergeElem;
+
+    if (!mergeElem?.multiMessage) {
+      return null;
+    }
+
+    const { multiMessage } = mergeElem;
+    const imageMessages = multiMessage.filter(
+      (msg: any) => msg.contentType === 102
+    );
+
+    return (
+      <KContainer.View style={messageStyles.wrapper}>
+        <KContainer.View
+          style={[
+            messageStyles.bubble,
+            isOutgoing
+              ? messageStyles.bubbleSent
+              : messageStyles.bubbleReceived,
+          ]}
+        >
+          {imageMessages.length > 0 && (
+            <KContainer.View marginB="0.5rem">
+              <MergedImageGrid
+                images={imageMessages}
+                maxDisplay={4}
+                onMediaPress={onMediaPress}
+              />
+            </KContainer.View>
+          )}
+        </KContainer.View>
+      </KContainer.View>
+    );
+  }
+);
+
+MergedMessage.displayName = 'MergedMessage';

package/src/components/messages/styles.ts

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+import { KSpacingValue } from '@droppii/libs';
+import { CHAT_BUBBLE_COLORS } from '../../screens/chat-detail/constants';
+
+export const messageStyles = StyleSheet.create({
+  wrapper: {
+    maxWidth: '80%',
+  },
+  bubble: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    paddingVertical: KSpacingValue['0.5rem'],
+    borderRadius: KSpacingValue['1.25rem'],
+  },
+  bubbleReceived: {
+    backgroundColor: CHAT_BUBBLE_COLORS.received,
+  },
+  bubbleSent: {
+    backgroundColor: CHAT_BUBBLE_COLORS.sent,
+  },
+  imageBubble: {
+    borderRadius: KSpacingValue['0.75rem'],
+  },
+  videoPlaceholder: {
+    backgroundColor: CHAT_BUBBLE_COLORS.received,
+  },
+  videoContainer: {
+    position: 'relative',
+    overflow: 'hidden',
+    borderRadius: KSpacingValue['0.75rem'],
+  },
+  playButtonOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+  },
+});

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

@@ -0,0 +1,53 @@
+import { memo } from 'react';
+import { KContainer, KLabel } from '@droppii/libs';
+import { getMessageText } from '../../../utils/legendListMessage';
+import type { DMessageItem } from '../../../types/chat';
+import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
+import { messageStyles } from '../styles';
+import { formatMessageTime } from '../types';
+
+interface TextMessageProps {
+  message: DMessageItem;
+  isOutgoing: boolean;
+  createdAtTime: number;
+}
+
+export const TextMessage = memo(
+  ({ message, isOutgoing, createdAtTime }: TextMessageProps) => {
+    const messageText = getMessageText(message);
+    const timeLabel = formatMessageTime(createdAtTime);
+
+    if (!messageText?.trim()) {
+      return null;
+    }
+
+    return (
+      <KContainer.View style={messageStyles.wrapper}>
+        <KContainer.View
+          style={[
+            messageStyles.bubble,
+            isOutgoing
+              ? messageStyles.bubbleSent
+              : messageStyles.bubbleReceived,
+          ]}
+        >
+          <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
+            {messageText}
+          </KLabel.Text>
+        </KContainer.View>
+
+        {!isOutgoing && timeLabel ? (
+          <KLabel.Text
+            typo="TextXsNormal"
+            color={CHAT_BUBBLE_COLORS.timestamp}
+            marginL={'0.25rem'}
+          >
+            {timeLabel}
+          </KLabel.Text>
+        ) : null}
+      </KContainer.View>
+    );
+  }
+);
+
+TextMessage.displayName = 'TextMessage';

package/src/components/messages/types.ts

@@ -0,0 +1,22 @@
+import type { DMessageItem } from '../../types/chat';
+import type { MediaItem } from '../../hooks/useMediaViewer';
+
+export interface BaseLegendMessageProps {
+  message: DMessageItem;
+  isOutgoing: boolean;
+  createdAtTime: number;
+  onMediaPress?: (items: MediaItem[], index?: number) => void;
+}
+
+export const formatMessageTime = (createdAt: number) => {
+  const date = new Date(createdAt);
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+
+  return date.toLocaleTimeString('vi-VN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+};