feat: Ability to send attachment in new conversation (#7698)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -152,6 +152,10 @@
 
       &.is-image {
         @apply rounded-lg;
+
+        .message__mail-head {
+          @apply px-4 py-2;
+        }
       }
     }
 

app/javascript/dashboard/assets/scss/widgets/_modal.scss

@@ -4,10 +4,6 @@
   @apply flex items-center justify-center bg-modal dark:bg-modal z-[9990] h-full left-0 fixed top-0 w-full;
 }
 
-.modal--close {
-  @apply absolute right-2 rtl:right-[unset] rtl:left-2 top-2;
-}
-
 .page-top-bar {
   @apply px-8 pt-9 pb-0;
 

app/javascript/dashboard/components/Modal.vue

@@ -12,7 +12,7 @@
           color-scheme="secondary"
           icon="dismiss"
           variant="clear"
-          class="modal--close"
+          class="absolute ltr:right-2 rtl:left-2 top-2 z-10"
           @click="close"
         />
         <slot />

app/javascript/dashboard/components/widgets/AttachmentsPreview.vue

@@ -1,11 +1,9 @@
 <template>
-  <div
+  <div class="preview-item__wrap flex overflow-auto max-h-[12.5rem]">
-    class="preview-item__wrap flex flex-col overflow-auto mt-4 max-h-[12.5rem]"
-  >
     <div
       v-for="(attachment, index) in attachments"
       :key="attachment.id"
-      class="preview-item flex p-1 bg-slate-50 dark:bg-slate-800 rounded-md w-[15rem] mb-1"
+      class="preview-item flex items-center p-1 bg-slate-50 dark:bg-slate-800 gap-1 rounded-md w-[15rem] mb-1"
     >
       <div class="max-w-[4rem] flex-shrink-0 w-6 flex items-center">
         <img
@@ -17,7 +15,7 @@
           📄
         </span>
       </div>
-      <div class="max-w-[60%] min-w-[50%] overflow-hidden text-ellipsis ml-2">
+      <div class="max-w-[60%] min-w-[50%] overflow-hidden text-ellipsis">
         <span
           class="h-4 overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap"
         >

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -14,10 +14,11 @@
       <file-upload
         ref="upload"
         v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
+        input-id="conversationAttachment"
         :size="4096 * 4096"
         :accept="allowedFileTypes"
         :multiple="enableMultipleFileUpload"
-        :drop="true"
+        :drop="enableDragAndDrop"
         :drop-directory="false"
         :data="{
           direct_upload_url: '/rails/active_storage/direct_uploads',
@@ -100,9 +101,9 @@
       <transition name="modal-fade">
         <div
           v-show="$refs.upload && $refs.upload.dropActive"
-          class="modal-mask"
+          class="flex items-center justify-center gap-2 fixed left-0 right-0 top-0 bottom-0 w-full h-full z-20 text-slate-600 dark:text-slate-200 bg-white_transparent dark:bg-black_transparent flex-col"
         >
-          <fluent-icon icon="cloud-backup" />
+          <fluent-icon icon="cloud-backup" size="40" />
           <h4 class="page-sub-title text-slate-600 dark:text-slate-200">
             {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
           </h4>
@@ -228,6 +229,10 @@ export default {
       type: String,
       default: '',
     },
+    newConversationModalActive: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     ...mapGetters({
@@ -274,6 +279,9 @@ export default {
       }
       return ALLOWED_FILE_TYPES;
     },
+    enableDragAndDrop() {
+      return !this.newConversationModalActive;
+    },
     audioRecorderPlayStopIcon() {
       switch (this.recordingAudioState) {
         // playing paused recording stopped inactive destroyed
@@ -346,12 +354,4 @@ export default {
     @apply dark:bg-slate-800 bg-slate-100;
   }
 }
-
-.modal-mask {
-  @apply text-slate-600 dark:text-slate-200 bg-white_transparent dark:bg-black_transparent flex-col;
-}
-
-.icon {
-  @apply text-[5rem];
-}
 </style>

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

@@ -81,6 +81,7 @@
     </div>
     <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
       <attachment-preview
+        class="mt-4 flex-col"
         :attachments="attachedFiles"
         :remove-attachment="removeAttachment"
       />
@@ -124,6 +125,7 @@
       :toggle-audio-recorder="toggleAudioRecorder"
       :toggle-emoji-picker="toggleEmojiPicker"
       :message="message"
+      :new-conversation-modal-active="newConversationModalActive"
       @selectWhatsappTemplate="openWhatsappTemplateModal"
       @toggle-editor="toggleRichContentEditor"
       @replace-text="replaceText"
@@ -160,12 +162,7 @@ import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/cons
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
 import WootAudioRecorder from 'dashboard/components/widgets/WootWriter/AudioRecorder';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+import { AUDIO_FORMATS } from 'shared/constants/messages';
-import {
-  MAXIMUM_FILE_UPLOAD_SIZE,
-  MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL,
-  AUDIO_FORMATS,
-} from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
   getMessageVariables,
@@ -177,13 +174,13 @@ import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
-import { DirectUpload } from 'activestorage';
 import { frontendURL } from '../../../helper/URLHelper';
 import { trimContent, debounce } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants/globals';
 import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import rtlMixin from 'shared/mixins/rtlMixin';
+import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
 
 const EmojiInput = () => import('shared/components/emoji/EmojiInput');
 
@@ -208,6 +205,7 @@ export default {
     alertMixin,
     messageFormatterMixin,
     rtlMixin,
+    fileUploadMixin,
   ],
   props: {
     selectedTweet: {
@@ -247,6 +245,7 @@ export default {
       showUserMentions: false,
       showCannedMenu: false,
       showVariablesMenu: false,
+      newConversationModalActive: false,
     };
   },
   computed: {
@@ -571,11 +570,25 @@ export default {
       500,
       true
     );
+
+    // A hacky fix to solve the drag and drop
+    // Is showing on top of new conversation modal drag and drop
+    // TODO need to find a better solution
+    bus.$on(
+      BUS_EVENTS.NEW_CONVERSATION_MODAL,
+      this.onNewConversationModalActive
+    );
   },
   destroyed() {
     document.removeEventListener('paste', this.onPaste);
     document.removeEventListener('keydown', this.handleKeyEvents);
   },
+  beforeDestroy() {
+    bus.$off(
+      BUS_EVENTS.NEW_CONVERSATION_MODAL,
+      this.onNewConversationModalActive
+    );
+  },
   methods: {
     toggleRichContentEditor() {
       this.updateUISettings({
@@ -904,67 +917,6 @@ export default {
         isPrivate,
       });
     },
-    onFileUpload(file) {
-      if (this.globalConfig.directUploadsEnabled) {
-        this.onDirectFileUpload(file);
-      } else {
-        this.onIndirectFileUpload(file);
-      }
-    },
-    onDirectFileUpload(file) {
-      const MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE = this.isATwilioSMSChannel
-        ? MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL
-        : MAXIMUM_FILE_UPLOAD_SIZE;
-
-      if (!file) {
-        return;
-      }
-      if (checkFileSizeLimit(file, MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE)) {
-        const upload = new DirectUpload(
-          file.file,
-          `/api/v1/accounts/${this.accountId}/conversations/${this.currentChat.id}/direct_uploads`,
-          {
-            directUploadWillCreateBlobWithXHR: xhr => {
-              xhr.setRequestHeader(
-                'api_access_token',
-                this.currentUser.access_token
-              );
-            },
-          }
-        );
-
-        upload.create((error, blob) => {
-          if (error) {
-            this.showAlert(error);
-          } else {
-            this.attachFile({ file, blob });
-          }
-        });
-      } else {
-        this.showAlert(
-          this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
-            MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE,
-          })
-        );
-      }
-    },
-    onIndirectFileUpload(file) {
-      const MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE = this.isATwilioSMSChannel
-        ? MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL
-        : MAXIMUM_FILE_UPLOAD_SIZE;
-      if (!file) {
-        return;
-      }
-      if (checkFileSizeLimit(file, MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE)) {
-        this.attachFile({ file });
-      } else {
-        this.showAlert(
-          this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
-            MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE,
-          })
-        );
-      }
-    },
     attachFile({ blob, file }) {
       const reader = new FileReader();
       reader.readAsDataURL(file.file);
@@ -1096,6 +1048,14 @@ export default {
       this.bccEmails = bcc.join(', ');
       this.toEmails = to.join(', ');
     },
+    onNewConversationModalActive(isActive) {
+      // Issue is if the new conversation modal is open and we drag and drop the file
+      // then the file is not getting attached to the new conversation modal
+      // and it is getting attached to the current conversation reply box
+      // so to fix this we are removing the drag and drop event listener from the current conversation reply box
+      // When new conversation modal is open
+      this.newConversationModalActive = isActive;
+    },
   },
 };
 </script>

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

@@ -204,6 +204,10 @@
         "PLACEHOLDER": "Write your message here",
         "ERROR": "Message can't be empty"
       },
+      "ATTACHMENTS": {
+        "SELECT": "Choose files",
+        "HELP_TEXT": "Drag and drop files here or choose files to attach"
+      },
       "SUBMIT": "Send message",
       "CANCEL": "Cancel",
       "SUCCESS_MESSAGE": "Message sent!",

app/javascript/dashboard/mixins/fileUploadMixin.js

@@ -0,0 +1,72 @@
+import {
+  MAXIMUM_FILE_UPLOAD_SIZE,
+  MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL,
+} from 'shared/constants/messages';
+import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+import { DirectUpload } from 'activestorage';
+
+export default {
+  methods: {
+    onFileUpload(file) {
+      if (this.globalConfig.directUploadsEnabled) {
+        this.onDirectFileUpload(file);
+      } else {
+        this.onIndirectFileUpload(file);
+      }
+    },
+    onDirectFileUpload(file) {
+      const MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE = this.isATwilioSMSChannel
+        ? MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL
+        : MAXIMUM_FILE_UPLOAD_SIZE;
+
+      if (!file) {
+        return;
+      }
+      if (checkFileSizeLimit(file, MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE)) {
+        const upload = new DirectUpload(
+          file.file,
+          `/api/v1/accounts/${this.accountId}/conversations/${this.currentChat.id}/direct_uploads`,
+          {
+            directUploadWillCreateBlobWithXHR: xhr => {
+              xhr.setRequestHeader(
+                'api_access_token',
+                this.currentUser.access_token
+              );
+            },
+          }
+        );
+
+        upload.create((error, blob) => {
+          if (error) {
+            this.showAlert(error);
+          } else {
+            this.attachFile({ file, blob });
+          }
+        });
+      } else {
+        this.showAlert(
+          this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
+            MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE,
+          })
+        );
+      }
+    },
+    onIndirectFileUpload(file) {
+      const MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE = this.isATwilioSMSChannel
+        ? MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL
+        : MAXIMUM_FILE_UPLOAD_SIZE;
+      if (!file) {
+        return;
+      }
+      if (checkFileSizeLimit(file, MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE)) {
+        this.attachFile({ file });
+      } else {
+        this.showAlert(
+          this.$t('CONVERSATION.FILE_SIZE_LIMIT', {
+            MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE,
+          })
+        );
+      }
+    },
+  },
+};

