@droppii-org/chat-mobile 0.2.6 → 0.2.8

package/src/utils/chatImageDimens.ts

@@ -0,0 +1,178 @@
+import { PixelRatio } from 'react-native';
+import { isTablet } from 'react-native-device-info';
+
+/**
+ * Chat-specific image dimensions for optimal display and memory usage
+ * Responsive to device type (tablet/mobile) and pixel ratio
+ */
+
+export enum CHAT_IMAGE_VIEW_SOURCE {
+  MessageListThumbnail = 'MessageListThumbnail',
+  MessageDetailBubble = 'MessageDetailBubble',
+  ImagePreviewSmall = 'ImagePreviewSmall',
+  ImagePreviewMedium = 'ImagePreviewMedium',
+  ImagePreviewLarge = 'ImagePreviewLarge',
+}
+
+interface ImageDimension {
+  width: number;
+  height: number;
+}
+
+const getSizeReduction = (originalSize: number, factor: number = 1) => {
+  const PIXEL_RATIO = PixelRatio.get();
+  return Math.round(originalSize * factor * PIXEL_RATIO);
+};
+
+const CHAT_IMAGE_DIMENSIONS_PLATFORM = {
+  TABLET: {
+    [CHAT_IMAGE_VIEW_SOURCE.MessageListThumbnail]: {
+      width: 240,
+      height: 240,
+    },
+    [CHAT_IMAGE_VIEW_SOURCE.MessageDetailBubble]: {
+      width: 400,
+      height: 400,
+    },
+    [CHAT_IMAGE_VIEW_SOURCE.ImagePreviewSmall]: {
+      width: 200,
+      height: 200,
+    },
+    [CHAT_IMAGE_VIEW_SOURCE.ImagePreviewMedium]: {
+      width: 300,
+      height: 300,
+    },
+    [CHAT_IMAGE_VIEW_SOURCE.ImagePreviewLarge]: {
+      width: 500,
+      height: 500,
+    },
+  },
+  MOBILE: {
+    [CHAT_IMAGE_VIEW_SOURCE.MessageListThumbnail]: {
+      width: 180,
+      height: 180,
+    },
+    [CHAT_IMAGE_VIEW_SOURCE.MessageDetailBubble]: {
+      width: 250,
+      height: 250,
+    },
+    [CHAT_IMAGE_VIEW_SOURCE.ImagePreviewSmall]: {
+      width: 120,
+      height: 120,
+    },
+    [CHAT_IMAGE_VIEW_SOURCE.ImagePreviewMedium]: {
+      width: 200,
+      height: 200,
+    },
+    [CHAT_IMAGE_VIEW_SOURCE.ImagePreviewLarge]: {
+      width: 320,
+      height: 320,
+    },
+  },
+};
+
+class ChatImageDimens {
+  private static instance: ChatImageDimens;
+  private static factor: number = 1;
+  private static regexCDN = /^.*(cdn)(stg|dev|beta)?(.droppii)/;
+  private static dimens = isTablet()
+    ? { ...CHAT_IMAGE_DIMENSIONS_PLATFORM.TABLET }
+    : { ...CHAT_IMAGE_DIMENSIONS_PLATFORM.MOBILE };
+
+  constructor(factor: number) {
+    ChatImageDimens.factor = factor;
+    this.calculateDimensions();
+  }
+
+  private calculateDimensions() {
+    const baseDimens = isTablet()
+      ? CHAT_IMAGE_DIMENSIONS_PLATFORM.TABLET
+      : CHAT_IMAGE_DIMENSIONS_PLATFORM.MOBILE;
+
+    for (const key in baseDimens) {
+      const source = key as CHAT_IMAGE_VIEW_SOURCE;
+      const baseDimen = baseDimens[source];
+      ChatImageDimens.dimens[source] = {
+        width: getSizeReduction(baseDimen.width, ChatImageDimens.factor),
+        height: getSizeReduction(baseDimen.height, ChatImageDimens.factor),
+      };
+    }
+  }
+
+  public static getInstance() {
+    if (!ChatImageDimens.instance) {
+      ChatImageDimens.instance = new ChatImageDimens(1);
+    }
+    return ChatImageDimens.instance;
+  }
+
+  public static updateFactor(factor: number) {
+    if (factor !== ChatImageDimens.factor) {
+      ChatImageDimens.factor = factor;
+      ChatImageDimens.getInstance().calculateDimensions();
+    }
+  }
+
+  public static getDimensions(source: CHAT_IMAGE_VIEW_SOURCE): ImageDimension {
+    const dimen =
+      ChatImageDimens.dimens[source] ||
+      ChatImageDimens.dimens[CHAT_IMAGE_VIEW_SOURCE.MessageListThumbnail];
+    return { ...dimen };
+  }
+
+  public static getOptimizedImageUrl(
+    url: string | undefined,
+    source: CHAT_IMAGE_VIEW_SOURCE
+  ): string {
+    if (!url) {
+      return '';
+    }
+
+    const dimen = ChatImageDimens.getDimensions(source);
+    return ChatImageDimens.getOptimizedImageUrlWithDimensions(
+      url,
+      dimen.width,
+      dimen.height
+    );
+  }
+
+  /**
+   * Get optimized image URL with custom dimensions (generic approach)
+   * Useful for dynamic sizing based on actual content
+   */
+  public static getOptimizedImageUrlWithDimensions(
+    url: string | undefined,
+    width: number,
+    height: number
+  ): string {
+    if (!url) {
+      return '';
+    }
+
+    // Ignore non-CDN or private URLs
+    if (!url.startsWith('http') || !url.match(ChatImageDimens.regexCDN)) {
+      return url;
+    }
+
+    const domainRegex = /^(https?:\/\/[^/]+)/;
+    const domainMatches = url.match(domainRegex);
+
+    if (!domainMatches || domainMatches.length < 2) {
+      return url;
+    }
+
+    const domain = domainMatches[1];
+    const restOfUrl = url.replace(domain as string, '');
+
+    // Build optimized URL: domain/cache/WIDTHxHEIGHT/path.webp
+    let optimizedUrl = `${domain}/cache/${width}x${height}${restOfUrl}`;
+
+    if (!restOfUrl.endsWith('.webp')) {
+      optimizedUrl += '.webp';
+    }
+
+    return optimizedUrl;
+  }
+}
+
+export default ChatImageDimens;

