vue-wiguet-chatweb 0.1.15 → 0.1.17

package/package.json

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

package/src/components/Chat.vue

@@ -15,6 +15,7 @@
         :canLoadMoreMessages="messagesData.canLoadMoreMessages"
         @loadMore="getMessages"
         @retry="retryMessage"
+        @on-qualifying="(args) => onQualifying(args)"
       />
     </div>
 
@@ -28,7 +29,11 @@
               required
               ref="textAreaRef"
               @input="() => autoAdjustHeight()"
-              @keydown.enter.prevent
+              @keydown.enter="
+                (event) => {
+                  !isMovil && event.preventDefault();
+                }
+              "
               @keyup.enter="saltoDeLineaOEnviar"
             />
 
@@ -43,7 +48,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick, PropType, watch, onUnmounted } from "vue";
+import {
+  ref,
+  onMounted,
+  nextTick,
+  PropType,
+  watch,
+  onUnmounted,
+  computed,
+} from "vue";
 import { v4 as uuidv4 } from "uuid";
 
 import {
@@ -58,6 +71,7 @@ import {
   getMessagesApi,
   sendMessageApi,
   setVistoToTrueApi,
+  updateMessageApi,
 } from "../store/index";
 import { getInformationApi } from "../store";
 import MessageList from "./MessageList.vue";
@@ -84,6 +98,7 @@ const emit = defineEmits([
   "new-message",
   "clear-new-messages",
   "not-viewed-total",
+  "onQualifying",
 ]);
 
 const props = defineProps({
@@ -109,8 +124,8 @@ const messageContainerRef = ref<HTMLElement | null>(null);
 watch(
   () => props.visible,
   async (current) => {
-    if(!current) return
-    
+    if (!current) return;
+
     emit("clear-new-messages");
     scrollToBottom();
 
@@ -122,18 +137,23 @@ watch(
 
     const resp = await getInformationApi(props.tokenAuth);
 
-    if(resp) {
+    if (resp) {
       appChatId.value = resp.appChat.id;
     }
   }
 );
 
 function saltoDeLineaOEnviar(event: KeyboardEvent) {
+  if(isMovil.value) {
+    autoAdjustHeight();
+    return;
+  }
+
   if (event.key === "Enter" && event.shiftKey) {
-    const val = (event.target as any)?.value || '';
+    const val = (event.target as any)?.value || "";
     (event.target as any).value = val + "\n";
-    autoAdjustHeight()
-    return
+    autoAdjustHeight();
+    return;
   }
 
   submitMessage(event);
@@ -149,7 +169,7 @@ const submitMessage = async (event: Event) => {
     });
     return;
   }
-  
+
   if (!message.value.trim()) {
     emit("show-toast", {
       severity: "warn",
@@ -176,11 +196,11 @@ const submitMessage = async (event: Event) => {
       msPersonaId: props.user.msPersonaId,
     },
   };
-  
+
   const idx = messagesData.value.data.push(newMessage) - 1;
-  
-  sendApi(message.value, appChatId.value).then((newMsg)=>{
-    if(!newMsg) {
+
+  sendApi(message.value, appChatId.value).then((newMsg) => {
+    if (!newMsg) {
       messagesData.value.data[idx].error = {
         error: true,
         id: newMessage.id,
@@ -194,13 +214,13 @@ const submitMessage = async (event: Event) => {
       });
     } else {
       messagesData.value.data[idx] = newMsg;
-      
-      const message = {...newMsg, chatId:newMessage.chatId }
+
+      const message = { ...newMsg, chatId: newMessage.chatId };
       socketService.value?.emit(
-        'sendMessage',
+        "sendMessage",
         { roomId: information?.value?.appChat.id, message },
         (response: any) => {
-          console.log('🚀 ~ socketService.value.emit ~ response:', response);
+          console.log("🚀 ~ socketService.value.emit ~ response:", response);
         }
       );
     }
@@ -208,7 +228,7 @@ const submitMessage = async (event: Event) => {
 
   message.value = "";
   scrollToBottom();
-  textAreaRef.value && (textAreaRef.value.style.height = "20px")
+  textAreaRef.value && (textAreaRef.value.style.height = "20px");
 };
 
 const sendApi = async (message: string, appChatId: string) => {
@@ -221,37 +241,35 @@ const sendApi = async (message: string, appChatId: string) => {
 };
 
 const getMessages = async () => {
-
   const lastMessagesId = messagesData.value.data[0]?.id;
   const body: ListMessageBody = {
     lastMessagesId,
     appChatId: appChatId.value,
-    limit: 10
+    limit: 10,
   };
 
   isLoading.value = true;
   const resp = await getMessagesApi({ body, token: props.tokenAuth });
   isLoading.value = false;
-  
+
   messagesData.value.data.unshift(
     ...resp.data.sort((a, b) => -b.createdAt.localeCompare(a.createdAt))
   );
-  
+
   messagesData.value.canLoadMoreMessages =
     resp.pagination.total > resp.pagination.size;
-  
+
   if (lastMessagesId && messageContainerRef.value?.scrollHeight) {
     mantainElementsOnViewport(messageContainerRef.value?.scrollHeight);
   }
-  
+
   if (!lastMessagesId) scrollToBottom();
 };
 
 const retryMessage = async (message: Message) => {
   emit("show-confirm", async () => {
-
     if (!message.error?.id) return;
-      
+
     const msg = await sendApi(message.message, appChatId.value);
 
     if (!msg) {
@@ -267,13 +285,13 @@ const retryMessage = async (message: Message) => {
         "id",
         message.error.id
       );
-      
+
       messagesData.value.data[idx] = { ...msg, error: undefined };
 
-      socketService.value?.emit(
-        'sendMessage',
-        { roomId: information?.value?.appChat.id, message },
-      );
+      socketService.value?.emit("sendMessage", {
+        roomId: information?.value?.appChat.id,
+        message,
+      });
     }
 
     scrollToBottom();
@@ -305,23 +323,28 @@ const fontSpace = 14;
 function autoAdjustHeight() {
   if (!textAreaRef.value) return;
 
-  textAreaRef.value.style.height = textAreaRef.value.scrollHeight - fontSpace + 'px'
+  textAreaRef.value.style.height =
+    textAreaRef.value.scrollHeight - fontSpace + "px";
+
+  if (textAreaRef.value.scrollHeight === textAreaRef.value.clientHeight)
+    return;
 
-  if(textAreaRef.value.scrollHeight === textAreaRef.value.clientHeight) return;
-  
-  textAreaRef.value.style.height = textAreaRef.value.scrollHeight + "px"
+  textAreaRef.value.style.height = textAreaRef.value.scrollHeight + "px";
 }
 
 const socketService = ref<Socket>();
 const information = ref<ChatInformation>();
 
-function connectMsWebSocket (userChat: ChatInformation ,app: APP_TYPE = APP_TYPE.WEBCHAT) {
-  if (!userChat) throw new Error('user chat is required')
+function connectMsWebSocket(
+  userChat: ChatInformation,
+  app: APP_TYPE = APP_TYPE.WEBCHAT
+) {
+  if (!userChat) throw new Error("user chat is required");
 
   socketService.value = io(window.VITE_SOCKET_URI, {
     query: {
       // TODO: confirmar si se quita o no
-      usuarioId: `${userChat?.chat?.persona?.funcionarioId}`, 
+      usuarioId: `${userChat?.chat?.persona?.funcionarioId}`,
       aplicacion: app,
     },
     extraHeaders: { Authorization: props.tokenAuth },
@@ -329,24 +352,24 @@ function connectMsWebSocket (userChat: ChatInformation ,app: APP_TYPE = APP_TYPE
 
   socketService.value.removeAllListeners();
 
-  socketService.value.on('connect', () => {
-    console.log('Conectado al servidor de sockets');
+  socketService.value.on("connect", () => {
+    console.log("Conectado al servidor de sockets");
 
-    socketService.value?.emit(
-      'joinRoom',
-      `${userChat?.appChat?.id}`
-    );
-  })
+    socketService.value?.emit("joinRoom", `${userChat?.appChat?.id}`);
+  });
 
-  socketService.value.on('disconnect', () => {
-    console.log('Desconectado del servidor de sockets');
+  socketService.value.on("disconnect", () => {
+    console.log("Desconectado del servidor de sockets");
   });
 
-  socketService.value.on('receiveMessage', (data: any) => {
-    console.log('Mensaje recibido:', data.message, userChat);
-    
-    if (data.message.sender.msPersonaId === userChat?.chat?.persona?.msPersonaId) return
-    
+  socketService.value.on("receiveMessage", (data: any) => {
+    console.log("Mensaje recibido:", data.message, userChat);
+
+    if (
+      data.message.sender.msPersonaId === userChat?.chat?.persona?.msPersonaId
+    )
+      return;
+
     messagesData.value.data.push(data.message);
     setVistoToTrueApi(data.message.appChatId, props.tokenAuth);
     scrollToBottom();
@@ -354,17 +377,92 @@ function connectMsWebSocket (userChat: ChatInformation ,app: APP_TYPE = APP_TYPE
   });
 }
 
+const isMovil = computed(() => {
+  return [OS.ANDROID, OS.IOS].includes(getOS() as OS);
+});
+
+const enum OS {
+  ANDROID = "Android",
+  IOS = "iPhone",
+}
+
+function getOS() {
+  const userAgent = window.navigator.userAgent;
+  const platform = (window.navigator as any)?.userAgentData?.platform || window.navigator.platform;
+  const macosPlatforms = [
+    "macOS",
+    "Macintosh",
+    "MacIntel",
+    "MacPPC",
+    "Mac68K",
+  ];
+  const windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"];
+  const iosPlatforms = ["iPhone", "iPad", "iPod"];
+
+  let os = null;
+
+  if (macosPlatforms.indexOf(platform) !== -1) {
+    os = "Mac OS";
+  } else if (iosPlatforms.indexOf(platform) !== -1) {
+    os = OS.IOS;
+  } else if (windowsPlatforms.indexOf(platform) !== -1) {
+    os = "Windows";
+  } else if (/Android/.test(userAgent)) {
+    os = OS.ANDROID;
+  } else if (/Linux/.test(platform)) {
+    os = "Linux";
+  }
+
+  return os;
+}
+
+function onQualifying({ message, emoji }: { message: Message, emoji: {icon: string, value: number } }) {
+  const callback =  async () => {
+    if (!message.id || !emoji) return;
+
+    const idx = searchFromLast<Message>(
+        messagesData.value.data,
+        "id",
+        message.id
+      );
+    
+    let prevMessage = messagesData.value?.data?.[idx].message
+    messagesData.value?.data?.[idx] && (messagesData.value.data[idx].message = emoji.icon);
+
+    const msg = await updateMessageApi(message.id, { message: emoji.icon, tipoCalificacionId: emoji.value }, props.tokenAuth);
+
+    if (!msg) {
+      messagesData.value?.data?.[idx] && (messagesData.value.data[idx].message = prevMessage);
+      emit("show-toast", {
+        severity: "error",
+        summary: "Error",
+        detail: "Ocurrio un error al enviar el mensaje, intente nuevamente",
+        life: 5000,
+      });
+      return 
+    }
+
+    socketService.value?.emit("sendMessage", {
+      roomId: information?.value?.appChat.id,
+      message,
+    });
+  }
+
+  emit('onQualifying', callback)
+};
+
+
 onMounted(async () => {
   if (appChatId.value) return;
-    
+
   const resp = await getInformationApi(props.tokenAuth);
-  
-  if(!resp) return;
-  
+
+  if (!resp) return;
+
   information.value = resp;
   appChatId.value = resp.appChat.id;
   notViewed.value = resp.appChat.totalNoVistosCliente;
-  connectMsWebSocket(resp)
+  connectMsWebSocket(resp);
   getMessages();
   emit("not-viewed-total", resp.appChat.totalNoVistosCliente);
 });

package/src/components/MessageList.vue

@@ -26,7 +26,25 @@
         <div class="chat-message">
           <div class="bubble" :class="message.esCliente ? 'right' : 'left'">
             <div :class="message.esCliente ? 'content-right' : 'content-left'">
-              <div class="message-text" style="white-space: pre-line" v-html="convertUrlsToLinks(message.message)"></div>
+              <div v-if="message.message === '😊😄🙂😐🙁'" class="flex gap-2" >
+                <div>
+                  <strong style="display: block; margin-bottom: 0.5rem;">Ayúdanos a mejorar nuestro servicio.</strong>
+                  <span>Que le pareció la atención:</span>
+                </div>
+                <a 
+                  v-for="emoji in emojis"
+                  href="javascript:"
+                  class="btn-icon"
+                  :key="emoji.value"
+                  @click="emit('onQualifying', { message, emoji })"
+                >
+                  <div class="flex flex-col items-center">
+                    <div class="icon">{{ emoji.icon }}</div>
+                    <span>{{ emoji.label }}</span>
+                  </div>
+                </a>
+              </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">
                 <span class="mr-5" v-if="message.sender?.nombreCompleto">
                   {{
@@ -53,13 +71,13 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, onBeforeMount, ref, watch } from "vue";
+import { PropType, onBeforeMount, ref, watch, h } from 'vue';
 import { useIntersectionObserver } from "@vueuse/core";
 import { type Message } from "../dto/app.dto";
 import { DateTime } from "luxon";
 import DangerIcon from "./DangerIcon.vue";
 
-const emit = defineEmits(["loadMore", "retry"]);
+const emit = defineEmits(["loadMore", "retry", "onQualifying"]);
 const props = defineProps({
   messages: {
     type: Array as PropType<Message[]>,
@@ -98,15 +116,51 @@ watch(
   }
 );
 
-function convertUrlsToLinks(content:string) {
-    // Expresión regular para detectar URLs
-    const urlRegex = /(https?:\/\/[^\s]+)/g;
+type RichTextType = {
+  regex: RegExp;
+  tag: string;
+};
+
+const richText: { [key in string]: RichTextType } = {
+  BOLD: { regex: /\*(.+?)\*(?!\*)/g, tag: '<strong--custom-tag>{val}</strong--custom-tag>' },
+  ITALIC: { regex: /_(.+?)_/, tag: '<i--custom-tag>{val}</i--custom-tag>' },
+  CROSSED_OUT: { regex: /~(.+?)~(?!~)/g, tag: '<del--custom-tag>{val}</del--custom-tag>' },
+  URL: {
+    regex: /(http?s?:\/\/[^\s]+)/g,
+    tag: '<a--custom-tag href="{val}" target="_blank">{val}</a--custom-tag>',
+  },
+};
+
+function textToRichFormat(text: string) {
+  const richTextValues = Object.values(richText);
+
+  if (!richTextValues || (Array.isArray(richTextValues) && richTextValues.length === 0))
+    return text;
+
+  const newMessage = () => {
+
+    return richTextValues.reduce((textPrev, rtv) => {
+      return textPrev.replace(rtv.regex, (middleValueAssert, middleValue) => {
+        const regexVerifyExistTag = /--custom-tag/;
 
-    // Reemplazar las URLs con etiquetas <a>
-    return content.replace(urlRegex, (url) => {
-        return `<a href="${url}" target="_blank">${url}</a>`;
-    });
+        if (regexVerifyExistTag.test(middleValueAssert)) return middleValueAssert;
+
+        return rtv.tag.replace(/{val}/g, middleValue);
+      });
+    }, text);
+  };
+
+  return newMessage().replace(/--custom-tag/g, '');
 }
+
+const emojis = [
+  { label: 'Excelente', value: 1,  icon: '😊' },
+  { label: 'Buena', value: 2,  icon: '😄' },
+  { label: 'Aceptable', value: 3,  icon: '🙂' },
+  { label: 'Mala', value: 4,  icon: '😐' },
+  { label: 'Muy Mala', value: 5, icon: '🙁' },
+]
+
 </script>
 
 <style scoped>
@@ -232,4 +286,32 @@ function convertUrlsToLinks(content:string) {
 .messages-container-list {
   width: 100%;
 }
+
+.btn-icon {
+  text-decoration: none;
+  border: none;
+}
+.btn-icon span {
+  color: currentColor;
+  text-wrap: nowrap;
+}
+
+.btn-icon .icon {
+  font-size: 2rem;
+}
+
+.flex { 
+  display: flex;
+  flex-wrap: wrap;
+}
+.flex-col {
+  flex-direction: column;
+}
+.items-center {
+  align-items: center;
+}
+.gap-2 {
+  gap: 0.5rem;
+}
+
 </style>

package/src/components/Widget.vue

@@ -50,6 +50,7 @@
         @clear-new-messages="newMessages = 0"
         @new-message="() => newMessages++"
         @not-viewed-total="(val) => (newMessages = val)"
+        @on-qualifying="(args)=> emit('onQualifying', args)"
       />
     </div>
   </div>
@@ -63,7 +64,7 @@ import IconTelegram from "./IconTelegram.vue";
 import IconWhatsApp from "./IconWhatsApp.vue";
 import IconChat from "./IconChat.vue";
 
-const emit = defineEmits(["show-toast", "show-confirm"]);
+const emit = defineEmits(["show-toast", "show-confirm", "onQualifying"]);
 
 const enum MeansCommunication{
   WHATSAPP,