feat: Add drag and drop for images/files in the agent input box (#2546)

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

@@ -12,8 +12,11 @@
       />
 
       <file-upload
+        ref="upload"
         :size="4096 * 4096"
         accept="image/*, application/pdf, audio/mpeg, video/mp4, audio/ogg, text/csv"
+        :drop="true"
+        :drop-directory="false"
         @input-file="onFileUpload"
       >
         <woot-button
@@ -37,6 +40,17 @@
         :title="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
         @click="toggleFormatMode"
       />
+      <transition name="modal-fade">
+        <div
+          v-show="$refs.upload && $refs.upload.dropActive"
+          class="modal-mask"
+        >
+          <i class="ion-ios-cloud-upload-outline icon"></i>
+          <h4 class="page-sub-title">
+            {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
+          </h4>
+        </div>
+      </transition>
     </div>
     <div class="right-wrap">
       <div v-if="isFormatMode" class="enter-to-send--checkbox">
@@ -198,4 +212,18 @@ export default {
     background: var(--s-100);
   }
 }
+
+.modal-mask {
+  color: var(--s-600);
+  background: var(--white-transparent);
+  flex-direction: column;
+}
+
+.page-sub-title {
+  color: var(--s-600);
+}
+
+.icon {
+  font-size: 8rem;
+}
 </style>

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

@@ -56,7 +56,8 @@
       "TIP_FORMAT_ICON": "Show rich text editor",
       "TIP_EMOJI_ICON": "Show emoji selector",
       "TIP_ATTACH_ICON": "Attach files",
-      "ENTER_TO_SEND": "Enter to send"
+      "ENTER_TO_SEND": "Enter to send",
+      "DRAG_DROP": "Drag and drop here to attach"
     },
     "VISIBLE_TO_AGENTS": "Private Note: Only visible to you and your team",
     "CHANGE_STATUS": "Conversation status changed",

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

@@ -1,5 +1,6 @@
 :root {
   --white: #fff;
+  --white-transparent: rgba(255, 255, 255, 0.9);
 
   --w-50: #E3F2FF;
   --w-100: #BBDDFF;