@droppii-org/chat-mobile 0.2.7 → 0.2.8

package/src/services/imageUpload.ts

@@ -0,0 +1,162 @@
+import ReactNativeBlobUtil from 'react-native-blob-util';
+import RNFS from 'react-native-fs';
+import { getImageUploadEndpoint, getMimeType } from '../utils/imageUtils';
+import { getAuthToken } from './auth';
+import { getApiEndpoint } from '../config/api-endpoints';
+import { getBaseUrl } from '../config/configuration';
+import type {
+  ImageFile,
+  UploadedImage,
+  ImageUploadConfig,
+} from '../types/imageUpload';
+
+export namespace ImageUploadAPI {
+  export const uploadImageFile = async (
+    file: ImageFile,
+    onProgress?: (progress: number) => void
+  ): Promise<UploadedImage> => {
+    let token: string;
+    let uploadUrl: string;
+
+    try {
+      token = getAuthToken();
+      const relativePath = getApiEndpoint('imageUpload');
+      const baseUrl = getBaseUrl();
+
+      if (!baseUrl) {
+        throw new Error(
+          'Image upload base URL not configured. Call initChatSdk() with apiBaseUrl during app initialization.'
+        );
+      }
+
+      // Construct absolute URL for ReactNativeBlobUtil.fetch()
+      uploadUrl = getImageUploadEndpoint(`${baseUrl}${relativePath}`);
+    } catch (e) {
+      if (__DEV__) console.error('[ImageUploadAPI] Auth error:', e);
+      throw e;
+    }
+
+    return new Promise((resolve, reject) => {
+      ReactNativeBlobUtil.fetch(
+        'POST',
+        uploadUrl,
+        {
+          Authorization: `Bearer ${token}`,
+        },
+        [
+          {
+            name: 'files',
+            filename: file.filename,
+            data: ReactNativeBlobUtil.wrap(file.path),
+            type: getMimeType(file.filename),
+          },
+        ]
+      )
+        .uploadProgress((written, total) => {
+          const progress = Math.round((written / total) * 100);
+          onProgress?.(progress);
+        })
+        .then((response) => {
+          // Check for HTTP error status
+          const status = response.respInfo?.status;
+          if (status && status >= 400) {
+            if (__DEV__)
+              console.error('[ImageUploadAPI] Server error response', {
+                status,
+                data: response.data,
+              });
+            reject(new Error(`Upload failed with status ${status}`));
+            return;
+          }
+
+          if (!response.data || response.data.length === 0) {
+            if (__DEV__)
+              console.error('[ImageUploadAPI] Empty response', {
+                dataType: typeof response.data,
+                data: response.data,
+              });
+            reject(new Error('Empty response from server'));
+            return;
+          }
+
+          try {
+            const json = JSON.parse(response.data);
+            const uploaded = json.data?.[0] || json.files?.[0];
+            const imageUrl =
+              uploaded?.publicUrl || uploaded?.url || uploaded?.data;
+            if (imageUrl) {
+              resolve({
+                url: imageUrl,
+                name: uploaded?.fileName,
+                width: file.width,
+                height: file.height,
+                size: file.size,
+              });
+            } else {
+              if (__DEV__)
+                console.error('[ImageUploadAPI] No URL in response:', json);
+              reject(new Error('No URL in response'));
+            }
+          } catch (err) {
+            if (__DEV__) console.error('[ImageUploadAPI] Parse error:', err);
+            reject(new Error('Invalid response format'));
+          }
+        })
+        .catch((error) => {
+          if (__DEV__) console.error('[ImageUploadAPI] Fetch error:', error);
+          reject(error);
+        });
+    });
+  };
+
+  export const uploadImageQueue = async (
+    files: ImageFile[],
+    config: ImageUploadConfig = {},
+    onProgress?: (completed: number, total: number) => void
+  ): Promise<UploadedImage[]> => {
+    const { maxConcurrent = 2 } = config;
+    const results: UploadedImage[] = [];
+    const queue = [...files];
+    let activeCount = 0;
+
+    return new Promise((resolve, _reject) => {
+      const processNext = async () => {
+        if (queue.length === 0 && activeCount === 0) {
+          resolve(results);
+          return;
+        }
+
+        if (queue.length > 0 && activeCount < maxConcurrent) {
+          const file = queue.shift();
+          if (!file) return;
+
+          activeCount++;
+
+          try {
+            const result = await uploadImageFile(file);
+            results.push(result);
+            onProgress?.(results.length, files.length);
+          } catch (error) {
+            if (__DEV__)
+              console.error(`Failed to upload ${file.filename}:`, error);
+          } finally {
+            activeCount--;
+            processNext();
+          }
+        }
+      };
+
+      for (let i = 0; i < maxConcurrent && queue.length > 0; i++) {
+        processNext();
+      }
+    });
+  };
+
+  export const cleanupImageFile = async (filePath: string): Promise<void> => {
+    try {
+      await RNFS.unlink(filePath);
+    } catch (err) {
+      if (__DEV__) console.warn('Cleanup failed:', err);
+    }
+  };
+}

package/src/translation/resources/i18n.ts

