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>