feat: Add pending message on dashboard (#1547)

app/javascript/dashboard/api/inbox/message.js

@@ -7,10 +7,17 @@ class MessageApi extends ApiClient {
     super('conversations', { accountScoped: true });
   }
 
-  create({ conversationId, message, private: isPrivate, contentAttributes }) {
+  create({
+    conversationId,
+    message,
+    private: isPrivate,
+    contentAttributes,
+    echo_id: echoId,
+  }) {
     return axios.post(`${this.url}/${conversationId}/messages`, {
       content: message,
       private: isPrivate,
+      echo_id: echoId,
       content_attributes: contentAttributes,
     });
   }
@@ -21,10 +28,11 @@ class MessageApi extends ApiClient {
     });
   }
 
-  sendAttachment([conversationId, { file, isPrivate = false }]) {
+  sendAttachment([conversationId, { file, isPrivate = false }, echoId]) {
     const formData = new FormData();
     formData.append('attachments[]', file, file.name);
     formData.append('private', isPrivate);
+    formData.append('echo_id', echoId);
     return axios({
       method: 'post',
       url: `${this.url}/${conversationId}/messages`,

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -1,14 +1,20 @@
 <template>
   <li v-if="hasAttachments || data.content" :class="alignBubble">
     <div :class="wrapClass">
-      <p v-tooltip.top-start="sentByMessage" :class="bubbleClass">
+      <div v-tooltip.top-start="sentByMessage" :class="bubbleClass">
         <bubble-text
           v-if="data.content"
           :message="message"
           :is-email="isEmailContentType"
           :readable-time="readableTime"
         />
-        <span v-if="hasAttachments">
+        <span
+          v-if="isPending && hasAttachments"
+          class="chat-bubble has-attachment agent"
+        >
+          {{ $t('CONVERSATION.UPLOADING_ATTACHMENTS') }}
+        </span>
+        <span v-if="!isPending && hasAttachments">
           <span v-for="attachment in data.attachments" :key="attachment.id">
             <bubble-image
               v-if="attachment.file_type === 'image'"
@@ -22,6 +28,7 @@
             />
           </span>
         </span>
+
         <bubble-actions
           :id="data.id"
           :sender="data.sender"
@@ -32,7 +39,8 @@
           :readable-time="readableTime"
           :source-id="data.source_id"
         />
-      </p>
+      </div>
+      <spinner v-if="isPending" size="tiny" />
 
       <div v-if="isATweet && isIncoming && sender" class="sender--info">
         <woot-thumbnail
@@ -53,9 +61,11 @@ import timeMixin from '../../../mixins/time';
 import BubbleText from './bubble/Text';
 import BubbleImage from './bubble/Image';
 import BubbleFile from './bubble/File';
+import Spinner from 'shared/components/Spinner';
+
 import contentTypeMixin from 'shared/mixins/contentTypeMixin';
 import BubbleActions from './bubble/Actions';
-import { MESSAGE_TYPE } from 'shared/constants/messageTypes';
+import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
 
 export default {
   components: {
@@ -63,6 +73,7 @@ export default {
     BubbleText,
     BubbleImage,
     BubbleFile,
+    Spinner,
   },
   mixins: [timeMixin, messageFormatterMixin, contentTypeMixin],
   props: {
@@ -130,6 +141,7 @@ export default {
       return {
         wrap: this.isBubble,
         'activity-wrap': !this.isBubble,
+        'is-pending': this.isPending,
       };
     },
     bubbleClass() {
@@ -139,17 +151,32 @@ export default {
         'is-image': this.hasImageAttachment,
       };
     },
+    isPending() {
+      return this.data.status === MESSAGE_STATUS.PROGRESS;
+    },
   },
 };
 </script>
 <style lang="scss">
-.wrap > .is-image.bubble {
-  padding: 0;
-  overflow: hidden;
-
-  .image {
-    max-width: 32rem;
+.wrap {
+  > .is-image.bubble {
     padding: 0;
+    overflow: hidden;
+
+    .image {
+      max-width: 32rem;
+      padding: 0;
+    }
+  }
+  &.is-pending {
+    position: relative;
+    opacity: 0.8;
+
+    .spinner {
+      position: absolute;
+      bottom: var(--space-smaller);
+      right: var(--space-smaller);
+    }
   }
 }
 

app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { MESSAGE_TYPE } from 'shared/constants/messageTypes';
+import { MESSAGE_TYPE } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {

app/javascript/dashboard/helper/commons.js

@@ -1,5 +1,8 @@
-/* eslint no-console: 0 */
 /* eslint no-param-reassign: 0 */
+
+import getUuid from 'widget/helpers/uuid';
+import { MESSAGE_STATUS, MESSAGE_TYPE } from 'shared/constants/messages';
+
 export default () => {
   if (!Array.prototype.last) {
     Object.assign(Array.prototype, {
@@ -26,3 +29,41 @@ export const getTypingUsersText = (users = []) => {
   const rest = users.length - 1;
   return `${user.name} and ${rest} others are typing`;
 };
+
+export const createPendingMessage = data => {
+  const timestamp = Math.floor(new Date().getTime() / 1000);
+  const tempMessageId = getUuid();
+  const pendingMessage = {
+    ...data,
+    content: data.message,
+    id: tempMessageId,
+    echo_id: tempMessageId,
+    status: MESSAGE_STATUS.PROGRESS,
+    created_at: timestamp,
+    message_type: MESSAGE_TYPE.OUTGOING,
+    conversation_id: data.conversationId,
+  };
+  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/specs/commons.spec.js

@@ -1,4 +1,8 @@
-import { getTypingUsersText } from '../commons';
+import {
+  getTypingUsersText,
+  createPendingMessage,
+  createPendingAttachment,
+} from '../commons';
 
 describe('#getTypingUsersText', () => {
   it('returns the correct text is there is only one typing user', () => {
@@ -24,3 +28,70 @@ describe('#getTypingUsersText', () => {
     ).toEqual('Pranav and 3 others are typing');
   });
 });
+
+describe('#createPendingMessage', () => {
+  const message = {
+    message: 'hi',
+  };
+  it('returns the pending message with expected new keys', () => {
+    expect(createPendingMessage(message)).toHaveProperty(
+      'content',
+      'id',
+      'status',
+      'echo_id',
+      'status',
+      'created_at',
+      'message_type',
+      'conversation_id'
+    );
+  });
+
+  it('returns the pending message with status progress', () => {
+    expect(createPendingMessage(message)).toMatchObject({
+      status: 'progress',
+    });
+  });
+
+  it('returns the pending message with same id and echo_id', () => {
+    const pending = createPendingMessage(message);
+    expect(pending).toMatchObject({
+      echo_id: pending.id,
+    });
+  });
+});
+
+describe('#createPendingAttachment', () => {
+  const message = [1, { isPrivate: false }];
+  it('returns the pending message with expected new keys', () => {
+    expect(createPendingAttachment(message)).toHaveProperty(
+      'content',
+      'id',
+      'status',
+      'echo_id',
+      'status',
+      'created_at',
+      'message_type',
+      'conversation_id',
+      'attachments',
+      'private'
+    );
+  });
+
+  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);
+    expect(pending.attachments.length).toBe(1);
+  });
+});

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -24,6 +24,7 @@
     "REPLYING_TO": "You are replying to:",
     "REMOVE_SELECTION": "Remove Selection",
     "DOWNLOAD": "Download",
+    "UPLOADING_ATTACHMENTS": "Uploading attachments...",
     "HEADER": {
       "RESOLVE_ACTION": "Resolve",
       "REOPEN_ACTION": "Reopen",

app/javascript/dashboard/store/modules/conversations/actions.js

@@ -2,7 +2,11 @@ import Vue from 'vue';
 import * as types from '../../mutation-types';
 import ConversationApi from '../../../api/inbox/conversation';
 import MessageApi from '../../../api/inbox/message';
-import { MESSAGE_TYPE } from 'widget/helpers/constants';
+import { MESSAGE_STATUS, MESSAGE_TYPE } from 'shared/constants/messages';
+import {
+  createPendingMessage,
+  createPendingAttachment,
+} from 'dashboard/helper/commons';
 
 // actions
 const actions = {
@@ -128,8 +132,13 @@ const actions = {
 
   sendMessage: async ({ commit }, data) => {
     try {
-      const response = await MessageApi.create(data);
-      commit(types.default.ADD_MESSAGE, response.data);
+      const pendingMessage = createPendingMessage(data);
+      commit(types.default.ADD_MESSAGE, pendingMessage);
+      const response = await MessageApi.create(pendingMessage);
+      commit(types.default.ADD_MESSAGE, {
+        ...response.data,
+        status: MESSAGE_STATUS.SENT,
+      });
     } catch (error) {
       // Handle error
     }
@@ -208,7 +217,12 @@ const actions = {
 
   sendAttachment: async ({ commit }, data) => {
     try {
-      const response = await MessageApi.sendAttachment(data);
+      const pendingMessage = createPendingAttachment(data);
+      commit(types.default.ADD_MESSAGE, pendingMessage);
+      const response = await MessageApi.sendAttachment([
+        ...data,
+        pendingMessage.id,
+      ]);
       commit(types.default.ADD_MESSAGE, response.data);
     } catch (error) {
       // Handle error

app/javascript/dashboard/store/modules/conversations/helpers.js

@@ -0,0 +1,6 @@
+export const findPendingMessageIndex = (chat, message) => {
+  const { echo_id: tempMessageId } = message;
+  return chat.messages.findIndex(
+    m => m.id === message.id || m.id === tempMessageId
+  );
+};

app/javascript/dashboard/store/modules/conversations/index.js

@@ -4,6 +4,7 @@ import Vue from 'vue';
 import * as types from '../../mutation-types';
 import getters, { getSelectedChatConversation } from './getters';
 import actions from './actions';
+import { findPendingMessageIndex } from './helpers';
 import wootConstants from '../../../constants';
 
 const state = {
@@ -85,17 +86,16 @@ export const mutations = {
       selectedChatId: conversationId,
     });
     if (!chat) return;
-    const previousMessageIndex = chat.messages.findIndex(
-      m => m.id === message.id
-    );
-    if (previousMessageIndex === -1) {
+
+    const pendingMessageIndex = findPendingMessageIndex(chat, message);
+    if (pendingMessageIndex !== -1) {
+      Vue.set(chat.messages, pendingMessageIndex, message);
+    } else {
       chat.messages.push(message);
       chat.timestamp = message.created_at;
       if (selectedChatId === conversationId) {
         window.bus.$emit('scrollToMessage');
       }
-    } else {
-      chat.messages[previousMessageIndex] = message;
     }
   },
 

app/javascript/dashboard/store/modules/specs/conversations/helpers.spec.js

@@ -0,0 +1,37 @@
+import { findPendingMessageIndex } from '../../conversations/helpers';
+
+describe('#findPendingMessageIndex', () => {
+  it('returns the correct index of pending message with id', () => {
+    const chat = {
+      messages: [{ id: 1, status: 'progress' }],
+    };
+    const message = { echo_id: 1 };
+    expect(findPendingMessageIndex(chat, message)).toEqual(0);
+  });
+
+  it('returns -1 if pending message with id is not present', () => {
+    const chat = {
+      messages: [{ id: 1, status: 'progress' }],
+    };
+    const message = { echo_id: 2 };
+    expect(findPendingMessageIndex(chat, message)).toEqual(-1);
+  });
+});
+
+describe('#addOrUpdateChat', () => {
+  it('returns the correct index of pending message with id', () => {
+    const chat = {
+      messages: [{ id: 1, status: 'progress' }],
+    };
+    const message = { echo_id: 1 };
+    expect(findPendingMessageIndex(chat, message)).toEqual(0);
+  });
+
+  it('returns -1 if pending message with id is not present', () => {
+    const chat = {
+      messages: [{ id: 1, status: 'progress' }],
+    };
+    const message = { echo_id: 2 };
+    expect(findPendingMessageIndex(chat, message)).toEqual(-1);
+  });
+});

app/javascript/dashboard/store/mutation-types.js

@@ -29,6 +29,7 @@ export default {
   ASSIGN_AGENT: 'ASSIGN_AGENT',
   SET_CHAT_META: 'SET_CHAT_META',
   ADD_MESSAGE: 'ADD_MESSAGE',
+  ADD_PENDING_MESSAGE: 'ADD_PENDING_MESSAGE',
   MARK_MESSAGE_READ: 'MARK_MESSAGE_READ',
   SET_PREVIOUS_CONVERSATIONS: 'SET_PREVIOUS_CONVERSATIONS',
   SET_ACTIVE_INBOX: 'SET_ACTIVE_INBOX',

app/javascript/shared/assets/stylesheets/colors.scss

@@ -68,6 +68,8 @@
   --r-900: #C30011;
 
   // Common color aliases
+  --color-woot: var(--w-500);
+
   --color-heading: #1f2d3d;
   --color-body: #3c4858;
 

app/javascript/shared/constants/messageTypes.js

@@ -1,6 +0,0 @@
-export const MESSAGE_TYPE = {
-  INCOMING: 0,
-  OUTGOING: 1,
-  ACTIVITY: 2,
-  TEMPLATE: 3,
-};

app/javascript/shared/constants/messages.js

@@ -0,0 +1,12 @@
+export const MESSAGE_STATUS = {
+  FAILED: 'failed',
+  SENT: 'sent',
+  PROGRESS: 'progress',
+};
+
+export const MESSAGE_TYPE = {
+  INCOMING: 0,
+  OUTGOING: 1,
+  ACTIVITY: 2,
+  TEMPLATE: 3,
+};

app/views/api/v1/accounts/conversations/messages/create.json.jbuilder

@@ -1,11 +1 @@
-json.id @message.id
-json.content @message.content
-json.inbox_id @message.inbox_id
-json.conversation_id @message.conversation.display_id
-json.message_type @message.message_type_before_type_cast
-json.content_type @message.content_type
-json.content_attributes @message.content_attributes
-json.created_at @message.created_at.to_i
-json.private @message.private
-json.sender @message.sender.push_event_data
-json.attachments @message.attachments.map(&:push_event_data) if @message.attachments.present?
+json.partial! 'api/v1/models/message', message: @message

app/views/api/v1/accounts/conversations/messages/index.json.jbuilder

@@ -8,16 +8,6 @@ end
 
 json.payload do
   json.array! @messages do |message|
-    json.id message.id
-    json.content message.content
-    json.inbox_id message.inbox_id
-    json.conversation_id message.conversation.display_id
-    json.message_type message.message_type_before_type_cast
-    json.content_type message.content_type
-    json.created_at message.created_at.to_i
-    json.private message.private
-    json.source_id message.source_id
-    json.attachments message.attachments.map(&:push_event_data) if message.attachments.present?
-    json.sender message.sender.push_event_data if message.sender
+    json.partial! 'api/v1/models/message', message: message
   end
 end

app/views/api/v1/models/_message.json.jbuilder

@@ -0,0 +1,13 @@
+json.id message.id
+json.content message.content
+json.inbox_id message.inbox_id
+json.echo_id message.echo_id if message.echo_id
+json.conversation_id message.conversation.display_id
+json.message_type message.message_type_before_type_cast
+json.content_type message.content_type
+json.content_attributes message.content_attributes
+json.created_at message.created_at.to_i
+json.private message.private
+json.source_id message.source_id
+json.sender message.sender.push_event_data if message.sender
+json.attachments message.attachments.map(&:push_event_data) if message.attachments.present?