From e6e9916fdb377400af0a7a9985a9a394b9819013 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 30 Jun 2021 20:32:17 +0530
Subject: [PATCH] feat: Add drag and drop for images/files in the agent input
 box (#2546)

---
 .../widgets/WootWriter/ReplyBottomPanel.vue   | 28 +++++++++++++++++++
 .../i18n/locale/en/conversation.json          |  3 +-
 .../shared/assets/stylesheets/colors.scss     |  1 +
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index 60e7625e5..65bcdc74f 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/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>
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 133bdcaa2..81c023aa5 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/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",
diff --git a/app/javascript/shared/assets/stylesheets/colors.scss b/app/javascript/shared/assets/stylesheets/colors.scss
index eca7b4514..ba1b44045 100644
--- a/app/javascript/shared/assets/stylesheets/colors.scss
+++ b/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;