vue-wiguet-chatweb 0.1.36 → 0.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-wiguet-chatweb",
-  "version": "0.1.36",
+  "version": "0.1.38",
   "type": "module",
   "files": [
     "dist",

package/src/components/Chat.vue

@@ -1,35 +1,61 @@
 <template>
   <div class="widget">
-    <div class="header-widget">
+    <div class="header-widget flex-0">
       <h4 class="title-chat">{{ titlePrincipal }}</h4>
       <button @click="() => toggleChat()" class="btn-close">
         <IconClose class="pointer" />
       </button>
     </div>
-    <div class="messages-container" ref="messageContainerRef">
-      <div class="loader" v-if="isLoading">
-        <Loader />
-      </div>
-      <MessageList
-        v-if="messagesData.data.length > 0"
-        :messages="messagesData.data"
-        :canLoadMoreMessages="messagesData.canLoadMoreMessages"
-        @loadMore="getMessages"
-        @retry="retryMessage"
-        @on-qualifying="(args) => onQualifying(args)"
-        @see="(message: Message) => {
-          currentDialogView = DIALOG_VIEWS.SEE
-          urlFileMessage = message.urlFile
-          dialog.title = 'Imagen'
-          dialog.modelValue = true
-        }"
-      />
-      <div class="fit" v-else>
-        <span class="center">No tienes mensajes</span>
+    
+    <div class="flex-1" style="position: relative; height: 0;">
+      <div
+        ref="dropZoneRef"
+        @drop.self.prevent="
+          (e) => {
+            dropHandler(e);
+            (e.target as HTMLElement)?.classList?.remove('drop-over');
+            (e.target as HTMLElement).style.zIndex = '-1';
+          }
+        "
+        @dragenter.self="
+          (e) => {
+            (e.target as HTMLElement)?.classList?.add('drop-over');
+          }
+        "
+        @dragleave.self="
+          (e) => {
+            (e.target as HTMLElement)?.classList?.remove('drop-over');
+            (e.target as HTMLElement).style.zIndex = '-1';
+          }
+        "
+        @dragover.prevent
+        style="position: absolute; bottom: 0; left: 0; right: 0; top: 0; z-index: -1;"
+      ></div>
+      <div class="messages-container" ref="messageContainerRef" @dragenter.prevent="dropZoneRef!.style.zIndex = '1'">
+        <div class="loader" v-if="isLoading">
+          <Loader />
+        </div>
+        <MessageList
+          v-if="messagesData.data.length > 0"
+          :messages="messagesData.data"
+          :canLoadMoreMessages="messagesData.canLoadMoreMessages"
+          @loadMore="getMessages"
+          @retry="retryMessage"
+          @on-qualifying="(args) => onQualifying(args)"
+          @see="(message: Message) => {
+            currentDialogView = DIALOG_VIEWS.SEE
+            urlFileMessage = message.urlFile
+            dialog.title = 'Imagen'
+            dialog.modelValue = true
+          }"
+        />
+        <div class="fit" v-else>
+          <span class="center">No tienes mensajes</span>
+        </div>
       </div>
     </div>
 
-    <div class="w-full">
+    <div class="w-full flex-0">
       <form v-if="!isDisabledBoxMessage" class="message-send" @submit.prevent="(event) => submitMessage()">
         <div class="form-message">
           <div class="jl-inputgroup-chat">
@@ -46,15 +72,15 @@
                 }
               "
               @keyup.enter="saltoDeLineaOEnviar"
+              @paste.prevent="handlePaste"
             />
 
             <input
               type="file"
               ref="fileInputRef"
               @change="onFileSelect"
-              accept="image/*"
+              accept="image/png,image/jpeg,image/jpg,image/webp"
               style="display: none;"
-              key="fileInputKey"
 
             />
             <button
@@ -64,7 +90,6 @@
               @click="
                 () => {
                   fileInputRef.value = '';
-                  fileInputKey++;
                   fileInputRef?.click();
                 }
               "
@@ -86,7 +111,7 @@
 
   <ODialog v-bind="dialog">
     <div v-if="currentDialogView === DIALOG_VIEWS.UPLOAD" class="flex flex-col justify-center items-center">
-      <img v-for="(urlFile, i) in urlFiles" :key="i" :src="urlFile.toString()" alt="Image" width="400" />
+      <img v-for="(urlFile, i) in urlFilesPreview" :key="i" :src="urlFile.toString()" alt="Image" width="400" />
 
       <form
           class="message-send"
@@ -124,7 +149,7 @@
         </form>
     </div>
     <div v-else>
-      <img v-if="urlFileMessage" :src="urlFileMessage" alt="Image" style="width: 55vw;" />
+      <img v-if="urlFileMessage" :src="urlFileMessage" alt="Image" style="max-height: 85vh;" />
     </div>
   </ODialog>
 </template>
