@droppii-org/chat-mobile 0.2.16 → 0.2.18

package/lib/typescript/src/hooks/useImageAttachment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useImageAttachment.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useImageAttachment.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAQ3E,UAAU,qBAAqB;IAC7B,KAAK,EAAE,WAAW,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,wBAAwB;IACvC,cAAc,EAAE,qBAAqB,EAAE,CAAC;IACxC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,kBAAkB,QAAO,wBAuSrC,CAAC"}
+{"version":3,"file":"useImageAttachment.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useImageAttachment.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAQ3E,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,WAAW,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,wBAAwB;IACvC,cAAc,EAAE,qBAAqB,EAAE,CAAC;IACxC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,kBAAkB,QAAO,wBAiTrC,CAAC"}

package/lib/typescript/src/screens/MediaView/VideoPlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../../../src/screens/MediaView/VideoPlayer.tsx"],"names":[],"mappings":"AAUA,OAAc,EAA0B,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAK/E,UAAU,KAAK;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAUD,QAAA,MAAM,WAAW,8CAAgB,KAAK,iCA8IpC,CAAC;AAGH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../../../src/screens/MediaView/VideoPlayer.tsx"],"names":[],"mappings":"AAUA,OAAc,EAA0B,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAK/E,UAAU,KAAK;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAUD,QAAA,MAAM,WAAW,8CAAgB,KAAK,iCA+IpC,CAAC;AAGH,eAAe,WAAW,CAAC"}

package/lib/typescript/src/screens/MediaView/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/screens/MediaView/index.tsx"],"names":[],"mappings":"AA+BA,UAAU,iBAAiB;IACzB,MAAM,EAAE,GAAG,EAAE,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,iBAAiB,GAAI,OAAO,iBAAiB,gCA0LlD,CAAC;AAIF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/screens/MediaView/index.tsx"],"names":[],"mappings":"AAgCA,UAAU,iBAAiB;IACzB,MAAM,EAAE,GAAG,EAAE,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,iBAAiB,GAAI,OAAO,iBAAiB,gCA0LlD,CAAC;AAIF,eAAe,iBAAiB,CAAC"}

