fix: Issues with drag and drop attachments to the editor (#10235)

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

@@ -1,4 +1,5 @@
 <script>
+import { ref } from 'vue';
 // constants & helpers
 import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
@@ -62,8 +63,14 @@ export default {
     const { fetchSignatureFlagFromUISettings, setSignatureFlagForInbox } =
       useUISettings();
     const v$ = useVuelidate();
+    const uploadAttachment = ref(false);
 
-    return { fetchSignatureFlagFromUISettings, setSignatureFlagForInbox, v$ };
+    return {
+      fetchSignatureFlagFromUISettings,
+      setSignatureFlagForInbox,
+      v$,
+      uploadAttachment,
+    };
   },
   data() {
     return {
@@ -558,7 +565,7 @@ export default {
 
     <transition v-if="isEmailOrWebWidgetInbox" name="modal-fade">
       <div
-        v-show="$refs.uploadAttachment && $refs.uploadAttachment.dropActive"
+        v-show="uploadAttachment && uploadAttachment.dropActive"
         class="absolute top-0 bottom-0 left-0 right-0 z-30 flex flex-col items-center justify-center w-full h-full gap-2 bg-white/80 dark:bg-slate-700/80"
       >
         <fluent-icon icon="cloud-backup" size="40" />