package/src/utils/conversation.ts

@@ -1,8 +1,10 @@
 import {
+  MessageType,
   SessionType,
   type ConversationItem,
 } from '@droppii/openim-rn-client-sdk';
 import { type DConversationItem, type DMessageItem } from '../types/chat';
+import { trans } from '../translation';
 
 export const conversationCompare = (
   a: ConversationItem,
@@ -26,38 +28,37 @@ export const dConversationCompare = (
   a: DConversationItem,
   b: DConversationItem
 ) => {
-  const aIsPinned = a.pinnedAt != null;
-  const bIsPinned = b.pinnedAt != null;
-
-  if (aIsPinned !== bIsPinned) return aIsPinned ? -1 : 1;
+  if (a.isPinned !== b.isPinned) return a.isPinned ? -1 : 1;
 
-  const aCreateTime = a.lastMessage?.createTime ?? 0;
-  const bCreateTime = b.lastMessage?.createTime ?? 0;
+  const aTime =
+    a.draftTextTime > a.latestMsgSendTime
+      ? a.draftTextTime
+      : a.latestMsgSendTime;
+  const bTime =
+    b.draftTextTime > b.latestMsgSendTime
+      ? b.draftTextTime
+      : b.latestMsgSendTime;
 
-  return bCreateTime - aCreateTime;
+  return bTime - aTime;
 };
 
 export const mergeOpenIMIntoConversation = (
-  droppii: DConversationItem,
+  existing: DConversationItem,
   openim: ConversationItem
 ): DConversationItem => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { latestMsg, conversationID, ...openimRest } = openim;
+  const { latestMsg, ...openimRest } = openim;
 
-  let lastMessage: DMessageItem | undefined = droppii.lastMessage;
+  let lastMessage: DMessageItem | undefined = existing.lastMessage;
   if (latestMsg) {
     try {
       lastMessage = JSON.parse(latestMsg) as DMessageItem;
     } catch {
-      // keep droppii lastMessage if parse fails
+      // keep existing lastMessage if parse fails
     }
   }
 
-  return {
-    ...droppii,
-    ...openimRest,
-    lastMessage,
-  };
+  // Spread existing first so peerType (not in ConversationItem) is preserved
+  return { ...existing, ...openimRest, lastMessage };
 };
 
 export const getConversationID = (
@@ -81,3 +82,29 @@ export const sortConversation = (map: Record<string, DConversationItem>) => {
   );
   return { map, list };
 };