@@ -176,9 +201,9 @@ const enum DIALOG_VIEWS {
 const message = ref("");
 const notViewed = ref(0);
 const fileInputRef = ref();
-const fileInputKey = ref(0);
 const currentDialogView = ref(DIALOG_VIEWS.SEE)
 const urlFileMessage = ref<string>()
+const dropZoneRef = ref<InstanceType<typeof HTMLElement>>();
 
 const messagesData = ref<{ data: Message[]; canLoadMoreMessages: boolean }>({
   data: [],
@@ -294,7 +319,7 @@ function createMessage(message: string, codigoTipoMensaje?: TypeMessageTypeCodes
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
     file: inputFiles.value?.[0],
-    urlFile: urlFiles.value?.[0],
+    urlFile: urlFilesPreview.value?.[0],
     messageType,
     sender: {
       nombreCompleto: props.user.nombreCompleto,
@@ -344,9 +369,12 @@ function updateMessageStatus(
 
     messageUpdated = { ...messageAResponder, chatId: newMessage?.chatId }
   } else {
-    messagesData.value.data[idxMessageToCommunicate] = messageUpdated;
+    const messageCopy =  { ...messageUpdated }
+    messageCopy.urlFile = messagesData.value.data[idxMessageToCommunicate].urlFile;
+    delete messageCopy.thumbnailFile;
+    messagesData.value.data[idxMessageToCommunicate] = messageCopy;
   }
-  
+
   return messageUpdated;
 }
 
@@ -355,7 +383,7 @@ const submitMessage = async (
 ) => {
 
   const newMessage = createMessage(message.value, messageExtraData?.codigoTipoMensaje);
-  message.value = '';
+
   if (!newMessage) return;
   
   let idxMessageToCommunicate = -1;
@@ -377,6 +405,9 @@ const submitMessage = async (
     codigoTipoMensaje: messageExtraData?.codigoTipoMensaje,
     files: inputFiles.value,
   }
+  
+  message.value = '';
+
   sendApi(body).then((messageSaved) => {
     let messageUpdated = updateMessageStatus(
       newMessage,
@@ -580,12 +611,13 @@ function onQualifying({ message: messageParam, emoji }: { message: Message, emoj
 
 const isDisabledBoxMessage = ref(false);
 
+const tiposArchivosPermitidos = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp'];
 // Adjuntar
 function onFileSelect() {
   inputFiles.value = [];
-  urlFiles.value = [];
-
-  const filesParam = fileInputRef.value?.files ?? []
+  urlFilesPreview.value = [];
+  
+  const filesParam: File[] = Array.from(fileInputRef.value?.files) ?? []
 
   const file = filesParam?.[0];
   
@@ -593,7 +625,7 @@ function onFileSelect() {
 
   if (!file) return;
 
-  if (!(['image/png','image/jpeg','image/jpg','image/webp'].includes(file.type))) {
+  if (!(tiposArchivosPermitidos.includes(file.type))) {
     emit('show-toast', {
       severity: "warn",
       summary: "Error",
@@ -613,10 +645,10 @@ function onFileSelect() {
     return
   }
 
-  urlFiles.value.push(URL.createObjectURL(file))
+  urlFilesPreview.value.push(URL.createObjectURL(file))
 
   currentDialogView.value = DIALOG_VIEWS.UPLOAD;
-  dialog.title = 'Preparar imagen';
+  dialog.title = 'Vista previa';
   dialog.modelValue = true;
   
   nextTick(()=>{
@@ -624,10 +656,69 @@ function onFileSelect() {
   })
 }
 
+
+const handlePaste = (e: ClipboardEvent) => {
+  const files = e.clipboardData?.files ?? (window as any).clipboardData?.files ?? [];
+
+  if (files.length === 0) return;
+
+  const file = files?.[0];
+
+  if (!file) return;
+
+  if (!tiposArchivosPermitidos.includes(file?.type)) return;
+
+  currentDialogView.value = DIALOG_VIEWS.UPLOAD;
+  urlFilesPreview.value = [];
+
+  inputFiles.value = [file];
+  urlFilesPreview.value.push(URL.createObjectURL(file));
+  dialog.modelValue = true;
+
+  nextTick(()=>{
+    textAreaRef.value?.focus()
+  })
+};
+
+function dropHandler(ev: DragEvent) {
+  if (!ev.dataTransfer?.items) return;
+
+  currentDialogView.value = DIALOG_VIEWS.UPLOAD;
+
+  Array.from(ev.dataTransfer.items).forEach((item) => {
+    if (item.kind === 'file') {
+      const file = item.getAsFile();
+
+      if (!file) return;
+
+      if (!tiposArchivosPermitidos.includes(file.type)) {
+        emit('show-toast',{
+          severity: 'error',
+          summary: 'Error',
+          detail: 'El archivo debe ser una imagen',
+          life: 5000,
+        });
+
+        return;
+      }
+
+      inputFiles.value = [file];
+
+      urlFilesPreview.value = [];
+      urlFilesPreview.value.push(URL.createObjectURL(file));
+      dialog.modelValue = true;
+    }
+  });
+
+  nextTick(()=>{
+    textAreaRef.value?.focus()
+  })
+}
+
 // Dialog
 
-const inputFiles = ref<(File & { objectURL: string })[]>([]);
-const urlFiles = ref<Array<string>>([]);
+const inputFiles = ref<File[]>([]);
+const urlFilesPreview = ref<Array<string>>([]);
 
 const dialog = reactive<IPropsDialog>({
   modelValue: false,
@@ -636,7 +727,7 @@ const dialog = reactive<IPropsDialog>({
 
     if (args) return;
 
-    urlFiles.value = [];
+    urlFilesPreview.value = [];
     inputFiles.value = [];
   },
   title: 'Preparar imagen'
@@ -687,6 +778,7 @@ onUnmounted(() => {
 
 .messages-container {
   position: relative;
+  height: 100%;
 }
 .loader {
   position: absolute;
@@ -713,4 +805,8 @@ onUnmounted(() => {
   margin: 1.5rem;
   text-align: center;
 }
+
+.drop-over {
+  border: 2px dashed #007bff !important;
+}
 </style>