app/javascript/dashboard/mixins/specs/fileUploadMixin.spec.js

@@ -0,0 +1,44 @@
+import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
+import Vue from 'vue';
+
+jest.mock('shared/helpers/FileHelper', () => ({
+  checkFileSizeLimit: jest.fn(),
+}));
+
+jest.mock('activestorage', () => ({
+  DirectUpload: jest.fn().mockImplementation(() => ({
+    create: jest.fn(),
+  })),
+}));
+
+describe('FileUploadMixin', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = new Vue(fileUploadMixin);
+    vm.isATwilioSMSChannel = false;
+    vm.globalConfig = {
+      directUploadsEnabled: true,
+    };
+    vm.accountId = 123;
+    vm.currentChat = {
+      id: 456,
+    };
+    vm.currentUser = {
+      access_token: 'token',
+    };
+  });
+
+  it('should call onDirectFileUpload when direct uploads are enabled', () => {
+    vm.onDirectFileUpload = jest.fn();
+    vm.onFileUpload({});
+    expect(vm.onDirectFileUpload).toHaveBeenCalledWith({});
+  });
+
+  it('should call onIndirectFileUpload when direct uploads are disabled', () => {
+    vm.globalConfig.directUploadsEnabled = false;
+    vm.onIndirectFileUpload = jest.fn();
+    vm.onFileUpload({});
+    expect(vm.onIndirectFileUpload).toHaveBeenCalledWith({});
+  });
+});

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -268,6 +268,7 @@ export default {
     },
     toggleConversationModal() {
       this.showConversationModal = !this.showConversationModal;
+      bus.$emit('newConversationModal', this.showConversationModal);
     },
     toggleDeleteModal() {
       this.showDeleteModal = !this.showDeleteModal;

app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue

@@ -11,7 +11,10 @@
           <label>
             {{ $t('NEW_CONVERSATION.FORM.INBOX.LABEL') }}
           </label>
-          <div class="multiselect-wrap--small">
+          <div
+            class="multiselect-wrap--small"
+            :class="{ 'has-multi-select-error': $v.targetInbox.$error }"
+          >
             <multiselect
               v-model="targetInbox"
               track-by="id"
@@ -88,7 +91,13 @@
         </div>
       </div>
       <div class="w-full">
-        <div class="w-full">
+        <div
+          class="w-full"
+          :class="{
+            'flex flex-col-reverse': hasWhatsappTemplates,
+            'gap-3': hasWhatsappTemplates && !hasAttachments,
+          }"
+        >
           <div class="relative">
             <canned-response
               v-if="showCannedResponseMenu && hasSlashCommand"