package/lib/typescript/src/screens/chat-detail/ChatComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../../../src/screens/chat-detail/ChatComposer.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAajD,eAAO,MAAM,YAAY,+TAkBpB,iBAAiB,iCAgWrB,CAAC"}
+{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../../../src/screens/chat-detail/ChatComposer.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAejD,eAAO,MAAM,YAAY,+TAkBpB,iBAAiB,iCA6XrB,CAAC"}

package/lib/typescript/src/screens/chat-detail/ChatListLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatListLegend.d.ts","sourceRoot":"","sources":["../../../../../src/screens/chat-detail/ChatListLegend.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAW7C,eAAO,MAAM,cAAc,kNActB,aAAa,iCAmWjB,CAAC"}
+{"version":3,"file":"ChatListLegend.d.ts","sourceRoot":"","sources":["../../../../../src/screens/chat-detail/ChatListLegend.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAW7C,eAAO,MAAM,cAAc,kNActB,aAAa,iCA0WjB,CAAC"}

package/lib/typescript/src/screens/chat-detail/hooks/useAttachmentMapping.d.ts

@@ -0,0 +1,10 @@
+import type { ImageWithUploadStatus } from '../../../hooks/useImageAttachment';
+import type { FileWithUploadStatus } from '../../../hooks/useFileAttachment';
+import type { AttachmentItem } from '../../../types/attachment';
+type Props = {
+    selectedImages: ImageWithUploadStatus[];
+    selectedFiles: FileWithUploadStatus[];
+};
+export declare const useAttachmentMapping: ({ selectedImages, selectedFiles, }: Props) => AttachmentItem[];
+export {};
+//# sourceMappingURL=useAttachmentMapping.d.ts.map

package/lib/typescript/src/screens/chat-detail/hooks/useAttachmentMapping.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAttachmentMapping.d.ts","sourceRoot":"","sources":["../../../../../../src/screens/chat-detail/hooks/useAttachmentMapping.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGhE,KAAK,KAAK,GAAG;IACX,cAAc,EAAE,qBAAqB,EAAE,CAAC;IACxC,aAAa,EAAE,oBAAoB,EAAE,CAAC;CACvC,CAAC;AAwCF,eAAO,MAAM,oBAAoB,GAAI,oCAGlC,KAAK,qBAKP,CAAC"}

package/lib/typescript/src/screens/chat-detail/hooks/useAttachmentSendHandler.d.ts

@@ -1,4 +1,5 @@
 import type { DMessageItem } from '../../../types/chat';
+import type { FileWithUploadStatus } from '../../../hooks/useFileAttachment';
 interface AttachmentItem {
     image: any;
     uploadedUrl?: string;
@@ -8,15 +9,17 @@ interface AttachmentItem {
 }
 interface UseAttachmentSendHandlerProps {
     selectedImages: AttachmentItem[];
+    selectedFiles: FileWithUploadStatus[];
     sendAttachments: (items: any[], _: any, onMessageSent?: (message: DMessageItem) => void) => Promise<boolean>;
     clearAllImages: () => void;
+    clearAllFiles?: () => void;
     onSend?: () => void;
     onMessageSent?: (message: DMessageItem) => void;
     textMessage?: string;
     urlMetadata?: any;
     onSendText?: (text: string, urlMetadata?: any) => void;
 }
-export declare const useAttachmentSendHandler: ({ selectedImages, sendAttachments, clearAllImages, onSend, onMessageSent, textMessage, urlMetadata, onSendText, }: UseAttachmentSendHandlerProps) => {
+export declare const useAttachmentSendHandler: ({ selectedImages, selectedFiles, sendAttachments, clearAllImages, clearAllFiles, onSend, onMessageSent, textMessage, urlMetadata, onSendText, }: UseAttachmentSendHandlerProps) => {
     handleSend: () => Promise<void>;
 };
 export {};

package/lib/typescript/src/screens/chat-detail/hooks/useAttachmentSendHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAttachmentSendHandler.d.ts","sourceRoot":"","sources":["../../../../../../src/screens/chat-detail/hooks/useAttachmentSendHandler.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD,UAAU,cAAc;IACtB,KAAK,EAAE,GAAG,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,6BAA6B;IACrC,cAAc,EAAE,cAAc,EAAE,CAAC;IACjC,eAAe,EAAE,CACf,KAAK,EAAE,GAAG,EAAE,EACZ,CAAC,EAAE,GAAG,EACN,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,KAC5C,OAAO,CAAC,OAAO,CAAC,CAAC;IACtB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;CACxD;AAED,eAAO,MAAM,wBAAwB,GAAI,mHAStC,6BAA6B;;CAkT/B,CAAC"}
+{"version":3,"file":"useAttachmentSendHandler.d.ts","sourceRoot":"","sources":["../../../../../../src/screens/chat-detail/hooks/useAttachmentSendHandler.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAE7E,UAAU,cAAc;IACtB,KAAK,EAAE,GAAG,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,6BAA6B;IACrC,cAAc,EAAE,cAAc,EAAE,CAAC;IACjC,aAAa,EAAE,oBAAoB,EAAE,CAAC;IACtC,eAAe,EAAE,CACf,KAAK,EAAE,GAAG,EAAE,EACZ,CAAC,EAAE,GAAG,EACN,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,KAC5C,OAAO,CAAC,OAAO,CAAC,CAAC;IACtB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;CACxD;AAED,eAAO,MAAM,wBAAwB,GAAI,iJAWtC,6BAA6B;;CAoV/B,CAAC"}

package/lib/typescript/src/services/attachmentHandlers/fileAttachmentHandler.d.ts

@@ -5,10 +5,10 @@ interface FileElem {
     fileName: string;
     fileSize: number;
     fileType: string;
-    url: string;
+    sourceUrl: string;
 }
+export declare const MAX_FILE_SIZE: number;
 export declare class FileAttachmentHandler implements IAttachmentHandler {
-    private static readonly MAX_FILE_SIZE;
     validate(attachment: Attachment): {
         valid: true;
     } | {

package/lib/typescript/src/services/attachmentHandlers/fileAttachmentHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fileAttachmentHandler.d.ts","sourceRoot":"","sources":["../../../../../src/services/attachmentHandlers/fileAttachmentHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,wBAAwB,CAAC;AACzE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAExE,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,qBAAa,qBAAsB,YAAW,kBAAkB;IAC9D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAqB;IAE1D,QAAQ,CACN,UAAU,EAAE,UAAU,GACrB;QAAE,KAAK,EAAE,IAAI,CAAA;KAAE,GAAG;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;IAkC/C,YAAY,CAChB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,MAAM,GAClB,OAAO,CAAC,QAAQ,CAAC;CAsBrB;;AAED,wBAA2C"}
+{"version":3,"file":"fileAttachmentHandler.d.ts","sourceRoot":"","sources":["../../../../../src/services/attachmentHandlers/fileAttachmentHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,wBAAwB,CAAC;AACzE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAExE,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAGD,eAAO,MAAM,aAAa,QAAU,CAAC;AAErC,qBAAa,qBAAsB,YAAW,kBAAkB;IAC9D,QAAQ,CACN,UAAU,EAAE,UAAU,GACrB;QAAE,KAAK,EAAE,IAAI,CAAA;KAAE,GAAG;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;IAkC/C,YAAY,CAChB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,MAAM,GAClB,OAAO,CAAC,QAAQ,CAAC;CAsBrB;;AAED,wBAA2C"}

package/lib/typescript/src/services/attachmentHandlers/index.d.ts

@@ -1,5 +1,5 @@
 export declare function initializeAttachmentHandlers(): void;
 export { ImageAttachmentHandler } from './imageAttachmentHandler';
 export { default as VideoAttachmentHandler } from './videoAttachmentHandler';
-export { default as FileAttachmentHandler } from './fileAttachmentHandler';
+export { default as FileAttachmentHandler, MAX_FILE_SIZE, } from './fileAttachmentHandler';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/services/attachmentHandlers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/services/attachmentHandlers/index.ts"],"names":[],"mappings":"AAGA,wBAAgB,4BAA4B,IAAI,IAAI,CAEnD;AAED,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/services/attachmentHandlers/index.ts"],"names":[],"mappings":"AAGA,wBAAgB,4BAA4B,IAAI,IAAI,CAEnD;AAED,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EACL,OAAO,IAAI,qBAAqB,EAChC,aAAa,GACd,MAAM,yBAAyB,CAAC"}

package/lib/typescript/src/translation/resources/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../../../src/translation/resources/i18n.ts"],"names":[],"mappings":";;;AA2BA,wBAEE"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../../../src/translation/resources/i18n.ts"],"names":[],"mappings":";;;AAqCA,wBAEE"}

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

@@ -1,4 +1,4 @@
-export type AttachmentType = 'image' | 'video' | 'file' | 'audio';
+export type AttachmentType = 'image' | 'video' | 'file' | 'audio' | 'document';
 export interface BaseAttachment {
     id: string;
     type: AttachmentType;
@@ -69,4 +69,25 @@ export interface AttachmentSendResult {
     mergedMessageId?: string;
     errors: Record<string, string>;
 }
+interface AttachmentMetadata {
+    id?: string;
+    path: string;
+    filename?: string;
+    size?: number;
+    duration?: number;
+    mimeType?: string;
+    width?: number;
+    height?: number;
+    uri?: string;
+}
+export interface AttachmentItem {
+    metadata: AttachmentMetadata;
+    uploadProgress: number;
+    error: string | null;
+    isUploading: boolean;
+    uploadedUrl?: string;
+    thumbnailUrl?: string;
+    type: AttachmentType;
+}
+export {};
 //# sourceMappingURL=attachment.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"attachment.d.ts","sourceRoot":"","sources":["../../../../src/types/attachment.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAElE,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,cAAc,CAAC;IACrB,UAAU,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAC;KACnD,CAAC;CACH;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE;YACV,GAAG,EAAE,MAAM,CAAC;YACZ,KAAK,EAAE,MAAM,CAAC;YACd,MAAM,EAAE,MAAM,CAAC;YACf,IAAI,CAAC,EAAE,MAAM,CAAC;SACf,CAAC;KACH,CAAC;CACH;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE;QACR,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,UAAU,GAAG,aAAa,GAAG,cAAc,GAAG,OAAO,CAAC;KACjE,CAAC;CACH;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE;QACR,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,MAAM,MAAM,UAAU,GAClB,eAAe,GACf,eAAe,GACf,cAAc,GACd,eAAe,CAAC;AAEpB,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,WAAW,CAAC;IACrE,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEhE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,aAAa,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC"}
+{"version":3,"file":"attachment.d.ts","sourceRoot":"","sources":["../../../../src/types/attachment.ts"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,13 @@
+export interface PickedFile {
+    uri: string;
+    name: string;
+    size: number;
+    mimeType: string;
+}
 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[]>;
+    openFilePicker: (multiple?: boolean) => Promise<PickedFile[] | null>;
 };
 export default DeviceUtils;
 export { DeviceUtils };

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

@@ -1 +1 @@
-{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../../../src/utils/device.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW;iCACmB,OAAO;iCAmCP,OAAO;CAgC1C,CAAC;AAEF,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../../../src/utils/device.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,WAAW;iCACmB,OAAO;iCAmCP,OAAO;gCAkC7B,OAAO,KAChB,OAAO,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC;CAyChC,CAAC;AAEF,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -3,6 +3,7 @@ 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 getFileIcon: (mimeType?: string) => number;
 export declare const formatFileSize: (bytes: number) => string;
 export declare const validateImageFile: (file: ImageFile) => string | null;
 export declare const getImageUploadEndpoint: (baseUrl: string) => string;

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

@@ -1 +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,MA+B9C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,MAM9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,KAAG,MAAM,GAAG,IAmB5D,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,SAAS,MAAM,KAAG,MAExD,CAAC"}
+{"version":3,"file":"imageUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/imageUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGtD,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;AA+BF,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,KAAG,MAG9C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,WAAW,MAAM,KAAG,MAkB/C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,MAM9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,KAAG,MAAM,GAAG,IAmB5D,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,SAAS,MAAM,KAAG,MAExD,CAAC"}

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

@@ -1 +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;IACjB,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;sCA8CM,MAAM,KAAG,OAAO,CAAC,IAAI,CAAC;0CAWhD,MAAM,EAAE,YACX,gBAAgB,KACxB,OAAO,CAAC,eAAe,EAAE,CAAC;CAe9B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"videoThumbnail.d.ts","sourceRoot":"","sources":["../../../../src/utils/videoThumbnail.ts"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,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;AA4DD,eAAO,MAAM,kBAAkB;mCAEhB,MAAM,YACR,gBAAgB,KACxB,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC;sCA6DM,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.16",
+  "version": "0.2.18",
   "description": "Droppii chat mobile",
   "keywords": [
     "react-native",
@@ -85,6 +85,7 @@
     "@eslint/js": "^10.0.1",
     "@growthbook/growthbook-react": "*",
     "@jest/globals": "^30.0.0",
+    "@react-native-documents/picker": "^12.0.1",
     "@react-native/babel-preset": "0.85.0",
     "@react-native/eslint-config": "0.85.0",
     "@react-native/jest-preset": "0.85.0",
@@ -112,6 +113,7 @@
     "react-native-builder-bob": "^0.41.0",
     "react-native-create-thumbnail": "^2.2.0",
     "react-native-device-info": "*",
+    "react-native-file-viewer": "^2.1.5",
     "react-native-gesture-handler": "^3.0.0",
     "react-native-image-crop-picker": "^0.51.1",
     "react-native-keyboard-controller": "1.19.0",
@@ -134,11 +136,13 @@
   },
   "peerDependencies": {
     "@droppii/libs": "*",
+    "@react-native-documents/picker": "*",
     "@tanstack/react-query": "*",
     "react": "*",
     "react-native": "*",
     "react-native-blob-util": "*",
     "react-native-create-thumbnail": "*",
+    "react-native-file-viewer": "*",
     "react-native-gesture-handler": "*",
     "react-native-gifted-chat": "*",
     "react-native-image-crop-picker": "*",

package/src/assets/images/index.ts

@@ -1,5 +1,10 @@
 const Images = {
   ICON_BOT: require('./icon_bot.png'),
+  ICON_EXCEL: require('./icon_excel.png'),
+  ICON_IMG: require('./icon_img.png'),
+  ICON_PDF: require('./icon_pdf.png'),
+  ICON_TXT: require('./icon_txt.png'),
+  ICON_WORD: require('./icon_word.png'),
   TAG_BOT: require('./tag_bot.png'),
   TAG_MALL: require('./tag_mall.png'),
   ICON_DROPPII: require('./icon_droppii.png'),

package/src/components/AttachmentPreview/FilePreview.tsx

@@ -0,0 +1,137 @@
+import { memo, useCallback } from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import FileViewer from 'react-native-file-viewer';
+import UIUtils from '../../utils/ui';
+import { trans } from '../../translation';
+import { formatFileSize, getFileIcon } from '../../utils/imageUtils';
+import type { AttachmentItem } from '../../types/attachment';
+
+export const FilePreview = memo(
+  ({
+    file,
+    onRemove,
+  }: {
+    file: AttachmentItem;
+    onRemove: (id: string) => void;
+  }) => {
+    const handlePress = useCallback(async () => {
+      if (file.isUploading || file.error) return;
+      try {
+        const path = file.metadata.uri?.startsWith('file://')
+          ? file.metadata.uri.slice(7)
+          : file.metadata.uri;
+        await FileViewer.open(path ?? '', {
+          showOpenWithDialog: true,
+          showAppsSuggestions: true,
+        });
+      } catch {
+        UIUtils.toast.open({
+          title: trans('chat:file_preview_unsupported'),
+          theme: 'warning',
+        });
+      }
+    }, [file]);
+
+    const handleRemove = useCallback(() => {
+      onRemove(file.metadata.id ?? '');
+    }, [file.metadata?.id, onRemove]);
+
+    const iconSource = getFileIcon(file.metadata.mimeType);
+    const hasError = !!file.error;
+
+    return (
+      <KContainer.Touchable
+        row
+        alignItems
+        width={160}
+        onPress={handlePress}
+        br="3x"
+        background={
+          !hasError
+            ? KColors.hexToRgba(KColors.palette.gray.w400, 0.1)
+            : KColors.hexToRgba(KColors.danger.light, 0.2)
+        }
+        paddingL={'0.5rem'}
+        paddingR={'1rem'}
+        paddingV={'0.25rem'}
+      >
+        {/* File icon */}
+        <KContainer.VisibleView visible={file.isUploading}>
+          <ActivityIndicator
+            size="small"
+            color={KColors.palette.primary.w400}
+            style={styles.loader}
+          />
+        </KContainer.VisibleView>
+        <KContainer.VisibleView visible={!file.isUploading}>
+          <KImage.Base
+            uri={iconSource}
+            style={styles.icon}
+            resizeMode="contain"
+          />
+        </KContainer.VisibleView>
+
+        {/* File info */}
+        <KContainer.View flex>
+          <KLabel.Text
+            typo="TextSmMedium"
+            color={KColors.gray.dark}
+            numberOfLines={1}
+            ellipsizeMode="middle"
+          >
+            {file.metadata.filename}
+          </KLabel.Text>
+          <KLabel.Text
+            typo="TextXsNormal"
+            color={KColors.palette.gray.w500}
+            numberOfLines={1}
+          >
+            {hasError
+              ? file.error
+              : file.isUploading
+                ? `${file.uploadProgress}%`
+                : formatFileSize(file.metadata.size ?? 0)}
+          </KLabel.Text>
+        </KContainer.View>
+
+        {/* Remove button */}
+        <KContainer.Touchable
+          onPress={handleRemove}
+          center
+          width={20}
+          height={20}
+          br={'round'}
+          background={KColors.gray.dark}
+          hitSlop={8}
+          style={styles.removeBtn}
+        >
+          <KImage.VectorIcons
+            name="close"
+            provider="MaterialCommunityIcons"
+            size={18}
+            color={KColors.white}
+          />
+        </KContainer.Touchable>
+      </KContainer.Touchable>
+    );
+  }
+);
+
+FilePreview.displayName = 'FilePreview';
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 20,
+    height: 20,
+    marginRight: 7,
+  },
+  loader: {
+    marginRight: 8,
+  },
+  removeBtn: {
+    position: 'absolute',
+    right: -4,
+    top: -4,
+  },
+});

package/src/components/AttachmentPreview/MediaPreview.tsx

@@ -0,0 +1,238 @@
+import { memo } from 'react';
+import { KColors, KContainer, KImage, KLabel } from '@droppii/libs';
+import type { AttachmentItem, AttachmentType } from '../../types/attachment';
+import { StyleSheet } from 'react-native';
+
+type Props = {
+  item: AttachmentItem;
+  index: number;
+  onRemove(type: AttachmentType, index: number): void;
+};
+
+const formatDuration = (seconds: number): string => {
+  const totalSecs = Math.floor(seconds);
+  const mins = Math.floor(totalSecs / 60);
+  const secs = totalSecs % 60;
+  return `${mins.toString().padStart(2, '0')}:${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 MediaPreview = memo(({ item, index, onRemove }: Props) => {
+  const { type, metadata, uploadProgress, error, isUploading, thumbnailUrl } =
+    item;
+
+  const isImage = type === 'image';
+  const isVideo = type === 'video';
+  const hasPreview = isImage || isVideo;
+
+  return (
+    <KContainer.View>
+      <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={10}
+      >
+        <KImage.VectorIcons
+          name="close"
+          provider="MaterialCommunityIcons"
+          size={18}
+          color={KColors.white}
+        />
+      </KContainer.Touchable>
+    </KContainer.View>
+  );
+});
+
+MediaPreview.displayName = 'MediaPreview';
+
+const styles = StyleSheet.create({
+  thumbnail: {
+    position: 'relative',
+    width: 48,
+    height: 48,
+    borderRadius: 4,
+    overflow: 'hidden',
+    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',
+    right: -4,
+    top: -4,
+    width: 22,
+    height: 22,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 3,
+  },
+  sendButton: {
+    width: 48,
+    height: 48,
+  },
+});