@@ -1,12 +1,26 @@
 const i18nKey: Record<string, string> = {
-  thread_card_bot_crm_name: 'Droppii Hỗ Trợ',
-  thread_card_fallback_name: 'Người dùng',
-  msg_type_image: '[Hình ảnh]',
-  msg_type_voice: '[Tin nhắn thoại]',
-  msg_type_video: '[Video]',
-  msg_type_file: '[File đính kèm]',
-  msg_type_link: '[Liên kết]',
-  msg_type_revoke: 'Đã thu hồi tin nhắn',
+  'thread_card_bot_crm_name': 'Droppii Hỗ Trợ',
+  'thread_card_fallback_name': 'Người dùng',
+  'chat:image_preview': 'Xem trước ảnh',
+  'chat:image_too_large': 'Ảnh quá lớn. Tối đa 5MB',
+  'chat:image_sent': 'Đã gửi ảnh',
+  'chat:image_upload_failed': 'Lỗi tải ảnh',
+  'chat:failed_to_send_message': 'Không thể gửi tin nhắn. Thử lại?',
+  'chat:filename': 'Tên tệp',
+  'chat:file_size': 'Kích thước',
+  'chat:dimensions': 'Kích cỡ',
+  'chat:send': 'Gửi',
+  'chat:retry': 'Thử lại',
+  'chat:retry_failed_no_data': 'Không có dữ liệu để thử lại',
+  'chat:retry_failed': 'Thử lại thất bại',
+  'chat:upload_in_progress': 'Đang tải ảnh lên',
+  'chat:wait_or_cancel': 'Vui lòng chờ hoặc hủy bỏ',
+  'msg_type_image': '[Hình ảnh]',
+  'msg_type_voice': '[Tin nhắn thoại]',
+  'msg_type_video': '[Video]',
+  'msg_type_file': '[File đính kèm]',
+  'msg_type_link': '[Liên kết]',
+  'msg_type_revoke': 'Đã thu hồi tin nhắn',
 };
 
 export default {

package/src/types/attachment.ts

@@ -0,0 +1,85 @@
+export type AttachmentType = 'image' | 'video' | 'file' | 'audio';
+
+export interface BaseAttachment {
+  id: string;
+  type: AttachmentType;
+  sourceFile: {
+    path: string;
+    filename: string;
+    size: number;
+    mimeType: string;
+  };
+}
+
+export interface ImageAttachment extends BaseAttachment {
+  type: 'image';
+  metadata: {
+    width: number;
+    height: number;
+    orientation?: 'portrait' | 'landscape' | 'square';
+  };
+}
+
+export interface VideoAttachment extends BaseAttachment {
+  type: 'video';
+  metadata: {
+    width: number;
+    height: number;
+    duration: number;
+    thumbnail?: {
+      url: string;
+      width: number;
+      height: number;
+      size?: number;
+    };
+  };
+}
+
+export interface FileAttachment extends BaseAttachment {
+  type: 'file';
+  metadata: {
+    extension: string;
+    category: 'document' | 'spreadsheet' | 'presentation' | 'other';
+  };
+}
+
+export interface AudioAttachment extends BaseAttachment {
+  type: 'audio';
+  metadata: {
+    duration: number;
+    bitrate?: number;
+  };
+}
+
+export type Attachment =
+  | ImageAttachment
+  | VideoAttachment
+  | FileAttachment
+  | AudioAttachment;
+
+export interface AttachmentUploadStatus {
+  attachmentId: string;
+  state: 'pending' | 'uploading' | 'uploaded' | 'failed' | 'cancelled';
+  progress: number;
+  uploadedUrl?: string;
+  error?: string;
+  uploadedAt?: number;
+}
+
+export type BatchStrategy = 'individual' | 'merged' | 'grouped';
+
+export interface AttachmentSendOptions {
+  strategy: BatchStrategy;
+  includeCaption?: string;
+  uploadConcurrency?: number;
+  retryFailedUploads?: boolean;
+  maxRetries?: number;
+}
+
+export interface AttachmentSendResult {
+  success: boolean;
+  sentAttachmentIds: string[];
+  failedAttachmentIds: string[];
+  mergedMessageId?: string;
+  errors: Record<string, string>;
+}

package/src/types/attachmentHandler.ts

@@ -0,0 +1,31 @@
+import type { Attachment } from './attachment';
+// Imported from handlers to provide dispatch
+import { ImageAttachmentHandler } from '../services/attachmentHandlers/imageAttachmentHandler';
+import VideoAttachmentHandlerDefault from '../services/attachmentHandlers/videoAttachmentHandler';
+import FileAttachmentHandlerDefault from '../services/attachmentHandlers/fileAttachmentHandler';
+
+export interface IAttachmentHandler {
+  validate(
+    attachment: Attachment
+  ): { valid: true } | { valid: false; reason: string };
+
+  prepare?(attachment: Attachment): Promise<Attachment>;
+
+  buildPayload(attachment: Attachment, uploadedUrl: string): Promise<unknown>;
+}
+
+export function getAttachmentHandler(
+  type: Attachment['type']
+): IAttachmentHandler {
+  console.log('[getAttachmentHandler] Getting handler for type:', type);
+  switch (type) {
+    case 'image':
+      return ImageAttachmentHandler;
+    case 'video':
+      return VideoAttachmentHandlerDefault;
+    case 'file':
+      return FileAttachmentHandlerDefault;
+    default:
+      throw new Error(`No handler for attachment type: ${type}`);
+  }
+}

package/src/types/imageUpload.ts

@@ -0,0 +1,28 @@
+export interface ImageFile {
+  path: string;
+  filename: string;
+  size: number;
+  width: number;
+  height: number;
+  mime: string;
+}
+
+export interface UploadedImage {
+  url: string;
+  name: string;
+  width: number;
+  height: number;
+  size: number;
+}
+
+export interface ImageUploadConfig {
+  maxConcurrent?: number;
+  timeout?: number;
+  retryAttempts?: number;
+}
+
+export interface UploadProgress {
+  completed: number;
+  total: number;
+  percentage: number;
+}

package/src/types/message.ts

@@ -4,6 +4,7 @@ export const DChatMessageType = {
   Image: 'IMAGE',
   Video: 'VIDEO',
   File: 'FILE',
+  Merged: 'MERGED',
   Order: 'ORDER',
   Unsupported: 'UNSUPPORTED',
 } as const;

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