feat: Add preview for attachment messages (#1562)

Add preview for pending messages and attachments

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/helper/commons.js

@@ -33,37 +33,19 @@ export const getTypingUsersText = (users = []) => {
 export const createPendingMessage = data => {
   const timestamp = Math.floor(new Date().getTime() / 1000);
   const tempMessageId = getUuid();
+  const { message, file } = data;
+  const tempAttachments = [{ id: tempMessageId }];
   const pendingMessage = {
     ...data,
-    content: data.message,
+    content: message || null,
     id: tempMessageId,
     echo_id: tempMessageId,
     status: MESSAGE_STATUS.PROGRESS,
     created_at: timestamp,
     message_type: MESSAGE_TYPE.OUTGOING,
     conversation_id: data.conversationId,
+    attachments: file ? tempAttachments : null,
   };
-  return pendingMessage;
-};
 
-export const createPendingAttachment = data => {
-  const [conversationId, { isPrivate = false }] = data;
-  const timestamp = Math.floor(new Date().getTime() / 1000);
-  const tempMessageId = getUuid();
-  const pendingMessage = {
-    id: tempMessageId,
-    echo_id: tempMessageId,
-    status: MESSAGE_STATUS.PROGRESS,
-    created_at: timestamp,
-    message_type: MESSAGE_TYPE.OUTGOING,
-    conversation_id: conversationId,
-    attachments: [
-      {
-        id: tempMessageId,
-      },
-    ],
-    private: isPrivate,
-    content: null,
-  };
   return pendingMessage;
 };

app/javascript/dashboard/helper/files.js

@@ -0,0 +1,11 @@
+export const formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+};

app/javascript/dashboard/helper/specs/commons.spec.js

@@ -1,8 +1,4 @@
-import {
-  getTypingUsersText,
-  createPendingMessage,
-  createPendingAttachment,
-} from '../commons';
+import { getTypingUsersText, createPendingMessage } from '../commons';
 
 describe('#getTypingUsersText', () => {
   it('returns the correct text is there is only one typing user', () => {
@@ -58,12 +54,13 @@ describe('#createPendingMessage', () => {
       echo_id: pending.id,
     });
   });
-});
 
-describe('#createPendingAttachment', () => {
-  const message = [1, { isPrivate: false }];
-  it('returns the pending message with expected new keys', () => {
-    expect(createPendingAttachment(message)).toHaveProperty(
+  it('returns the pending message with attachmnet key if file is passed', () => {
+    const messageWithFile = {
+      message: 'hi',
+      file: {},
+    };
+    expect(createPendingMessage(messageWithFile)).toHaveProperty(
       'content',
       'id',
       'status',
@@ -77,21 +74,12 @@ describe('#createPendingAttachment', () => {
     );
   });
 
-  it('returns the pending message with status progress', () => {
-    expect(createPendingAttachment(message)).toMatchObject({
-      status: 'progress',
-    });
-  });
-
-  it('returns the pending message with same id and echo_id', () => {
-    const pending = createPendingAttachment(message);
-    expect(pending).toMatchObject({
-      echo_id: pending.id,
-    });
-  });
-
   it('returns the pending message to have one attachment', () => {
-    const pending = createPendingAttachment(message);
+    const messageWithFile = {
+      message: 'hi',
+      file: {},
+    };
+    const pending = createPendingMessage(messageWithFile);
     expect(pending.attachments.length).toBe(1);
   });
 });

app/javascript/dashboard/helper/specs/files.spec.js

@@ -0,0 +1,18 @@
+import { formatBytes } from '../files';
+
+describe('#File Helpers', () => {
+  describe('formatBytes', () => {
+    it('should return zero bytes if 0 is passed', () => {
+      expect(formatBytes(0)).toBe('0 Bytes');
+    });
+    it('should return in bytes if 1000 is passed', () => {
+      expect(formatBytes(1000)).toBe('1000 Bytes');
+    });
+    it('should return in KB if 100000 is passed', () => {
+      expect(formatBytes(10000)).toBe('9.77 KB');
+    });
+    it('should return in MB if 10000000 is passed', () => {
+      expect(formatBytes(10000000)).toBe('9.54 MB');
+    });
+  });
+});