vue-wiguet-chatweb 0.1.15 → 0.1.16

package/package.json

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

package/src/components/Chat.vue

@@ -28,7 +28,11 @@
               required
               ref="textAreaRef"
               @input="() => autoAdjustHeight()"
-              @keydown.enter.prevent
+              @keydown.enter="
+                (event) => {
+                  !isMovil && event.preventDefault();
+                }
+              "
               @keyup.enter="saltoDeLineaOEnviar"
             />
 
@@ -43,7 +47,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 {
@@ -109,8 +121,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 +134,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 +166,7 @@ const submitMessage = async (event: Event) => {
     });
     return;
   }
-  
+
   if (!message.value.trim()) {
     emit("show-toast", {
       severity: "warn",
@@ -176,11 +193,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 +211,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 +225,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 +238,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 +282,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 +320,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 +349,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 +374,56 @@ 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;
+}
+
 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,7 @@
         <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 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">
                   {{
@@ -98,15 +98,43 @@ watch(
   }
 );
 
-function convertUrlsToLinks(content:string) {
-    // Expresión regular para detectar URLs
-    const urlRegex = /(https?:\/\/[^\s]+)/g;
+type RichTextType = {
+  regex: RegExp;
+  tag: string;
+};
 
-    // Reemplazar las URLs con etiquetas <a>
-    return content.replace(urlRegex, (url) => {
-        return `<a href="${url}" target="_blank">${url}</a>`;
-    });
+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/;
+
+        if (regexVerifyExistTag.test(middleValueAssert)) return middleValueAssert;
+
+        return rtv.tag.replace(/{val}/g, middleValue);
+      });
+    }, text);
+  };
+
+  return newMessage().replace(/--custom-tag/g, '');
 }
+
 </script>
 
 <style scoped>