vue-wiguet-chatweb 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-wiguet-chatweb",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "type": "module",
   "files": [
     "dist",
@@ -29,16 +29,22 @@
     "build": "vue-tsc && vite build",
     "preview": "vite preview"
   },
-  "dependencies": {
+  "peerDependencies": {
+    "@vueuse/core": "^10.0.0",
     "axios": "^1.4.0",
-    "moment": "^2.29.4",
+    "luxon": "^3.0.0",
+    "uuid": "^9.0.1",
+    "vue": "^3.2.0"
+  },
+  "dependencies": {
     "socket.io-client": "^4.7.2",
     "vite-plugin-dts": "^3.4.0",
-    "vue": "^3.3.4",
     "vue-rabbit-frontend": "^0.0.15"
   },
   "devDependencies": {
+    "@types/luxon": "^3.4.2",
     "@types/node": "^20.4.6",
+    "@types/uuid": "^9.0.8",
     "@vitejs/plugin-vue": "^4.2.3",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",

package/src/components/Chat.vue

@@ -1,153 +1,269 @@
 <template>
-    <div class="widget">
-        <div class="header-widget">
-            <h4 class="title-chat">{{ titlePrincipal }}</h4>
-            <IconClose class="pointer" @click="toggleChat()"/>
-        </div>
-        <div class="messages-container" id="messages-container" ref="messagesContainer">
-          <chat-message class="message" v-for="(message, index) in messages" :key="index" :message="message">
-          </chat-message>
-        </div>
-        <div class="input-message w-full">
-          <form class="message-send" @submit.prevent="submitMessage">
-            <div class="form-message">
-              <button type="submit">
-                    <IconUser/>
-              </button>
-              <div class="jl-inputgroup-chat">
-                  <input v-model="message" class="jl2-input-chat" required/>
-                  <button type="submit" class="pointer">
-                    <IconSend/>
-                  </button>
-              </div>
-            </div>
-          </form>
+  <div class="widget">
+    <div class="header-widget">
+      <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
+        :messages="messagesData.data"
+        :canLoadMoreMessages="messagesData.canLoadMoreMessages"
+        @loadMore="getMessages"
+        @retry="retryMessage"
+      />
+    </div>
+
+    <div class="input-message w-full">
+      <form class="message-send" @submit.prevent="submitMessage">
+        <div class="form-message">
+          <!-- <button type="submit">
+            <IconUser />
+          </button> -->
+          <div class="jl-inputgroup-chat">
+            <input v-model="message" class="jl2-input-chat" required />
+            <button type="submit" class="pointer btn-primary">
+              <IconSend style="width: 20px; height: 20px" />
+            </button>
+          </div>
         </div>
+      </form>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
-import ChatMessage from './ChatMessage.vue';
-//import { useStore } from 'vuex';
-import { RabbitMQService } from 'vue-rabbit-frontend'
-import IconClose from './IconClose.vue'
-import IconSend from './IconSend.vue'
-import IconUser from './IconUser.vue'
-import {syncVirtualHostCentral,sendMessageByAppAndPhone,messagesByAppAndPhone} from '../store'
-///STORE
-//const store = useStore()
+import { ref, onMounted, nextTick, PropType, watch } from "vue";
+import { v4 as uuidv4 } from "uuid";
+
+import { RabbitMQService } from "vue-rabbit-frontend";
+import {
+  type SendMessageBody,
+  ListMessageBody,
+  Message,
+  RABBIT_EVENTS,
+} from "../dto/app.dto";
+import IconClose from "./IconClose.vue";
+import IconSend from "./IconSend.vue";
+// import IconUser from "./IconUser.vue";
+import { getMessagesApi, sendMessageApi } from "../store/index";
+import { getInformationApi } from "../store";
+import MessageList from "./MessageList.vue";
+import Loader from "./Loader.vue";
+import { searchFromLast } from "../resources/functions.helpers";
+
 //DATA
-const app = ref('webchat')
-// const deviceSelect = ref('76177719')
-const rabbitMQServiceListen:any = ref(null);
-const message:any = ref(null);
-const messages:any = ref([]);
-const virtualHost:any = ref({virtualhost:''});
+const rabbitMQServiceListen: any = ref(null);
+const message = ref("");
+
+const messagesData = ref<{ data: Message[]; canLoadMoreMessages: boolean }>({
+  data: [],
+  canLoadMoreMessages: false,
+});
+const virtualHost: any = ref({ virtualhost: "" });
+const appChatId = ref("");
+const isLoading = ref(false);
+
+const emit = defineEmits([
+  "show-toast",
+  "show-confirm",
+  "new-message",
+  "clear-new-messages",
+]);
 
 const props = defineProps({
-  titlePrincipal:{ type: String,default:'Comunicación en linea para consultas' },
-  toggleChat:{ type: Function, required: true },
-  tokenAuth:{ type: String, required: true },
-  phoneUser:{ type: String, required: true }
+  titlePrincipal: {
+    type: String,
+    default: "Comunicación en linea para consultas",
+  },
+  toggleChat: { type: Function, required: true },
+  tokenAuth: { type: String, required: true },
+  user: {
+    type: Object as PropType<{
+      nombreCompleto: string;
+      ci: string;
+      msPersonaId: number;
+    }>,
+    required: true,
+  },
+  visible: { type: Boolean, required: true },
 });
 
-const removeNumPrefix = (num:string) => {
-    if (num.startsWith("591") && num.length === 11) {
-      return num.substring(3);
-    }
-    return num;
-}
+const messageContainerRef = ref<HTMLElement | null>(null);
 
-const messagesContainer = ref<HTMLElement | null>(null);
+watch(
+  () => props.visible,
+  async (current) => {
+    if (current) {
+      emit("clear-new-messages");
+      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 (messagesData.value.data.length === 0) {
+        getMessages();
+      }
+    }
+  }
+);
+onMounted(async () => {
+  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();
+  }
+});
 
-const scrollToBottom = () => {
-  if (messagesContainer.value) {
-    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
+const submitMessage = async (event: any) => {
+  event.preventDefault();
+  if (message.value?.length > 300) {
+    emit("show-toast", {
+      severity: "warn",
+      summary: "Error",
+      detail: "El mensaje no puede superar los 300 caracteres",
+      life: 5000,
+    });
+    return;
+  }
+  if (!message.value.trim()) {
+    emit("show-toast", {
+      severity: "warn",
+      summary: "Error",
+      detail: "Por favor ingrese un mensaje",
+      life: 5000,
+    });
+    return;
+  }
+  const newMessage = {
+    id: uuidv4(),
+    message: message.value,
+    visto: true,
+    multimedia: false,
+    esCliente: true,
+    appChatId: appChatId.value,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    sender: {
+      nombreCompleto: props.user.nombreCompleto,
+      ci: props.user.ci,
+      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();
   }
 };
 
-const submitMessage = async (event:any) => {
-  event.preventDefault();
-  //const {virtualHost} = store.state
-  const {virtualhost} = virtualHost.value
-  // await store.dispatch('sendMessageByAppAndPhone',{
-  //   token:props.tokenAuth,
-  //   data:{
-  //     virtualHost:virtualHost.value,
-  //     queue:`widget_chat_${sessionStorage.getItem('tabBrowser')}`,//`${selectDetailtChat.value.app}_${queueUniqueUser.value}`,
-  //     device:'00000000',
-  //     phone:removeNumPrefix(deviceSelect.value),
-  //     app:app.value,
-  //     message: message.value,
-  //     widget:true
-  //   }
-  // })
-  await sendMessageByAppAndPhone({
-    token:props.tokenAuth,
-    data:{
-      virtualHost:virtualhost,
-      queue:`widget_chat_${sessionStorage.getItem('tabBrowser')}`,//`${selectDetailtChat.value.app}_${queueUniqueUser.value}`,
-      device:'00000000',
-      phone:removeNumPrefix(props.phoneUser),
-      app:app.value,
-      message: message.value,
-      widget:true
-    }
-  })
-  message.value = null
-  scrollToBottom()
-}
+const sendApi = async (message: string, appChatId: string) => {
+  const body: SendMessageBody = {
+    esCliente: true,
+    message,
+    appChatId,
+  };
+  return sendMessageApi(body, props.tokenAuth);
+};
 
+const getMessages = async () => {
+  try {
+    isLoading.value = true;
+    const lastMessagesId = messagesData.value.data[0]?.id;
+    const body: ListMessageBody = {
+      limit: 10,
+      lastMessagesId,
+      appChatId: appChatId.value,
+    };
 
-const getMessagesByApp = async (param:{resetConnection:boolean}) => {
-  if(param.resetConnection)
-      disconnectMsRabbit();
-  connectMsRabbit();
-  // const messagesParse = [];
-  // await store.dispatch('messagesByAppAndPhone', {
-  //   token:props.tokenAuth,
-  //   data:{
-  //     phone:props.phoneUser,
-  //     app:app.value,
-  //     device:null
-  //   }
-  // });
-  const getMessages = await messagesByAppAndPhone({
-    token:props.tokenAuth,
-    data:{
-      phone:props.phoneUser,
-      app:app.value,
-      device:null
+    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);
     }
-  });
-  //const messagesData = store.getters.get_messages_chat;
-  const messagesData = getMessages
-  if (messagesData) {
-    
-    messages.value = messagesData;
-  
-    // for (const msg of messagesData) {
-    //   messagesParse.push(...msg.messages);
-    // }
-    // messages.value = messagesParse;
+    if (!lastMessagesId) scrollToBottom();
+  } catch (error) {
+    isLoading.value = false;
+    throw error;
+  } finally {
+    isLoading.value = false;
   }
 };
 
-const connectMsRabbit = (app:any = 'webchat') => {
-  //const {virtualHost} = store.state
-  const {virtualhost} = virtualHost.value
-  let data = sessionStorage.getItem('tabBrowser');
-  if(!data){
-      let tab = Date.now();
-      sessionStorage.setItem('tabBrowser', `${tab}`)
+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) {
+      emit("show-toast", {
+        severity: "error",
+        summary: "Error",
+        detail: "Ocurrio un error al enviar el mensaje, intente nuevamente",
+        life: 5000,
+      });
+    } finally {
+      scrollToBottom();
+    }
+  });
+};
+
+const connectMsRabbit = (app: any = "webchat") => {
+  const { virtualhost } = virtualHost.value;
+  let data = sessionStorage.getItem("tabBrowser");
+  if (!data) {
+    let tab = Date.now();
+    sessionStorage.setItem("tabBrowser", `${tab}`);
   }
-  rabbitMQServiceListen.value = new RabbitMQService(`${virtualhost}`,`widget_chat_${sessionStorage.getItem('tabBrowser')}`);
+  rabbitMQServiceListen.value = new RabbitMQService(
+    `${virtualhost}`,
+    `widget_chat_${sessionStorage.getItem("tabBrowser")}`
+  );
   rabbitMQServiceListen.value.connect();
-  rabbitMQServiceListen.value.subscribe(async () => {
-    await getMessagesByApp({resetConnection:false});
-    const objDiv = document.getElementById("messages-container") as HTMLElement;
-    objDiv.scrollTop = objDiv.scrollHeight;
+
+  rabbitMQServiceListen.value.subscribe(async (val: any) => {
+    if (
+      val.event &&
+      val.event === RABBIT_EVENTS.NEW_MESSAGE &&
+      !val.message.esCliente
+    ) {
+      messagesData.value.data.push(val.message);
+      if (props.visible === false) {
+        emit("new-message");
+      }
+    }
   });
 };
 
@@ -155,26 +271,54 @@ const disconnectMsRabbit = () => {
   rabbitMQServiceListen.value?.disconnectClient();
 };
 
-onMounted(async () => {
-  await getMessagesByApp({resetConnection:false})
-  const virtualHostUniqueUser = `widget_chat_${props.phoneUser}`
-  // await store.dispatch('syncVirtualHostCentral',{
-  //   token:props.tokenAuth,
-  //   data:{
-  //     virtualHost:virtualHostUniqueUser
-  //   }
-  // })
-  virtualHost.value = await syncVirtualHostCentral({
-    token:props.tokenAuth,
-    data:{
-      virtualHost:virtualHostUniqueUser
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (messageContainerRef.value) {
+      messageContainerRef.value.scrollTop =
+        messageContainerRef.value.scrollHeight;
     }
-  })
-  connectMsRabbit()
-  scrollToBottom()
-});
+  });
+};
+
+const mantainElementsOnViewport = (scrollHeightBeforeAdd: number) => {
+  nextTick(() => {
+    const objDiv = messageContainerRef.value;
+    if (objDiv) {
+      objDiv.scrollTop = objDiv.scrollHeight - scrollHeightBeforeAdd;
+    }
+  });
+};
 </script>
 
 <style scoped>
-  @import url(../style.css);
+@import url(../style.css);
+.btn-primary {
+  padding: 10px 12px;
+  &:hover {
+    background-color: rgb(242, 139, 12, 0.1);
+  }
+}
+
+.btn-close {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  display: flex;
+  align-items: center;
+  border-radius: 50%;
+  &:hover {
+    background-color: rgba(202, 202, 202, 0.534);
+  }
+}
+
+.messages-container {
+  position: relative;
+}
+.loader {
+  position: absolute;
+  top: 18px;
+  z-index: 5;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 </style>

package/src/components/DangerIcon.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path
+      fill="rgb(248 113 113)"
+      d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

package/src/components/IconClose.vue

@@ -1,6 +1,6 @@
-<template>
-    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31Z" stroke="#B3B3B3" stroke-miterlimit="10"/>
-        <path d="M19.78 22.3L15.98 16.63H15.9601L12.2001 22.3H11.0701L15.37 15.8899L11.25 9.69995H12.38L15.98 15.08H16L19.67 9.69995H20.8L16.55 15.82L20.92 22.3H19.77H19.78Z" fill="#B3B3B3"/>
-    </svg>
+<template>
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31Z" stroke="#B3B3B3" stroke-miterlimit="10"/>
+        <path d="M19.78 22.3L15.98 16.63H15.9601L12.2001 22.3H11.0701L15.37 15.8899L11.25 9.69995H12.38L15.98 15.08H16L19.67 9.69995H20.8L16.55 15.82L20.92 22.3H19.77H19.78Z" fill="#B3B3B3"/>
+    </svg>
 </template>

package/src/components/IconSend.vue

@@ -1,6 +1,8 @@
-<template>
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M11.9301 23.25C5.65005 23.25 0.550049 18.14 0.550049 11.87C0.550049 5.6 5.66005 0.48999 11.9301 0.48999C18.2001 0.48999 23.3101 5.6 23.3101 11.87C23.3101 18.14 18.2001 23.25 11.9301 23.25ZM11.9301 1.10999C6.00005 1.10999 1.17004 5.94 1.17004 11.87C1.17004 17.8 6.00005 22.63 11.9301 22.63C17.8601 22.63 22.6899 17.8 22.6899 11.87C22.6899 5.94 17.8601 1.10999 11.9301 1.10999Z" fill="#F28B0C"/>
-    <path d="M8.68994 17.0601C8.63994 17.0601 8.58004 17.0501 8.54004 17.0201C8.44004 16.9701 8.38 16.8601 8.38 16.7501V6.99007C8.38 6.88007 8.44004 6.78005 8.54004 6.72005C8.64004 6.66005 8.74998 6.67005 8.84998 6.72005L17.1899 11.6001C17.2799 11.6601 17.34 11.7601 17.34 11.8701C17.34 11.9801 17.2799 12.0801 17.1899 12.1401L8.84998 17.0201C8.84998 17.0201 8.74994 17.0601 8.68994 17.0601ZM9 7.5301V16.21L16.42 11.8701L9 7.5301Z" fill="#F28B0C"/>
-    </svg>
-</template>
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path
+      fill="#F28B0C"
+      d="M16.1 260.2c-22.6 12.9-20.5 47.3 3.6 57.3L160 376V479.3c0 18.1 14.6 32.7 32.7 32.7c9.7 0 18.9-4.3 25.1-11.8l62-74.3 123.9 51.6c18.9 7.9 40.8-4.5 43.9-24.7l64-416c1.9-12.1-3.4-24.3-13.5-31.2s-23.3-7.5-34-1.4l-448 256zm52.1 25.5L409.7 90.6 190.1 336l1.2 1L68.2 285.7zM403.3 425.4L236.7 355.9 450.8 116.6 403.3 425.4z"
+    />
+  </svg>
+</template>

package/src/components/IconUser.vue

@@ -1,6 +1,6 @@
-<template>
-    <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M21.04 40.9399C32.0857 40.9399 41.04 31.9856 41.04 20.9399C41.04 9.89419 32.0857 0.939941 21.04 0.939941C9.99428 0.939941 1.03998 9.89419 1.03998 20.9399C1.03998 31.9856 9.99428 40.9399 21.04 40.9399Z" stroke="#F28B0C" stroke-width="1.5" stroke-miterlimit="10"/>
-        <path d="M22.87 20.36C24.92 19.57 26.38 17.5801 26.38 15.2601C26.38 12.2401 23.93 9.79004 20.91 9.79004C17.89 9.79004 15.44 12.2401 15.44 15.2601C15.44 17.6301 16.95 19.6401 19.06 20.4001C16.15 21.2601 14.02 23.9501 14.02 27.1301V31.7701C14.02 31.9401 14.16 32.08 14.33 32.08H27.76C27.93 32.08 28.07 31.9401 28.07 31.7701V27.1301C28.07 23.8901 25.86 21.16 22.87 20.36Z" fill="#F28B0C"/>
-    </svg>
+<template>
+    <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M21.04 40.9399C32.0857 40.9399 41.04 31.9856 41.04 20.9399C41.04 9.89419 32.0857 0.939941 21.04 0.939941C9.99428 0.939941 1.03998 9.89419 1.03998 20.9399C1.03998 31.9856 9.99428 40.9399 21.04 40.9399Z" stroke="#F28B0C" stroke-width="1.5" stroke-miterlimit="10"/>
+        <path d="M22.87 20.36C24.92 19.57 26.38 17.5801 26.38 15.2601C26.38 12.2401 23.93 9.79004 20.91 9.79004C17.89 9.79004 15.44 12.2401 15.44 15.2601C15.44 17.6301 16.95 19.6401 19.06 20.4001C16.15 21.2601 14.02 23.9501 14.02 27.1301V31.7701C14.02 31.9401 14.16 32.08 14.33 32.08H27.76C27.93 32.08 28.07 31.9401 28.07 31.7701V27.1301C28.07 23.8901 25.86 21.16 22.87 20.36Z" fill="#F28B0C"/>
+    </svg>
 </template>