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

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

@@ -1,9 +1,11 @@
 <template>
-  <div class="preview-item__wrap flex overflow-auto max-h-[12.5rem]">
+  <div
+    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 items-center p-1 bg-slate-50 dark:bg-slate-800 gap-1 rounded-md w-[15rem] mb-1"
+      class="preview-item flex p-1 bg-slate-50 dark:bg-slate-800 rounded-md w-[15rem] mb-1"
     >
       <div class="max-w-[4rem] flex-shrink-0 w-6 flex items-center">
         <img
@@ -15,7 +17,7 @@
           📄
         </span>
       </div>
-      <div class="max-w-[60%] min-w-[50%] overflow-hidden text-ellipsis">
+      <div class="max-w-[60%] min-w-[50%] overflow-hidden text-ellipsis ml-2">
         <span
           class="h-4 overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap"
         >

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

@@ -14,11 +14,10 @@
       <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="enableDragAndDrop"
+        :drop="true"
         :drop-directory="false"
         :data="{
           direct_upload_url: '/rails/active_storage/direct_uploads',
@@ -101,9 +100,9 @@
       <transition name="modal-fade">
         <div
           v-show="$refs.upload && $refs.upload.dropActive"
-          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"
+          class="modal-mask"
         >
-          <fluent-icon icon="cloud-backup" size="40" />
+          <fluent-icon icon="cloud-backup" />
           <h4 class="page-sub-title text-slate-600 dark:text-slate-200">
             {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
           </h4>
@@ -229,10 +228,6 @@ export default {
       type: String,
       default: '',
     },
-    newConversationModalActive: {
-      type: Boolean,
-      default: false,
-    },
   },
   computed: {
     ...mapGetters({
@@ -279,9 +274,6 @@ export default {
       }
       return ALLOWED_FILE_TYPES;
     },
-    enableDragAndDrop() {
-      return !this.newConversationModalActive;
-    },
     audioRecorderPlayStopIcon() {
       switch (this.recordingAudioState) {
         // playing paused recording stopped inactive destroyed
@@ -354,4 +346,12 @@ 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,7 +81,6 @@
     </div>
     <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
       <attachment-preview
-        class="mt-4 flex-col"
         :attachments="attachedFiles"
         :remove-attachment="removeAttachment"
       />
@@ -125,7 +124,6 @@
       :toggle-audio-recorder="toggleAudioRecorder"
       :toggle-emoji-picker="toggleEmojiPicker"
       :message="message"
-      :new-conversation-modal-active="newConversationModalActive"
       @selectWhatsappTemplate="openWhatsappTemplateModal"
       @toggle-editor="toggleRichContentEditor"
       @replace-text="replaceText"
@@ -162,7 +160,12 @@ 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 { AUDIO_FORMATS } from 'shared/constants/messages';
+import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+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,
@@ -174,13 +177,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');
 
@@ -205,7 +208,6 @@ export default {
     alertMixin,
     messageFormatterMixin,
     rtlMixin,
-    fileUploadMixin,
   ],
   props: {
     selectedTweet: {
@@ -245,7 +247,6 @@ export default {
       showUserMentions: false,
       showCannedMenu: false,
       showVariablesMenu: false,
-      newConversationModalActive: false,
     };
   },
   computed: {
@@ -570,25 +571,11 @@ 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({
@@ -917,6 +904,67 @@ 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);
@@ -1048,14 +1096,6 @@ 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>