vue-wiguet-chatweb 0.0.19 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-wiguet-chatweb",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "type": "module",
   "files": [
     "dist",
@@ -27,7 +27,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "prepack": "npm run build"
   },
   "peerDependencies": {
     "@vueuse/core": "^10.0.0",
@@ -37,14 +38,19 @@
     "vue": "^3.2.0"
   },
   "dependencies": {
+    "@vueuse/core": "^10.0.0",
+    "axios": "^1.4.0",
+    "luxon": "^3.0.0",
     "socket.io-client": "^4.7.2",
+    "uuid": "^9.0.1",
     "vite-plugin-dts": "^3.4.0",
+    "vue": "^3.2.0",
     "vue-rabbit-frontend": "^0.0.15"
   },
   "devDependencies": {
     "@types/luxon": "^3.4.2",
     "@types/node": "^20.4.6",
-    "@types/uuid": "^9.0.8",
+    "@types/uuid": "^10.0.0",
     "@vitejs/plugin-vue": "^4.2.3",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",

package/src/components/Chat.vue

@@ -29,9 +29,10 @@
               v-model="message"
               class="jl2-input-chat"
               required
-              ref="textArea"
+              ref="textAreaRef"
               @input="() => autoAdjustHeight()"
-              @keyup.enter="(ev) => submitMessage(ev)"
+              @keydown.enter.prevent
+              @keyup.enter.prevent="submitMessage"
             />
             <button type="submit" class="pointer btn-primary">
               <IconSend style="width: 20px; height: 20px" />
@@ -52,7 +53,6 @@ import {
   type SendMessageBody,
   ListMessageBody,
   Message,
-  RABBIT_EVENTS,
 } from "../dto/app.dto";
 import IconClose from "./IconClose.vue";
 import IconSend from "./IconSend.vue";
@@ -66,6 +66,7 @@ import { getInformationApi } from "../store";
 import MessageList from "./MessageList.vue";
 import Loader from "./Loader.vue";
 import { searchFromLast } from "../resources/functions.helpers";
+import { RABBIT_EVENTS } from "../dto/app.dto";
 
 //DATA
 const rabbitMQServiceListen: any = ref(null);
@@ -111,39 +112,42 @@ const messageContainerRef = ref<HTMLElement | null>(null);
 watch(
   () => props.visible,
   async (current) => {
-    if (current) {
-      emit("clear-new-messages");
-      scrollToBottom();
-      if (!virtualHost.value || !appChatId.value) {
-        const resp = await getInformationApi(props.tokenAuth);
-        const data = resp.response.data;
-        virtualHost.value = data.virtualHost;
-        appChatId.value = data.appChat.id;
-        connectMsRabbit();
-      }
-      if (notViewed.value > 0) {
-        setVistoToTrueApi(appChatId.value, props.tokenAuth);
-      }
+    if(!current) return
+    
+    emit("clear-new-messages");
+    scrollToBottom();
+
+    if (notViewed.value > 0) {
+      setVistoToTrueApi(appChatId.value, props.tokenAuth);
+    }
+
+    if (virtualHost.value && appChatId.value) return;
+
+    const resp = await getInformationApi(props.tokenAuth);
+
+    if(resp) {
+      virtualHost.value = resp.virtualHost;
+      appChatId.value = resp.appChat.id;
+      connectMsRabbit();
     }
   }
 );
 onMounted(async () => {
-  if (!virtualHost.value || !appChatId.value) {
-    try {
-      const resp = await getInformationApi(props.tokenAuth);
-      const data = resp.response.data;
-      virtualHost.value = data.virtualHost;
-      appChatId.value = data.appChat.id;
-      emit("not-viewed-total", data.appChat.totalNoVistosCliente);
-      notViewed.value = data.appChat.totalNoVistosCliente;
-      getMessages();
-      connectMsRabbit();
-    } catch (error) {}
-  }
+  if (virtualHost.value && appChatId.value) return;
+    
+  const resp = await getInformationApi(props.tokenAuth);
+  
+  if(!resp) return;
+
+  virtualHost.value = resp.virtualHost;
+  appChatId.value = resp.appChat.id;
+  emit("not-viewed-total", resp.appChat.totalNoVistosCliente);
+  notViewed.value = resp.appChat.totalNoVistosCliente;
+  getMessages();
+  connectMsRabbit();
 });
 
-const submitMessage = async (event: any) => {
-  event.preventDefault();
+const submitMessage = async (event: Event) => {
   if (message.value?.length > 300) {
     emit("show-toast", {
       severity: "warn",
@@ -153,6 +157,7 @@ const submitMessage = async (event: any) => {
     });
     return;
   }
+  
   if (!message.value.trim()) {
     emit("show-toast", {
       severity: "warn",
@@ -162,6 +167,7 @@ const submitMessage = async (event: any) => {
     });
     return;
   }
+
   const newMessage = {
     id: uuidv4(),
     message: message.value,
@@ -177,25 +183,31 @@ const submitMessage = async (event: any) => {
       msPersonaId: props.user.msPersonaId,
     },
   };
+
+  
   const idx = messagesData.value.data.push(newMessage) - 1;
-  try {
-    const newMsg = await sendApi(message.value, appChatId.value);
-    messagesData.value.data[idx] = newMsg.response.data;
-  } catch (error) {
-    messagesData.value.data[idx].error = {
-      error: true,
-      id: newMessage.id,
-    };
-    emit("show-toast", {
-      severity: "error",
-      summary: "Error",
-      detail: "Ocurrio un error al enviar el mensaje, intente nuevamente",
-      life: 5000,
-    });
-  } finally {
-    message.value = "";
-    scrollToBottom();
-  }
+  
+  sendApi(message.value, appChatId.value).then((newMsg)=>{
+    if(!newMsg) {
+      messagesData.value.data[idx].error = {
+        error: true,
+        id: newMessage.id,
+      };
+
+      emit("show-toast", {
+        severity: "error",
+        summary: "Error",
+        detail: "Ocurrio un error al enviar el mensaje, intente nuevamente",
+        life: 5000,
+      });
+    } else {
+      messagesData.value.data[idx] = newMsg;
+    }
+  });
+
+  message.value = "";
+  scrollToBottom();
+  textAreaRef.value && (textAreaRef.value.style.height = "20px")
 };
 
 const sendApi = async (message: string, appChatId: string) => {
@@ -208,54 +220,57 @@ const sendApi = async (message: string, appChatId: string) => {
 };
 
 const getMessages = async () => {
-  try {
-    isLoading.value = true;
-    const lastMessagesId = messagesData.value.data[0]?.id;
-    const body: ListMessageBody = {
-      limit: 10,
-      lastMessagesId,
-      appChatId: appChatId.value,
-    };
-
-    const resp = await getMessagesApi({ body, token: props.tokenAuth });
-    messagesData.value.data.unshift(
-      ...resp.data.sort((a, b) => -b.createdAt.localeCompare(a.createdAt))
-    );
-    messagesData.value.canLoadMoreMessages =
-      resp.pagination.total > resp.pagination.limit;
-    if (lastMessagesId && messageContainerRef.value?.scrollHeight) {
-      mantainElementsOnViewport(messageContainerRef.value?.scrollHeight);
-    }
-    if (!lastMessagesId) scrollToBottom();
-  } catch (error) {
-    isLoading.value = false;
-    throw error;
-  } finally {
-    isLoading.value = false;
+
+  const lastMessagesId = messagesData.value.data[0]?.id;
+  const body: ListMessageBody = {
+    lastMessagesId,
+    appChatId: appChatId.value,
+    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 () => {
-    try {
-      if (!message.error?.id) return;
-      const msg = await sendApi(message.message, appChatId.value);
-      const idx = searchFromLast<Message>(
-        messagesData.value.data,
-        "id",
-        message.error.id
-      );
-      messagesData.value.data[idx] = { ...msg.response.data, error: undefined };
-    } catch (error) {
+
+    if (!message.error?.id) return;
+      
+    const msg = await sendApi(message.message, appChatId.value);
+
+    if (!msg) {
       emit("show-toast", {
         severity: "error",
         summary: "Error",
         detail: "Ocurrio un error al enviar el mensaje, intente nuevamente",
         life: 5000,
       });
-    } finally {
-      scrollToBottom();
+    } else {
+      const idx = searchFromLast<Message>(
+        messagesData.value.data,
+        "id",
+        message.error.id
+      );
+      
+      messagesData.value.data[idx] = { ...msg, error: undefined };
     }
+
+    scrollToBottom();
   });
 };
 
@@ -313,18 +328,20 @@ const mantainElementsOnViewport = (scrollHeightBeforeAdd: number) => {
   });
 };
 
-const textArea = ref<HTMLTextAreaElement>();
+const textAreaRef = ref<HTMLTextAreaElement>();
+
+const fontSpace = 14;
 
 function autoAdjustHeight() {
-  if (!textArea.value) return;
-  // Reset the height to default to get the scroll height
-  textArea.value.style.height = "auto";
-  // Set the new height based on the scroll height
-  textArea.value.style.height =
-    textArea.value.scrollHeight === 54
-      ? textArea.value.scrollHeight - 12 + "px"
-      : textArea.value.scrollHeight + "px";
+  if (!textAreaRef.value) return;
+
+  textAreaRef.value.style.height = textAreaRef.value.scrollHeight - fontSpace + 'px'
+
+  if(textAreaRef.value.scrollHeight === textAreaRef.value.clientHeight) return;
+  
+  textAreaRef.value.style.height = textAreaRef.value.scrollHeight + "px"
 }
+
 </script>
 
 <style scoped>

package/src/components/ChatMessage.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="chat-message">
+
+    <div class="bubble" :class="self ? 'left' : 'right'">
+        <div :class="self ? 'content-left' : 'content-right'">
+            <div class="message">
+              {{ message.messages.dataMessage }}
+            </div>
+            <div class="detail-message flex justify-content-between">
+                <span class="mr-5" v-if="message.messages.user?.nombreCompleto">
+                  {{ textCapitalize(message.messages.user.nombreCompleto) }}
+                </span>
+                <span class="mr-5" v-else>
+                </span>
+                <span>
+                  {{ formatTimeAPDate(message.messages.createdAt) }}
+                </span>
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+  
+<script setup lang="ts">
+import {computed } from 'vue';
+import { formatTimeAPDate,textCapitalize } from '../resources/functions.helpers'
+const props = defineProps({
+    message:{ type: Object, required: true },
+});
+
+const self = computed(() => {
+  return props.message.messages.responseOrigin;
+});
+
+</script>
+  
+<style scoped>
+.bubble {
+  --r: 25px;
+  /* the radius */
+  --t: 30px;
+  /* the size of the tail */
+
+  max-width: 50%;
+  min-width: 250px;
+  padding: calc(2*var(--r)/3);
+  -webkit-mask:
+    radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
+    conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r)/-2) calc(var(--r)/-2) padding-box,
+    radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0/var(--r) var(--r) space padding-box;
+  /* background: linear-gradient(135deg, #FE6D00, #1384C5) border-box; */
+  color: #fff;
+}
+
+.left {
+  --_d: 0%;
+  border-left: var(--t) solid #0000;
+  margin-right: var(--t);
+  background-color: #fcd7ae;
+  color:#4d4d4d;
+  place-self: start;
+}
+
+.bubble > .content-left{
+  margin-right: 10px;
+  margin-bottom: 1px;
+}
+
+.right {
+  --_d: 100%;
+  border-right: var(--t) solid #0000;
+  margin-left: var(--t);
+  background-color: #fdeedb;
+  color:#4d4d4d;
+  place-self: end;
+}
+
+.bubble > .content-right{
+  margin-bottom: 1px;
+  margin-right: 10px;
+}
+
+.message{
+  text-align: initial;
+  word-break: break-all;
+  margin-bottom: 10px;
+}
+.detail-message{
+  font-size: 10px;
+  color: #808080;
+  display: flex;
+  justify-content:space-between;
+}
+
+.chat-message {
+  max-width: 250px;
+  min-width: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 20%); */
+}
+
+</style>