+
+export const generateContentBasedOnMessageType = (
+  contentType: MessageType,
+  plainText?: string
+) => {
+  switch (contentType) {
+    case MessageType.TextMessage:
+    case MessageType.QuoteMessage:
+    case MessageType.LogTextMessage:
+      return plainText || '';
+    case MessageType.PictureMessage:
+      return trans('msg_type_image');
+    case MessageType.VoiceMessage:
+      return trans('msg_type_voice');
+    case MessageType.VideoMessage:
+      return trans('msg_type_video');
+    case MessageType.FileMessage:
+      return trans('msg_type_file');
+    case MessageType.UrlTextMessage:
+      return trans('msg_type_link');
+    case MessageType.RevokeMessage:
+      return trans('revoked');
+    default:
+      return '';
+  }
+};

package/src/utils/device.ts

@@ -0,0 +1,73 @@
+import ImagePicker from 'react-native-image-crop-picker';
+
+const DeviceUtils = {
+  openImagePicker: async (multiple: boolean = false) => {
+    try {
+      const result = await ImagePicker.openPicker({
+        // cropping: true,
+        mediaType: 'any',
+        compressImageQuality: 0.8,
+        multiple,
+      });
+
+      const images = Array.isArray(result) ? result : [result];
+      console.log('[Image Picker] Selected:', {
+        count: images.length,
+        images: images.map((img) => ({
+          filename: img.filename,
+          size: img.size,
+          width: img.width,
+          height: img.height,
+        })),
+      });
+      return images;
+    } catch (error: any) {
+      // User cancelled or permission denied - don't log as error
+      if (
+        error.code === 'E_PICKER_CANCELLED' ||
+        error.code === 'E_NO_LIBRARY_PERMISSION'
+      ) {
+        console.log('[Image Picker] Cancelled or permission denied');
+        return null;
+      }
+      console.error('[Image Picker] Error:', error);
+      throw error;
+    }
+  },
+
+  openVideoPicker: async (multiple: boolean = false) => {
+    try {
+      const result = await ImagePicker.openPicker({
+        mediaType: 'video',
+        multiple,
+      });
+
+      const videos = Array.isArray(result) ? result : [result];
+      console.log('[Video Picker] Selected:', {
+        count: videos.length,
+        videos: videos.map((vid) => ({
+          filename: vid.filename,
+          size: vid.size,
+          width: vid.width,
+          height: vid.height,
+          duration: vid.duration,
+        })),
+      });
+      return videos;
+    } catch (error: any) {
+      // User cancelled or permission denied - don't log as error
+      if (
+        error.code === 'E_PICKER_CANCELLED' ||
+        error.code === 'E_NO_LIBRARY_PERMISSION'
+      ) {
+        console.log('[Video Picker] Cancelled or permission denied');
+        return null;
+      }
+      console.error('[Video Picker] Error:', error);
+      throw error;
+    }
+  },
+};
+
+export default DeviceUtils;
+export { DeviceUtils };

package/src/utils/imageUrlOptimizer.ts

@@ -0,0 +1,56 @@
+/**
+ * Optimize image URLs for chat by resizing and converting to WebP
+ * Reduces memory usage and improves loading performance
+ */
+
+interface OptimizeImageUrlOptions {
+  width?: number;
+  height?: number;
+  convertToWebp?: boolean;
+}
+
+const DEFAULT_CHAT_IMAGE_WIDTH = 180;
+const DEFAULT_CHAT_IMAGE_HEIGHT = 180;
+
+const CDN_REGEX = /^.*(cdn)(stg|dev|beta)?(.droppii)/;
+
+export const optimizeImageUrl = (
+  url: string | undefined,
+  options: OptimizeImageUrlOptions = {}
+): string => {
+  if (!url) {
+    return '';
+  }
+
+  // Don't optimize if not a CDN URL
+  if (!url.startsWith('http') || !url.match(CDN_REGEX)) {
+    return url;
+  }
+
+  const {
+    width = DEFAULT_CHAT_IMAGE_WIDTH,
+    height = DEFAULT_CHAT_IMAGE_HEIGHT,
+    convertToWebp = true,
+  } = options;
+
+  const domainRegex = /^(https?:\/\/[^/]+)/;
+  const domainMatches = url.match(domainRegex);
+
+  if (!domainMatches || domainMatches.length < 2) {
+    return url;
+  }
+
+  const domain = domainMatches[1];
+  const restOfUrl = url.replace(domain as string, '');
+
+  // Build optimized URL: domain/cache/WIDTHxHEIGHT/path.webp
+  let optimizedUrl = `${domain}/cache/${Math.round(width)}x${Math.round(height)}${restOfUrl}`;
+
+  if (convertToWebp && !restOfUrl.endsWith('.webp')) {
+    optimizedUrl += '.webp';
+  }
+
+  return optimizedUrl;
+};
+
+export default optimizeImageUrl;