@@ -139,9 +148,52 @@
               {{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
             </span>
           </label>
+          <div class="flex flex-col">
+            <file-upload
+              ref="uploadAttachment"
+              input-id="newConversationAttachment"
+              :size="4096 * 4096"
+              :accept="allowedFileTypes"
+              :multiple="true"
+              :drop="true"
+              :drop-directory="false"
+              :data="{
+                direct_upload_url: '/rails/active_storage/direct_uploads',
+                direct_upload: true,
+              }"
+              @input-file="onFileUpload"
+            >
+              <woot-button
+                class-names="button--upload"
+                icon="attach"
+                emoji="📎"
+                color-scheme="secondary"
+                variant="smooth"
+                size="small"
+              >
+                {{ $t('NEW_CONVERSATION.FORM.ATTACHMENTS.SELECT') }}
+              </woot-button>
+              <span
+                class="text-slate-500 ltr:ml-1 rtl:mr-1 font-medium text-xs dark:text-slate-400"
+              >
+                {{ $t('NEW_CONVERSATION.FORM.ATTACHMENTS.HELP_TEXT') }}
+              </span>
+            </file-upload>
+            <div
+              v-if="hasAttachments"
+              class="max-h-20 overflow-y-auto mb-4 mt-1.5"
+            >
+              <attachment-preview
+                class="[&>.preview-item]:dark:bg-slate-700 flex-row flex-wrap gap-x-3 gap-y-1"
+                :attachments="attachedFiles"
+                :remove-attachment="removeAttachment"
+              />
+            </div>
+          </div>
         </div>
       </div>
     </div>
+
     <div
       v-if="!hasWhatsappTemplates"
       class="flex flex-row justify-end gap-2 py-2 px-0 w-full"
@@ -153,6 +205,18 @@
         {{ $t('NEW_CONVERSATION.FORM.SUBMIT') }}
       </woot-button>
     </div>
+
+    <transition name="modal-fade">
+      <div
+        v-show="$refs.uploadAttachment && $refs.uploadAttachment.dropActive"
+        class="flex top-0 bottom-0 z-30 gap-2 right-0 left-0 items-center justify-center flex-col absolute w-full h-full bg-white/80 dark:bg-slate-700/80"
+      >
+        <fluent-icon icon="cloud-backup" size="40" />
+        <h4 class="page-sub-title text-slate-600 dark:text-slate-200">
+          {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
+        </h4>
+      </div>
+    </transition>
   </form>
 </template>
 
@@ -169,6 +233,11 @@ import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
 import { getInboxSource } from 'dashboard/helper/inbox';
 import { required, requiredIf } from 'vuelidate/lib/validators';
+import inboxMixin from 'shared/mixins/inboxMixin';
+import FileUpload from 'vue-upload-component';
+import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview';
+import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
+import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
 
 export default {
   components: {
@@ -178,8 +247,10 @@ export default {
     CannedResponse,
     WhatsappTemplates,
     InboxDropdownItem,
+    FileUpload,
+    AttachmentPreview,
   },
-  mixins: [alertMixin],
+  mixins: [alertMixin, inboxMixin, fileUploadMixin],
   props: {
     contact: {
       type: Object,
@@ -201,6 +272,7 @@ export default {
       ccEmails: '',
       targetInbox: {},
       whatsappTemplateSelected: false,
+      attachedFiles: [],
     };
   },
   validations: {
@@ -219,8 +291,9 @@ export default {
       uiFlags: 'contacts/getUIFlags',
       conversationsUiFlags: 'contactConversations/getUIFlags',
       currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
     }),
-    emailMessagePayload() {
+    newMessagePayload() {
       const payload = {
         inboxId: this.targetInbox.id,
         sourceId: this.targetInbox.sourceId,
@@ -229,6 +302,12 @@ export default {
         mailSubject: this.subject,
         assigneeId: this.currentUser.id,
       };
+
+      if (this.attachedFiles && this.attachedFiles.length) {
+        payload.files = [];
+        this.setAttachmentPayload(payload);
+      }
+
       if (this.ccEmails) {
         payload.message.cc_emails = this.ccEmails;
       }
@@ -284,6 +363,15 @@ export default {
     hasWhatsappTemplates() {
       return !!this.selectedInbox.inbox?.message_templates;
     },
+    hasAttachments() {
+      return this.attachedFiles.length;
+    },
+    inbox() {
+      return this.targetInbox;
+    },
+    allowedFileTypes() {
+      return ALLOWED_FILE_TYPES;
+    },
   },
   watch: {
     message(value) {
@@ -300,6 +388,33 @@ export default {
     },
   },
   methods: {
+    setAttachmentPayload(payload) {
+      this.attachedFiles.forEach(attachment => {
+        if (this.globalConfig.directUploadsEnabled) {
+          payload.files.push(attachment.blobSignedId);
+        } else {
+          payload.files.push(attachment.resource.file);
+        }
+      });
+    },
+    attachFile({ blob, file }) {
+      const reader = new FileReader();
+      reader.readAsDataURL(file.file);
+      reader.onloadend = () => {
+        this.attachedFiles.push({
+          currentChatId: this.contact.id,
+          resource: blob || file,
+          isPrivate: this.isPrivate,
+          thumb: reader.result,
+          blobSignedId: blob ? blob.signed_id : undefined,
+        });
+      };
+    },
+    removeAttachment(itemIndex) {
+      this.attachedFiles = this.attachedFiles.filter(
+        (item, index) => itemIndex !== index
+      );
+    },
     onCancel() {
       this.$emit('cancel');
     },
@@ -320,6 +435,10 @@ export default {
         message: { content, template_params: templateParams },
         assigneeId: this.currentUser.id,
       };
+      if (this.attachedFiles && this.attachedFiles.length) {
+        payload.files = [];
+        this.setAttachmentPayload(payload);
+      }
       return payload;
     },
     onFormSubmit() {
@@ -327,7 +446,7 @@ export default {
       if (this.$v.$invalid) {
         return;
       }
-      this.createConversation(this.emailMessagePayload);
+      this.createConversation(this.newMessagePayload);
     },
     async createConversation(payload) {
       try {
@@ -389,6 +508,18 @@ export default {
   }
 }
 
+.file-uploads {
+  @apply text-start;
+}
+
+.multiselect-wrap--small.has-multi-select-error {
+  ::v-deep {
+    .multiselect__tags {
+      @apply border-red-500;
+    }
+  }
+}
+
 ::v-deep {
   .mention--box {
     @apply left-0 m-auto right-0 top-auto h-fit;

app/javascript/dashboard/store/modules/contactConversations.js

@@ -3,6 +3,34 @@ import * as types from '../mutation-types';
 import ContactAPI from '../../api/contacts';
 import ConversationApi from '../../api/conversations';
 
+export const createMessagePayload = (payload, message) => {
+  const { content, cc_emails, bcc_emails } = message;
+  payload.append('message[content]', content);
+  if (cc_emails) payload.append('message[cc_emails]', cc_emails);
+  if (bcc_emails) payload.append('message[bcc_emails]', bcc_emails);
+};
+
+export const createConversationPayload = ({ params, contactId, files }) => {
+  const { inboxId, message, sourceId, mailSubject, assigneeId } = params;
+  const payload = new FormData();
+
+  if (message) {
+    createMessagePayload(payload, message);
+  }
+
+  if (files && files.length > 0) {
+    files.forEach(file => payload.append('message[attachments][]', file));
+  }
+
+  payload.append('inbox_id', inboxId);
+  payload.append('contact_id', contactId);
+  payload.append('source_id', sourceId);
+  payload.append('additional_attributes[mail_subject]', mailSubject);
+  payload.append('assignee_id', assigneeId);
+
+  return payload;
+};
+
 const state = {
   records: {},
   uiFlags: {
@@ -24,29 +52,17 @@ export const actions = {
     commit(types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, {
       isCreating: true,
     });
-    const {
+    const { contactId, files } = params;
-      inboxId,
+
-      message,
-      contactId,
-      sourceId,
-      mailSubject,
-      assigneeId,
-    } = params;
     try {
-      const { data } = await ConversationApi.create({
+      const payload = createConversationPayload({ params, contactId, files });
-        inbox_id: inboxId,
+
-        contact_id: contactId,
+      const { data } = await ConversationApi.create(payload);
-        source_id: sourceId,
-        additional_attributes: {
-          mail_subject: mailSubject,
-        },
-        message,
-        assignee_id: assigneeId,
-      });
       commit(types.default.ADD_CONTACT_CONVERSATION, {
         id: contactId,
         data,
       });
+
       return data;
     } catch (error) {
       throw new Error(error);

app/javascript/dashboard/store/modules/specs/contactConversations/actions.spec.js

@@ -1,5 +1,9 @@
 import axios from 'axios';
-import { actions } from '../../contactConversations';
+import {
+  actions,
+  createMessagePayload,
+  createConversationPayload,
+} from '../../contactConversations';
 import * as types from '../../../mutation-types';
 import conversationList from './fixtures';
 
@@ -49,6 +53,35 @@ describe('#actions', () => {
           contactId: 4,
           sourceId: 5,
           mailSubject: 'Mail Subject',
+          assigneeId: 6,
+          files: [],
+        }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, { isCreating: true }],
+
+        [
+          types.default.ADD_CONTACT_CONVERSATION,
+          { id: 4, data: conversationList[0] },
+        ],
+        [
+          types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG,
+          { isCreating: false },
+        ],
+      ]);
+    });
+    it('sends correct actions with files if API is success', async () => {
+      axios.post.mockResolvedValue({ data: conversationList[0] });
+      await actions.create(
+        { commit },
+        {
+          inboxId: 1,
+          message: { content: 'hi' },
+          contactId: 4,
+          sourceId: 5,
+          assigneeId: 6,
+          mailSubject: 'Mail Subject',
+          files: [new File([], 'file1')],
         }
       );
       expect(commit.mock.calls).toEqual([
@@ -74,6 +107,7 @@ describe('#actions', () => {
             inboxId: 1,
             message: { content: 'hi' },
             contactId: 4,
+            assigneeId: 6,
             sourceId: 5,
             mailSubject: 'Mail Subject',
           }
@@ -87,5 +121,121 @@ describe('#actions', () => {
         ],
       ]);
     });
+    it('sends correct actions with files if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+
+      await expect(
+        actions.create(
+          { commit },
+          {
+            inboxId: 1,
+            message: { content: 'hi' },
+            contactId: 4,
+            assigneeId: 6,
+            sourceId: 5,
+            mailSubject: 'Mail Subject',
+            files: [new File([], 'file1')],
+          }
+        )
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, { isCreating: true }],
+        [
+          types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG,
+          { isCreating: false },
+        ],
+      ]);
+    });
+  });
+});
+
+describe('createMessagePayload', () => {
+  it('creates message payload with cc and bcc emails', () => {
+    const payload = new FormData();
+    const message = {
+      content: 'Test message content',
+      cc_emails: 'cc@example.com',
+      bcc_emails: 'bcc@example.com',
+    };
+
+    createMessagePayload(payload, message);
+
+    expect(payload.get('message[content]')).toBe(message.content);
+    expect(payload.get('message[cc_emails]')).toBe(message.cc_emails);
+    expect(payload.get('message[bcc_emails]')).toBe(message.bcc_emails);
+  });
+
+  it('creates message payload without cc and bcc emails', () => {
+    const payload = new FormData();
+    const message = {
+      content: 'Test message content',
+    };
+
+    createMessagePayload(payload, message);
+
+    expect(payload.get('message[content]')).toBe(message.content);
+    expect(payload.get('message[cc_emails]')).toBeNull();
+    expect(payload.get('message[bcc_emails]')).toBeNull();
+  });
+});
+
+describe('createConversationPayload', () => {
+  it('creates conversation payload with message and attachments', () => {
+    const options = {
+      params: {
+        inboxId: '1',
+        message: {
+          content: 'Test message content',
+        },
+        sourceId: '12',
+        mailSubject: 'Test Subject',
+        assigneeId: '123',
+      },
+      contactId: '23',
+      files: ['file1.pdf', 'file2.jpg'],
+    };
+
+    const payload = createConversationPayload(options);
+
+    expect(payload.get('message[content]')).toBe(
+      options.params.message.content
+    );
+    expect(payload.get('inbox_id')).toBe(options.params.inboxId);
+    expect(payload.get('contact_id')).toBe(options.contactId);
+    expect(payload.get('source_id')).toBe(options.params.sourceId);
+    expect(payload.get('additional_attributes[mail_subject]')).toBe(
+      options.params.mailSubject
+    );
+    expect(payload.get('assignee_id')).toBe(options.params.assigneeId);
+    expect(payload.getAll('message[attachments][]')).toEqual(options.files);
+  });
+
+  it('creates conversation payload with message and without attachments', () => {
+    const options = {
+      params: {
+        inboxId: '1',
+        message: {
+          content: 'Test message content',
+        },
+        sourceId: '12',
+        mailSubject: 'Test Subject',
+        assigneeId: '123',
+      },
+      contactId: '23',
+    };
+
+    const payload = createConversationPayload(options);
+
+    expect(payload.get('message[content]')).toBe(
+      options.params.message.content
+    );
+    expect(payload.get('inbox_id')).toBe(options.params.inboxId);
+    expect(payload.get('contact_id')).toBe(options.contactId);
+    expect(payload.get('source_id')).toBe(options.params.sourceId);
+    expect(payload.get('additional_attributes[mail_subject]')).toBe(
+      options.params.mailSubject
+    );
+    expect(payload.get('assignee_id')).toBe(options.params.assigneeId);
+    expect(payload.getAll('message[attachments][]')).toEqual([]);
   });
 });

app/javascript/shared/constants/busEvents.js

@@ -10,4 +10,5 @@ export const BUS_EVENTS = {
   ON_MESSAGE_LIST_SCROLL: 'ON_MESSAGE_LIST_SCROLL',
   WEBSOCKET_DISCONNECT: 'WEBSOCKET_DISCONNECT',
   SHOW_TOAST: 'newToastMessage',
+  NEW_CONVERSATION_MODAL: 'newConversationModal',
 };