vue-wiguet-chatweb 0.1.21 → 0.1.23

package/package.json

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

package/src/components/Chat.vue

@@ -11,16 +11,20 @@
         <Loader />
       </div>
       <MessageList
+        v-if="messagesData.data.length > 0"
         :messages="messagesData.data"
         :canLoadMoreMessages="messagesData.canLoadMoreMessages"
         @loadMore="getMessages"
         @retry="retryMessage"
         @on-qualifying="(args) => onQualifying(args)"
       />
+      <div class="fit" v-else>
+        <span class="center">No tienes mensajes</span>
+      </div>
     </div>
 
     <div class="w-full">
-      <form class="message-send" @submit.prevent="(event) => submitMessage(event)">
+      <form v-if="!isDisabledBoxMessage" class="message-send" @submit.prevent="(event) => submitMessage(event)">
         <div class="form-message">
           <div class="jl-inputgroup-chat">
             <textarea
@@ -44,6 +48,9 @@
           </div>
         </div>
       </form>
+      <span class="message-send-block" v-else>
+        Necesitamos que nos califique la atención para continuar
+      </span>
     </div>
   </div>
 </template>
@@ -80,6 +87,7 @@ import Loader from "./Loader.vue";
 import { searchFromLast } from "../resources/functions.helpers";
 import { io, Socket } from "socket.io-client";
 import { APP_TYPE } from "../dto/chat.dto";
+import { MESSAGE_TYPE_CODES } from "../resources/constants/message-type.constant";
 
 //DATA
 const message = ref("");
@@ -281,6 +289,8 @@ const submitMessage = async (
     
     if(!messageUpdated) return
 
+    isDisabledBoxMessage.value = !!messagesData.value.data.find((msg) => msg.messageType?.code === MESSAGE_TYPE_CODES.PREGUNTA && msg.response == null);
+
     socketService.value?.emit(
       "sendMessage",
       { roomId: information?.value?.appChat.id, message: messageUpdated },
@@ -315,6 +325,8 @@ const getMessages = async () => {
   const resp = await getMessagesApi({ body, token: props.tokenAuth });
   isLoading.value = false;
 
+  isDisabledBoxMessage.value = !!resp.data.find((msg) => msg.messageType?.code === MESSAGE_TYPE_CODES.PREGUNTA && msg.response == null);
+
   messagesData.value.data.unshift(
     ...resp.data.sort((a, b) => -b.createdAt.localeCompare(a.createdAt))
   );
@@ -443,6 +455,8 @@ function connectMsWebSocket(
         messagesData.value.data.push(data.message);
     }
 
+    isDisabledBoxMessage.value = !!messagesData.value.data.find((msg) => msg.messageType?.code === MESSAGE_TYPE_CODES.PREGUNTA && msg.response == null);
+
     setVistoToTrueApi(data.message.appChatId, props.tokenAuth);
     scrollToBottom();
     !props.visible && emit("new-message");
@@ -500,6 +514,7 @@ function onQualifying({ message: messageParam, emoji }: { message: Message, emoj
   emit('onQualifying', { message: emoji.iconUnicode , callback})
 };
 
+const isDisabledBoxMessage = ref(false);
 
 onMounted(async () => {
   if (appChatId.value) return;
@@ -551,4 +566,22 @@ onUnmounted(() => {
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+.fit {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.message-send-block {
+  display: block;
+  margin: 1.5rem;
+  text-align: center;
+}
 </style>

package/src/components/ChatMessage.vue

@@ -22,8 +22,8 @@
 </template>
   
 <script setup lang="ts">
-// TODO: parece que no se usa
-import {computed } from 'vue';
+// TODO: parece que no se usa el componente
+import { computed } from 'vue';
 import { formatTimeAPDate,textCapitalize } from '../resources/functions.helpers'
 const props = defineProps({
     message:{ type: Object, required: true },

package/src/components/MessageList.vue

@@ -26,25 +26,27 @@
         <div class="chat-message">
           <div class="bubble" :class="message.esCliente ? 'right' : 'left'">
             <div :class="message.esCliente ? 'content-right' : 'content-left'">
-              <div v-if="message.message === '😊😄🙂😐🙁'" class="flex gap-2" >
+              <div v-if="message.message === '😊😄🙂😐🙁'" class="flex flex-col gap-2" >
                 <div class="mb-2">
                   <strong style="display: block;">Ayúdanos a mejorar nuestro servicio.</strong>
                   <span>¿Que le pareció la atención?</span>
                 </div>
 
-                <a 
-                  v-for="emojiParam in emojis"
-                  :key="emojiParam.value"
-                  :href="!message.response ? 'javascript:' : undefined"
-                  class="btn-icon"
-                  :class="{ 'content-disabled' : !showIcon(message, emojiParam) }"
-                  @click="!message.response && emit('onQualifying', { message, emoji: emojiParam })"
-                >
-                  <div class="flex flex-col items-center">
-                    <img :src="emojiParam.icon" alt="icono" class="icon" />
-                    <span>{{ emojiParam.label }}</span>
-                  </div>
-                </a>
+                <div style="font-size: 14px;" class="flex justify-between gap-2">
+                  <a 
+                    v-for="emojiParam in emojis"
+                    :key="emojiParam.value"
+                    :href="!message.response ? 'javascript:' : undefined"
+                    class="btn-icon"
+                    :class="{ 'content-disabled' : !showIcon(message, emojiParam) }"
+                    @click="!message.response && emit('onQualifying', { message, emoji: emojiParam })"
+                  >
+                    <div class="flex flex-col items-center">
+                      <img :src="emojiParam.icon" alt="icono" class="icon" />
+                      <span>{{ emojiParam.label }}</span>
+                    </div>
+                  </a>
+                </div>
               </div>
 
               <div v-else-if="emoji[message.message ?? '']">
@@ -52,7 +54,8 @@
               </div>
 
               <div v-else class="message-text" style="white-space: pre-line" v-html="textToRichFormat(message.message)"></div>
-              <div class="detail-message flex justify-content-between">
+
+              <div class="detail-message flex justify-between mt-2">
                 <span class="mr-5" v-if="message.sender?.nombreCompleto">
                   {{
                     message.esCliente
@@ -354,10 +357,17 @@ const emoji: { [key in string]: any } = {
   margin-bottom: 8px;
 }
 
+.mt-2 {
+  margin-top: 8px;
+}
+
 .content-disabled {
   -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
   filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
   opacity: 0.5;
 }
+.justify-between {
+  justify-content: space-between;
+}
 
 </style>