package/src/utils/imageUtils.ts

@@ -0,0 +1,76 @@
+import type { ImageFile } from '../types/imageUpload';
+
+export const generateUUID = (): string => {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+};
+
+export const isVideoFile = (filename: string | undefined): boolean => {
+  if (!filename) return false;
+  const mimeType = getMimeType(filename);
+  return mimeType.startsWith('video/');
+};
+
+// Best detection: check MIME type from picker response
+export const isVideoFromPicker = (pickedItem: any): boolean => {
+  const mime = pickedItem?.mime;
+  if (!mime) return false;
+  return mime.startsWith('video/');
+};
+
+export const getMimeType = (fileName: string): string => {
+  const ext = fileName.split('.').pop()?.toLowerCase();
+  const mimeMap: Record<string, string> = {
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    png: 'image/png',
+    webp: 'image/webp',
+    mp4: 'video/mp4',
+    mov: 'video/quicktime',
+    avi: 'video/x-msvideo',
+    mkv: 'video/x-matroska',
+    webm: 'video/webm',
+    m4v: 'video/mp4',
+    flv: 'video/x-flv',
+    wmv: 'video/x-ms-wmv',
+    mp3: 'audio/mpeg',
+    wav: 'audio/wav',
+    m4a: 'audio/mp4',
+    aac: 'audio/aac',
+    flac: 'audio/flac',
+    ogg: 'audio/ogg',
+    pdf: 'application/pdf',
+    doc: 'application/msword',
+    docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    xls: 'application/vnd.ms-excel',
+    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    zip: 'application/zip',
+  };
+  return mimeMap[ext || ''] || 'application/octet-stream';
+};
+
+export const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+};
+
+export const validateImageFile = (file: ImageFile): string | null => {
+  const MAX_SIZE = 5 * 1024 * 1024;
+
+  if (file.size > MAX_SIZE) {
+    return `Image too large. Max ${formatFileSize(MAX_SIZE)}`;
+  }
+
+  const validMimes = ['image/jpeg', 'image/png', 'image/webp'];
+  if (!validMimes.includes(file.mime)) {
+    return 'Unsupported format. Only JPEG, PNG, WebP';
+  }
+
+  return null;
+};
+
+export const getImageUploadEndpoint = (baseUrl: string): string => {
+  return `${baseUrl}?isPublic=true&path=livechat`;
+};

package/src/utils/legendListMessage.ts

@@ -1,7 +1,5 @@
 import { MessageType } from '@droppii/openim-rn-client-sdk';
 import type { DMessageItem } from '../types/chat';
