@droppii-org/chat-mobile 0.2.6 → 0.2.8

package/lib/typescript/src/types/chat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat.d.ts","sourceRoot":"","sources":["../../../../src/types/chat.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"chat.d.ts","sourceRoot":"","sources":["../../../../src/types/chat.ts"],"names":[],"mappings":"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"}

package/lib/typescript/src/types/common.d.ts

@@ -2,5 +2,6 @@ export interface IUrlMetadata {
     title?: string;
     description?: string;
     image?: string;
+    url?: string;
 }
 //# sourceMappingURL=common.d.ts.map

package/lib/typescript/src/types/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/types/common.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/types/common.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd"}

package/lib/typescript/src/types/imageUpload.d.ts

@@ -0,0 +1,26 @@
+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;
+}
+//# sourceMappingURL=imageUpload.d.ts.map

package/lib/typescript/src/types/imageUpload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageUpload.d.ts","sourceRoot":"","sources":["../../../../src/types/imageUpload.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB"}

package/lib/typescript/src/types/message.d.ts

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

package/lib/typescript/src/types/message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../../src/types/message.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB;;;;;;;;CAQnB,CAAC;AAEX,MAAM,MAAM,gBAAgB,GAC1B,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAE3D,eAAO,MAAM,wBAAwB;;;CAG3B,CAAC"}
+{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../../src/types/message.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB;;;;;;;;;CASnB,CAAC;AAEX,MAAM,MAAM,gBAAgB,GAC1B,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAE3D,eAAO,MAAM,wBAAwB;;;CAG3B,CAAC"}

package/lib/typescript/src/utils/chatImageDimens.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Chat-specific image dimensions for optimal display and memory usage
+ * Responsive to device type (tablet/mobile) and pixel ratio
+ */
+export declare enum CHAT_IMAGE_VIEW_SOURCE {
+    MessageListThumbnail = "MessageListThumbnail",
+    MessageDetailBubble = "MessageDetailBubble",
+    ImagePreviewSmall = "ImagePreviewSmall",
+    ImagePreviewMedium = "ImagePreviewMedium",
+    ImagePreviewLarge = "ImagePreviewLarge"
+}
+interface ImageDimension {
+    width: number;
+    height: number;
+}
+declare class ChatImageDimens {
+    private static instance;
+    private static factor;
+    private static regexCDN;
+    private static dimens;
+    constructor(factor: number);
+    private calculateDimensions;
+    static getInstance(): ChatImageDimens;
+    static updateFactor(factor: number): void;
+    static getDimensions(source: CHAT_IMAGE_VIEW_SOURCE): ImageDimension;
+    static getOptimizedImageUrl(url: string | undefined, source: CHAT_IMAGE_VIEW_SOURCE): string;
+    /**
+     * Get optimized image URL with custom dimensions (generic approach)
+     * Useful for dynamic sizing based on actual content
+     */
+    static getOptimizedImageUrlWithDimensions(url: string | undefined, width: number, height: number): string;
+}
+export default ChatImageDimens;
+//# sourceMappingURL=chatImageDimens.d.ts.map

package/lib/typescript/src/utils/chatImageDimens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatImageDimens.d.ts","sourceRoot":"","sources":["../../../../src/utils/chatImageDimens.ts"],"names":[],"mappings":"AAGA;;;GAGG;AAEH,oBAAY,sBAAsB;IAChC,oBAAoB,yBAAyB;IAC7C,mBAAmB,wBAAwB;IAC3C,iBAAiB,sBAAsB;IACvC,kBAAkB,uBAAuB;IACzC,iBAAiB,sBAAsB;CACxC;AAED,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAsDD,cAAM,eAAe;IACnB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAkB;IACzC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAa;IAClC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAuC;IAC9D,OAAO,CAAC,MAAM,CAAC,MAAM,CAE4B;gBAErC,MAAM,EAAE,MAAM;IAK1B,OAAO,CAAC,mBAAmB;WAeb,WAAW;WAOX,YAAY,CAAC,MAAM,EAAE,MAAM;WAO3B,aAAa,CAAC,MAAM,EAAE,sBAAsB,GAAG,cAAc;WAO7D,oBAAoB,CAChC,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,MAAM,EAAE,sBAAsB,GAC7B,MAAM;IAaT;;;OAGG;WACW,kCAAkC,CAC9C,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACb,MAAM;CA6BV;AAED,eAAe,eAAe,CAAC"}

package/lib/typescript/src/utils/conversation.d.ts

@@ -1,11 +1,12 @@
-import { SessionType, type ConversationItem } from '@droppii/openim-rn-client-sdk';
+import { MessageType, SessionType, type ConversationItem } from '@droppii/openim-rn-client-sdk';
 import { type DConversationItem } from '../types/chat';
 export declare const conversationCompare: (a: ConversationItem, b: ConversationItem) => number;
 export declare const dConversationCompare: (a: DConversationItem, b: DConversationItem) => number;
-export declare const mergeOpenIMIntoConversation: (droppii: DConversationItem, openim: ConversationItem) => DConversationItem;
+export declare const mergeOpenIMIntoConversation: (existing: DConversationItem, openim: ConversationItem) => DConversationItem;
 export declare const getConversationID: (sessionType: SessionType, senderID?: string, receiverID?: string) => string;
 export declare const sortConversation: (map: Record<string, DConversationItem>) => {
     map: Record<string, DConversationItem>;
     list: string[];
 };
+export declare const generateContentBasedOnMessageType: (contentType: MessageType, plainText?: string) => string;
 //# sourceMappingURL=conversation.d.ts.map

package/lib/typescript/src/utils/conversation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation.d.ts","sourceRoot":"","sources":["../../../../src/utils/conversation.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACtB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,KAAK,iBAAiB,EAAqB,MAAM,eAAe,CAAC;AAE1E,eAAO,MAAM,mBAAmB,GAC9B,GAAG,gBAAgB,EACnB,GAAG,gBAAgB,WAcpB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,GAAG,iBAAiB,EACpB,GAAG,iBAAiB,WAWrB,CAAC;AAEF,eAAO,MAAM,2BAA2B,GACtC,SAAS,iBAAiB,EAC1B,QAAQ,gBAAgB,KACvB,iBAkBF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,aAAa,WAAW,EACxB,WAAW,MAAM,EACjB,aAAa,MAAM,WAUpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC;;;CAKtE,CAAC"}
+{"version":3,"file":"conversation.d.ts","sourceRoot":"","sources":["../../../../src/utils/conversation.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,WAAW,EACX,KAAK,gBAAgB,EACtB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,KAAK,iBAAiB,EAAqB,MAAM,eAAe,CAAC;AAG1E,eAAO,MAAM,mBAAmB,GAC9B,GAAG,gBAAgB,EACnB,GAAG,gBAAgB,WAcpB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,GAAG,iBAAiB,EACpB,GAAG,iBAAiB,WAcrB,CAAC;AAEF,eAAO,MAAM,2BAA2B,GACtC,UAAU,iBAAiB,EAC3B,QAAQ,gBAAgB,KACvB,iBAcF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,aAAa,WAAW,EACxB,WAAW,MAAM,EACjB,aAAa,MAAM,WAUpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC;;;CAKtE,CAAC;AAEF,eAAO,MAAM,iCAAiC,GAC5C,aAAa,WAAW,EACxB,YAAY,MAAM,WAsBnB,CAAC"}

package/lib/typescript/src/utils/device.d.ts

@@ -0,0 +1,7 @@
+declare const DeviceUtils: {
+    openImagePicker: (multiple?: boolean) => Promise<(import("react-native-image-crop-picker").Image & any[]) | (import("react-native-image-crop-picker").Video & any[]) | import("react-native-image-crop-picker").ImageOrVideo[]>;
+    openVideoPicker: (multiple?: boolean) => Promise<(import("react-native-image-crop-picker").Video & any[]) | import("react-native-image-crop-picker").Video[]>;
+};
+export default DeviceUtils;
+export { DeviceUtils };
+//# sourceMappingURL=device.d.ts.map

package/lib/typescript/src/utils/device.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../../../src/utils/device.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW;iCACmB,OAAO;iCAkCP,OAAO;CAgC1C,CAAC;AAEF,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/lib/typescript/src/utils/imageUrlOptimizer.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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;
+}
+export declare const optimizeImageUrl: (url: string | undefined, options?: OptimizeImageUrlOptions) => string;
+export default optimizeImageUrl;
+//# sourceMappingURL=imageUrlOptimizer.d.ts.map

package/lib/typescript/src/utils/imageUrlOptimizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageUrlOptimizer.d.ts","sourceRoot":"","sources":["../../../../src/utils/imageUrlOptimizer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAOD,eAAO,MAAM,gBAAgB,GAC3B,KAAK,MAAM,GAAG,SAAS,EACvB,UAAS,uBAA4B,KACpC,MAkCF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/typescript/src/utils/imageUtils.d.ts

@@ -0,0 +1,9 @@
+import type { ImageFile } from '../types/imageUpload';
+export declare const generateUUID: () => string;
+export declare const isVideoFile: (filename: string | undefined) => boolean;
+export declare const isVideoFromPicker: (pickedItem: any) => boolean;
+export declare const getMimeType: (fileName: string) => string;
+export declare const formatFileSize: (bytes: number) => string;
+export declare const validateImageFile: (file: ImageFile) => string | null;
+export declare const getImageUploadEndpoint: (baseUrl: string) => string;
+//# sourceMappingURL=imageUtils.d.ts.map

package/lib/typescript/src/utils/imageUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/imageUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEtD,eAAO,MAAM,YAAY,QAAO,MAE/B,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,GAAG,SAAS,KAAG,OAI1D,CAAC;AAGF,eAAO,MAAM,iBAAiB,GAAI,YAAY,GAAG,KAAG,OAInD,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,KAAG,MA6B9C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,MAM9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,KAAG,MAAM,GAAG,IAa5D,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,SAAS,MAAM,KAAG,MAExD,CAAC"}

package/lib/typescript/src/utils/legendListMessage.d.ts

@@ -1,5 +1,4 @@
 import type { DMessageItem } from '../types/chat';
-import type { DChatMessageType } from '../types/message';
 /**
  * Extract message text based on content type
  */
@@ -7,7 +6,6 @@ export declare const getMessageText: (message: DMessageItem) => string;
 export interface PrecomputedMessageData {
     messageId: string;
     dayStart: boolean;
-    messageType: DChatMessageType;
     createdAt: number;
 }
 /**

package/lib/typescript/src/utils/legendListMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"legendListMessage.d.ts","sourceRoot":"","sources":["../../../../src/utils/legendListMessage.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,SAAS,YAAY,KAAG,MA8BtD,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,YAAY,EAAE,KACvB,GAAG,CAAC,MAAM,EAAE,sBAAsB,CA0BpC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,UAAU,YAAY,EAAE,KACvB,GAAG,CAAC,MAAM,EAAE,OAAO,CAYrB,CAAC"}
+{"version":3,"file":"legendListMessage.d.ts","sourceRoot":"","sources":["../../../../src/utils/legendListMessage.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,SAAS,YAAY,KAAG,MA8BtD,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,YAAY,EAAE,KACvB,GAAG,CAAC,MAAM,EAAE,sBAAsB,CAwBpC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,UAAU,YAAY,EAAE,KACvB,GAAG,CAAC,MAAM,EAAE,OAAO,CAYrB,CAAC"}

package/lib/typescript/src/utils/message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../../src/utils/message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,YAAY,EAClB,MAAM,eAAe,CAAC;AASvB,eAAO,MAAM,aAAa,GACxB,SAAS,YAAY,EAAE,EACvB,UAAU,YAAY,EAAE,KACvB,YAAY,EAad,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,SAAS,WAAW,GAAG,MAAM,KAC5B,WAYF,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,wBAAwB,GACnC,SAAS;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,kBAAkB,YAAY,KAC7B,MAMF,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,UAAU,YAAY,EAAE,KACvB,uBAAuB,GAAG,IAkB5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,SAAS,YAAY,EAAE,EACvB,UAAU,YAAY,EAAE,KACvB,OASF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,SAAS,WAAW,EACpB,gBAAgB,MAAM,KACrB,OAuBF,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,eAAe,iBAAiB;;;CAa7D,CAAC"}
+{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../../src/utils/message.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAS1E,eAAO,MAAM,aAAa,GACxB,SAAS,YAAY,EAAE,EACvB,UAAU,YAAY,EAAE,KACvB,YAAY,EAad,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,SAAS,WAAW,GAAG,MAAM,KAC5B,WAYF,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,wBAAwB,GACnC,SAAS;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,kBAAkB,YAAY,KAC7B,MAMF,CAAC;AAEF,eAAO,MAAM,0BAA0B,GACrC,UAAU,YAAY,EAAE,KACvB,uBAAuB,GAAG,IAkB5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,SAAS,YAAY,EAAE,EACvB,UAAU,YAAY,EAAE,KACvB,OASF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,SAAS,WAAW,EACpB,gBAAgB,MAAM,KACrB,OAuBF,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,eAAe,iBAAiB;;;CAW7D,CAAC"}

package/lib/typescript/src/utils/resolveMessageType.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolveMessageType.d.ts","sourceRoot":"","sources":["../../../../src/utils/resolveMessageType.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAA4B,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAgB9E,eAAO,MAAM,sBAAsB,GACjC,SAAS,YAAY,KACpB,gBA4BF,CAAC"}
+{"version":3,"file":"resolveMessageType.d.ts","sourceRoot":"","sources":["../../../../src/utils/resolveMessageType.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAA4B,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAgB9E,eAAO,MAAM,sBAAsB,GACjC,SAAS,YAAY,KACpB,gBA8BF,CAAC"}

package/lib/typescript/src/utils/ui.d.ts

@@ -0,0 +1,13 @@
+interface ToastConfig {
+    title?: string;
+    message?: string;
+    theme?: 'success' | 'danger' | 'warning' | 'info';
+}
+declare const UIUtils: {
+    toast: {
+        open: (config: ToastConfig) => void;
+    };
+};
+export default UIUtils;
+export { UIUtils };
+//# sourceMappingURL=ui.d.ts.map

package/lib/typescript/src/utils/ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../src/utils/ui.ts"],"names":[],"mappings":"AAEA,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;CACnD;AAED,QAAA,MAAM,OAAO;;uBAEM,WAAW;;CAK7B,CAAC;AAEF,eAAe,OAAO,CAAC;AACvB,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/lib/typescript/src/utils/url.d.ts

@@ -1,2 +1,2 @@
-export declare function extractFirstUrl(text: string): string | undefined;
+export declare function extractUrls(text: string): string[];
 //# sourceMappingURL=url.d.ts.map

package/lib/typescript/src/utils/url.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../../../src/utils/url.ts"],"names":[],"mappings":"AAEA,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAEhE"}
+{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../../../src/utils/url.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAElD"}

package/lib/typescript/src/utils/videoThumbnail.d.ts

@@ -0,0 +1,16 @@
+interface ThumbnailOptions {
+    time?: number;
+    quality?: number;
+}
+interface ThumbnailResult {
+    path: string;
+    width: number;
+    height: number;
+}
+export declare const VideoThumbnailUtil: {
+    generateThumbnail: (videoPath: string, options?: ThumbnailOptions) => Promise<ThumbnailResult | null>;
+    cleanupThumbnail: (thumbnailPath: string) => Promise<void>;
+    batchGenerateThumbnails: (videoPaths: string[], options?: ThumbnailOptions) => Promise<ThumbnailResult[]>;
+};
+export default VideoThumbnailUtil;
+//# sourceMappingURL=videoThumbnail.d.ts.map

package/lib/typescript/src/utils/videoThumbnail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"videoThumbnail.d.ts","sourceRoot":"","sources":["../../../../src/utils/videoThumbnail.ts"],"names":[],"mappings":"AAGA,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,kBAAkB;mCAEhB,MAAM,YACR,gBAAgB,KACxB,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC;sCAoCM,MAAM,KAAG,OAAO,CAAC,IAAI,CAAC;0CAWhD,MAAM,EAAE,YACX,gBAAgB,KACxB,OAAO,CAAC,eAAe,EAAE,CAAC;CAe9B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@droppii-org/chat-mobile",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Droppii chat mobile",
   "keywords": [
     "react-native",
@@ -59,6 +59,7 @@
     "example": "yarn workspace @droppii-org/chat-mobile-example",
     "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
     "prepare": "bob build",
+    "postinstall": "patch-package",
     "typecheck": "tsc -p tsconfig.build.json 2>&1 | grep -E 'src/.*error' || echo 'Typecheck passed (external dependency warnings ignored)'",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "test": "jest",
@@ -67,14 +68,21 @@
     "build:web": "vite build"
   },
   "dependencies": {
-    "@droppii/openim-rn-client-sdk": "git+ssh://git@github.com/droppii/open-im-sdk-reactnative.git#v1.0.0-rc7",
+    "@droppii/openim-rn-client-sdk": "git+ssh://git@github.com/droppii/open-im-sdk-reactnative.git#v1.0.0-rc8",
     "@legendapp/list": "^3.0.6",
     "axios": "^1.16.1",
     "lodash": "^4.18.1",
+    "react-native-blob-util": "^0.24.10",
+    "react-native-create-thumbnail": "^2.2.0",
     "react-native-fs": "^2.20.0",
     "react-native-gifted-chat": "^3.3.3",
+    "react-native-image-crop-picker": "^0.51.1",
     "react-native-permissions": "^5.6.0",
-    "react-native-tab-view": "^4.3.1"
+    "react-native-photo-view": "git+ssh://git@github.com/droppii/react-native-photo-view.git",
+    "react-native-snap-carousel": "3.9.0",
+    "react-native-tab-view": "^4.3.1",
+    "react-native-video": "6.19.2",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^20.5.0",
@@ -93,15 +101,19 @@
     "@types/lodash": "^4",
     "@types/react": "^19.2.0",
     "@types/react-native": "^0.73.0",
+    "@types/react-native-photo-view": "^1.5.4",
+    "@types/react-native-snap-carousel": "^3.8.5",
     "@types/react-query": "^1.2.9",
     "commitlint": "^20.5.0",
     "del-cli": "^7.0.0",
+    "deprecated-react-native-prop-types": "5.0.0",
     "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-ft-flow": "^3.0.11",
     "eslint-plugin-prettier": "^5.5.5",
     "jest": "^30.3.0",
     "lefthook": "^2.1.4",
+    "patch-package": "^8.0.1",
     "prettier": "^3.8.1",
     "react-native": "^0.86.0",
     "react-native-builder-bob": "^0.41.0",

package/src/components/AttachmentPreview.tsx

@@ -0,0 +1,304 @@
+import { memo } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import { KContainer, KImage, KColors, KLabel } from '@droppii/libs';
+
+type AttachmentType = 'image' | 'video' | 'audio' | 'document' | 'file';
+
+interface AttachmentMetadata {
+  path: string;
+  filename?: string;
+  size?: number;
+  duration?: number;
+  mimeType?: string;
+  width?: number;
+  height?: number;
+}
+
+interface AttachmentItem {
+  metadata: AttachmentMetadata;
+  uploadProgress: number;
+  error: string | null;
+  isUploading: boolean;
+  uploadedUrl?: string;
+  thumbnailUrl?: string;
+}
+
+interface AttachmentPreviewProps {
+  visible: boolean;
+  attachments?: Array<AttachmentItem & { type: AttachmentType }>;
+  onRemove: (type: AttachmentType, index: number) => void;
+}
+
+const formatDuration = (seconds: number): string => {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+};
+
+const getAttachmentIcon = (type: AttachmentType): string => {
+  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 = memo(
+  ({ visible, attachments, onRemove }: AttachmentPreviewProps) => {
+    if (!visible || !attachments?.length) {
+      return null;
+    }
+
+    return (
+      <KContainer.View
+        paddingH="0.75rem"
+        // paddingV="0.75rem"
+        brW={1}
+        brC={KColors.palette.gray.w100}
+        background={KColors.white}
+        style={styles.container}
+      >
+        <KContainer.View row alignItems minH={70}>
+          <KContainer.View flex>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              scrollEventThrottle={16}
+              contentContainerStyle={{ alignItems: 'center' }}
+            >
+              {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 (
+                  <KContainer.View key={`${type}-${index}`}>
+                    <KContainer.View style={styles.thumbnail} center>
+                      {/* Video thumbnail */}
+                      {isVideo && thumbnailUrl && (
+                        <KImage.Base
+                          uri={thumbnailUrl}
+                          width={48}
+                          height={48}
+                          resizeMode="cover"
+                        />
+                      )}
+
+                      {/* Video placeholder (no thumbnail yet) */}
+                      {isVideo && !thumbnailUrl && (
+                        <KContainer.View
+                          style={[styles.videoBg, styles.videoThumbnail]}
+                        />
+                      )}
+
+                      {/* Image preview */}
+                      {isImage && (
+                        <KImage.Base
+                          uri={`file://${metadata.path}`}
+                          width={48}
+                          height={48}
+                        />
+                      )}
+
+                      {/* Show icon overlay for non-media files */}
+                      {!hasPreview && (
+                        <KContainer.View
+                          style={styles.iconOverlay}
+                          center
+                          background={KColors.palette.gray.w100}
+                        >
+                          <KImage.VectorIcons
+                            name={getAttachmentIcon(type)}
+                            provider="MaterialCommunityIcons"
+                            size={24}
+                            color={KColors.palette.primary.w400}
+                          />
+                        </KContainer.View>
+                      )}
+
+                      {/* Video duration badge */}
+                      {isVideo && metadata.duration && (
+                        <KContainer.View style={styles.durationBadge} center>
+                          <KLabel.Text
+                            typo="TextXsNormal"
+                            color={KColors.white}
+                            style={styles.durationText}
+                          >
+                            {formatDuration(metadata.duration / 1000)}
+                          </KLabel.Text>
+                        </KContainer.View>
+                      )}
+
+                      {/* Type icon for non-preview items */}
+                      {!hasPreview && (
+                        <KContainer.View style={styles.typeIcon} center>
+                          <KImage.VectorIcons
+                            name={getAttachmentIcon(type)}
+                            provider="MaterialCommunityIcons"
+                            size={14}
+                            color={KColors.white}
+                          />
+                        </KContainer.View>
+                      )}
+
+                      {/* Error state */}
+                      {error && (
+                        <KContainer.View style={styles.errorOverlay} center>
+                          <KImage.VectorIcons
+                            name="close-circle"
+                            provider="MaterialCommunityIcons"
+                            size={28}
+                            color={KColors.white}
+                          />
+                        </KContainer.View>
+                      )}
+
+                      {/* Progress overlay */}
+                      {isUploading && (
+                        <KContainer.View style={styles.progressOverlay} center>
+                          <KLabel.Text
+                            typo="TextSmNormal"
+                            color={KColors.white}
+                          >
+                            {uploadProgress}%
+                          </KLabel.Text>
+                        </KContainer.View>
+                      )}
+                    </KContainer.View>
+                    {/* Remove button */}
+                    <KContainer.Touchable
+                      style={styles.removeButton}
+                      center
+                      br="round"
+                      background={KColors.black}
+                      onPress={() => onRemove(type, index)}
+                      disabled={isUploading}
+                      hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                    >
+                      <KImage.VectorIcons
+                        name="close"
+                        provider="MaterialCommunityIcons"
+                        size={14}
+                        color={KColors.white}
+                      />
+                    </KContainer.Touchable>
+                  </KContainer.View>
+                );
+              })}
+            </ScrollView>
+          </KContainer.View>
+        </KContainer.View>
+      </KContainer.View>
+    );
+  }
+);
+
+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,
+  },
+});