-import { resolveChatMessageType } from './resolveMessageType';
-import type { DChatMessageType } from '../types/message';
 
 /**
  * Extract message text based on content type
@@ -41,7 +39,6 @@ export const getMessageText = (message: DMessageItem): string => {
 export interface PrecomputedMessageData {
   messageId: string;
   dayStart: boolean;
-  messageType: DChatMessageType;
   createdAt: number;
 }
 
@@ -66,12 +63,10 @@ export const precomputeLegendListData = (
 
     const createdAt = message.sendTime || message.createTime;
     const day = new Date(createdAt).getDate();
-    const messageType = resolveChatMessageType(message);
 
     dataMap.set(messageId, {
       messageId,
       dayStart: lastDay !== day,
-      messageType,
       createdAt,
     });
 

package/src/utils/message.ts

@@ -1,9 +1,9 @@
-import { SessionType, type MessageItem } from '@droppii/openim-rn-client-sdk';
 import {
-  DChatType,
-  type DConversationItem,
-  type DMessageItem,
-} from '../types/chat';
+  PeerType,
+  SessionType,
+  type MessageItem,
+} from '@droppii/openim-rn-client-sdk';
+import { type DConversationItem, type DMessageItem } from '../types/chat';
 import { getConversationID } from './conversation';
 
 const getMessageTime = (message: DMessageItem) =>
@@ -129,14 +129,12 @@ export const belongsToConversation = (
 export const getReceiverId = (conversation?: DConversationItem) => {
   if (conversation == null) return { groupID: '', recvID: '' };
 
-  const isGroupChat = conversation.chatType === DChatType.GROUP;
-  if (isGroupChat) {
-    const isBot = conversation.chatCategory?.includes('BOT');
-    const groupID = isBot
-      ? conversation.conversationId?.slice(3) // Remove sg_
-      : conversation.groupID;
+  if (conversation.peerType === PeerType.Group) {
+    // Group conversation: groupID is embedded after the "sg_" prefix
+    const groupID =
+      conversation.groupID || conversation.conversationID.slice(3);
     return { groupID: groupID ?? '', recvID: '' };
   }
 
-  return { groupID: '', recvID: conversation.peer.id ?? '' };
+  return { groupID: '', recvID: conversation.userID ?? '' };
 };

package/src/utils/resolveMessageType.ts

@@ -30,6 +30,8 @@ export const resolveChatMessageType = (
       return DChatMessageType.Video;
     case MessageType.FileMessage:
       return DChatMessageType.File;
+    case 107: // MergerMessage (merged/grouped messages)
+      return DChatMessageType.Merged;
     case MessageType.CustomMessage: {
       const customType = parseCustomDataType(message);
 

package/src/utils/ui.ts

@@ -0,0 +1,19 @@
+import { Alert } from 'react-native';
+
+interface ToastConfig {
+  title?: string;
+  message?: string;
+  theme?: 'success' | 'danger' | 'warning' | 'info';
+}
+
+const UIUtils = {
+  toast: {
+    open: (config: ToastConfig) => {
+      const { title = 'Message', message = '' } = config;
+      Alert.alert(title, message);
+    },
+  },
+};
+
+export default UIUtils;
+export { UIUtils };

package/src/utils/url.ts

@@ -1,5 +1,5 @@
-const URL_REGEX = /https?:\/\/[^\s]+/i;
+const URL_REGEX = /\bhttps?:\/\/[^\s<>"']*[^\s<>"',.!?()[\]{}]/g;
 
-export function extractFirstUrl(text: string): string | undefined {
-  return text.match(URL_REGEX)?.[0];
+export function extractUrls(text: string): string[] {
+  return text.match(URL_REGEX) ?? [];
 }

package/src/utils/videoThumbnail.ts

@@ -0,0 +1,85 @@
+import RNFS from 'react-native-fs';
+import { createThumbnail } from 'react-native-create-thumbnail';
+
+interface ThumbnailOptions {
+  time?: number; // timestamp in milliseconds (default: 0)
+  quality?: number; // 0-100 (default: 100)
+}
+
+interface ThumbnailResult {
+  path: string;
+  width: number;
+  height: number;
+}
+
+export const VideoThumbnailUtil = {
+  generateThumbnail: async (
+    videoPath: string,
+    options: ThumbnailOptions = {}
+  ): Promise<ThumbnailResult | null> => {
+    const { time = 1000, quality = 80 } = options; // time in milliseconds
+
+    try {
+      console.log('[VideoThumbnail] Generating thumbnail', {
+        videoPath,
+        timeMs: time,
+        quality,
+      });
+
+      const result = await createThumbnail({
+        url: videoPath,
+        timeStamp: time,
+        format: 'jpeg',
+        dirSize: 100,
+        cacheName: 'video-thumbnails',
+      });
+
+      console.log('✅ [VideoThumbnail] THUMBNAIL PATH:', result.path);
+      console.log('[VideoThumbnail] Thumbnail generated', {
+        path: result.path,
+        width: result.width || 0,
+        height: result.height || 0,
+      });
+
+      return {
+        path: result.path,
+        width: result.width || 0,
+        height: result.height || 0,
+      };
+    } catch (error) {
+      console.error('[VideoThumbnail] Failed to generate thumbnail', error);
+      return null;
+    }
+  },
+
+  cleanupThumbnail: async (thumbnailPath: string): Promise<void> => {
+    try {
+      if (!thumbnailPath) return;
+      await RNFS.unlink(thumbnailPath);
+      console.log('[VideoThumbnail] Cleaned up:', thumbnailPath);
+    } catch (err) {
+      console.warn('[VideoThumbnail] Cleanup failed:', err);
+    }
+  },
+
+  batchGenerateThumbnails: async (
+    videoPaths: string[],
+    options: ThumbnailOptions = {}
+  ): Promise<ThumbnailResult[]> => {
+    const results: ThumbnailResult[] = [];
+
+    for (const videoPath of videoPaths) {
+      const thumbnail = await VideoThumbnailUtil.generateThumbnail(
+        videoPath,
+        options
+      );
+      if (thumbnail) {
+        results.push(thumbnail);
+      }
+    }
+
+    return results;
+  },
+};
+
+export default VideoThumbnailUtil;