vue-wiguet-chatweb 0.1.23 → 0.1.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-wiguet-chatweb",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "type": "module",
   "files": [
     "dist",
@@ -34,9 +34,11 @@
     "prepack": "npm run build"
   },
   "peerDependencies": {
+    "@primevue/themes": "^4.2.5",
     "@vueuse/core": "^10.0.0",
     "axios": "^1.4.0",
     "luxon": "^3.0.0",
+    "primevue": "^4.2.5",
     "socket.io-client": "^4.7.2",
     "uuid": "^9.0.1",
     "vue": "^3.2.0"
@@ -46,12 +48,10 @@
     "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"
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
+    "@primevue/auto-import-resolver": "^4.2.5",
     "@types/luxon": "^3.4.2",
     "@types/node": "^20.4.6",
     "@types/uuid": "^10.0.0",
@@ -59,9 +59,11 @@
     "@vitest/coverage-v8": "^2.1.8",
     "@vue/test-utils": "^2.4.6",
     "jsdom": "^25.0.1",
+    "rollup-plugin-visualizer": "^5.14.0",
     "typescript": "^5.0.2",
     "vite": "^5.4.11",
+    "vite-plugin-dts": "^4.5.0",
     "vitest": "^2.1.8",
-    "vue-tsc": "^1.8.5"
+    "vue-tsc": "^2.2.0"
   }
 }

package/src/components/Chat.vue

@@ -17,6 +17,12 @@
         @loadMore="getMessages"
         @retry="retryMessage"
         @on-qualifying="(args) => onQualifying(args)"
+        @see="(message: Message) => {
+          currentDialogView = DIALOG_VIEWS.SEE
+          urlFileMessage = message.urlFile
+          dialog.title = 'Imagen'
+          dialog.modelValue = true
+        }"
       />
       <div class="fit" v-else>
         <span class="center">No tienes mensajes</span>
@@ -24,7 +30,7 @@
     </div>
 
     <div class="w-full">
-      <form v-if="!isDisabledBoxMessage" class="message-send" @submit.prevent="(event) => submitMessage(event)">
+      <form v-if="!isDisabledBoxMessage" class="message-send" @submit.prevent="(event) => submitMessage()">
         <div class="form-message">
           <div class="jl-inputgroup-chat">
             <textarea
@@ -36,12 +42,36 @@
               @input="() => autoAdjustHeight()"
               @keydown.enter="
                 (event) => {
-                  !isMovil && event.preventDefault();
+                  !isMobile && event.preventDefault();
                 }
               "
               @keyup.enter="saltoDeLineaOEnviar"
             />
 
+            <input
+              type="file"
+              ref="fileInputRef"
+              @change="onFileSelect"
+              accept="image/*"
+              style="display: none;"
+              key="fileInputKey"
+
+            />
+            <button
+              type="button"
+              class="pointer btn-primary"
+              title="Adjuntar archivo"
+              @click="
+                () => {
+                  fileInputRef.value = '';
+                  fileInputKey++;
+                  fileInputRef?.click();
+                }
+              "
+            >
+              <IconAttach style="width: 20px; height: 20px" />
+            </button>
+
             <button type="submit" class="pointer btn-primary">
               <IconSend style="width: 20px; height: 20px" />
             </button>
@@ -53,6 +83,51 @@
       </span>
     </div>
   </div>
+
+  <ODialog v-bind="dialog">
+    <div v-if="currentDialogView === DIALOG_VIEWS.UPLOAD" class="flex flex-col gap-3 justify-center items-center">
+      <img v-for="(urlFile, i) in urlFiles" :key="i" :src="urlFile.toString()" alt="Image" width="400" />
+
+      <form
+          class="message-send"
+          @submit.prevent="
+            (event) => {
+              submitMessage();
+              dialog.modelValue = false;
+            }
+          "
+        >
+          <div class="form-message">
+            <div class="jl-inputgroup-chat">
+              <textarea
+                v-model="message"
+                autofocus
+                class="jl2-input-chat"
+                placeholder="Escribe tu mensaje"
+                ref="textAreaRef"
+                @input="() => autoAdjustHeight()"
+                @keydown.enter="
+                  (event) => {
+                    !isMobile && event.preventDefault();
+                  }
+                "
+                @keyup.enter="(event)=>{
+                  saltoDeLineaOEnviar(event, MESSAGE_TYPE_CODES.IMAGEN)
+                  dialog.modelValue = false;
+                }"
+              />
+
+              <button type="submit" class="pointer btn-primary">
+                <IconSend style="width: 20px; height: 20px" />
+              </button>
+            </div>
+          </div>
+        </form>
+    </div>
+    <div v-else>
+      <img v-if="urlFileMessage" :src="urlFileMessage" alt="Image" style="width: 55vw;" />
+    </div>
+  </ODialog>
 </template>
 
 <script setup lang="ts">
@@ -63,7 +138,7 @@ import {
   PropType,
   watch,
   onUnmounted,
-  computed,
+  reactive,
 } from "vue";
 import { v4 as uuidv4 } from "uuid";
 
@@ -87,11 +162,24 @@ 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";
+import { MESSAGE_TYPE_CODES, TypeMessageTypeCodes } from "../resources/constants/message-type.constant";
+import { useMobile } from "../hooks/useMobile";
+import IconAttach from "./IconAttach.vue";
+import ODialog from "./ODialog/ODialog.vue";
+import { IPropsDialog } from "./ODialog/IPropsDialog";
+
+const enum DIALOG_VIEWS {
+  UPLOAD,
+  SEE
+}
 
 //DATA
 const message = ref("");
 const notViewed = ref(0);
+const fileInputRef = ref();
+const fileInputKey = ref(0);
+const currentDialogView = ref(DIALOG_VIEWS.SEE)
+const urlFileMessage = ref<string>()
 
 const messagesData = ref<{ data: Message[]; canLoadMoreMessages: boolean }>({
   data: [],
@@ -152,8 +240,8 @@ watch(
   }
 );
 
-function saltoDeLineaOEnviar(event: KeyboardEvent) {
-  if(isMovil.value) {
+function saltoDeLineaOEnviar(event: KeyboardEvent, messageTypeCode?: TypeMessageTypeCodes) {
+  if(isMobile.value) {
     autoAdjustHeight();
     return;
   }
@@ -165,10 +253,10 @@ function saltoDeLineaOEnviar(event: KeyboardEvent) {
     return;
   }
 
-  submitMessage(event);
+  submitMessage({ codigoTipoMensaje: messageTypeCode });
 }
 
-function createMessage(message: string) {
+function createMessage(message: string, codigoTipoMensaje?: TypeMessageTypeCodes) {
   if (message?.length > 300) {
     emit("show-toast", {
       severity: "warn",
@@ -179,7 +267,7 @@ function createMessage(message: string) {
     return;
   }
 
-  if (!message.trim()) {
+  if (!message.trim() && codigoTipoMensaje !== MESSAGE_TYPE_CODES.IMAGEN) {
     emit("show-toast", {
       severity: "warn",
       summary: "Error",
@@ -189,6 +277,12 @@ function createMessage(message: string) {
     return;
   }
 
+  const messageType = codigoTipoMensaje
+      ? {
+          code: codigoTipoMensaje,
+        }
+      : undefined;  
+
   const newMessage: Message = {
     id: uuidv4(),
     chatId: information.value?.chat?.id,
@@ -199,6 +293,9 @@ function createMessage(message: string) {
     appChatId: appChatId.value,
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
+    file: inputFiles.value?.[0],
+    urlFile: urlFiles.value?.[0].toString(),
+    messageType,
     sender: {
       nombreCompleto: props.user.nombreCompleto,
       ci: props.user.ci,
@@ -216,7 +313,7 @@ function updateMessageStatus(
   messageSaved?: Message,
   tipoCalificacionId?: number
 ) {
-  if (!idxMessageToCommunicate) throw new Error('idx is required')
+  if (idxMessageToCommunicate == null) throw new Error('idx is required')
 
   if (!messageSaved) {
     if (tipoCalificacionId) {
@@ -254,12 +351,11 @@ function updateMessageStatus(
 }
 
 const submitMessage = async (
-  event?: Event,
-  messageExtraData?: { mensajeARespondeId?: string, tipoCalificacionId?: number, codigoTipoMensaje?: number}
+  messageExtraData?: { mensajeARespondeId?: string, tipoCalificacionId?: number, codigoTipoMensaje?: TypeMessageTypeCodes}
 ) => {
 
-  const newMessage = createMessage(message.value);
-  
+  const newMessage = createMessage(message.value, messageExtraData?.codigoTipoMensaje);
+  message.value = '';
   if (!newMessage) return;
   
   let idxMessageToCommunicate = -1;
@@ -278,6 +374,8 @@ const submitMessage = async (
     message: message.value,
     appChatId: appChatId.value,
     ...messageExtraData,
+    codigoTipoMensaje: messageExtraData?.codigoTipoMensaje,
+    files: inputFiles.value,
   }
   sendApi(body).then((messageSaved) => {
     let messageUpdated = updateMessageStatus(
@@ -463,44 +561,7 @@ function connectMsWebSocket(
   });
 }
 
-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;
-}
+const { isMobile } = useMobile()
 
 function onQualifying({ message: messageParam, emoji }: { message: Message, emoji: { iconUnicode: string, value: number } }) {
   const callback =  async () => {
@@ -508,7 +569,10 @@ function onQualifying({ message: messageParam, emoji }: { message: Message, emoj
 
     message.value = emoji.iconUnicode
     
-    submitMessage(undefined, { tipoCalificacionId: emoji.value, mensajeARespondeId: messageParam.id }).then();
+    submitMessage({
+      tipoCalificacionId: emoji.value,
+      mensajeARespondeId: messageParam.id
+    }).then();
   }
 
   emit('onQualifying', { message: emoji.iconUnicode , callback})
@@ -516,6 +580,46 @@ function onQualifying({ message: messageParam, emoji }: { message: Message, emoj
 
 const isDisabledBoxMessage = ref(false);
 
+// Adjuntar
+function onFileSelect() {
+  inputFiles.value = [];
+  urlFiles.value = [];
+
+  const filesParam = fileInputRef.value?.files ?? []
+
+  const file = filesParam?.[0];
+  
+  inputFiles.value = filesParam;
+
+  if (!file) return;
+
+  urlFiles.value.push(URL.createObjectURL(file))
+
+  currentDialogView.value = DIALOG_VIEWS.UPLOAD;
+  dialog.title = 'Preparar imagen';
+  dialog.modelValue = true;
+}
+
+// Dialog
+
+const inputFiles = ref<(File & { objectURL: string })[]>([]);
+const urlFiles = ref<Array<string>>([]);
+
+const dialog = reactive<IPropsDialog>({
+  modelValue: false,
+  'onUpdate:modelValue': (args) => {
+    dialog.modelValue = args;
+
+    if (args) return;
+
+    urlFiles.value = [];
+    inputFiles.value = [];
+  },
+  title: 'Preparar imagen'
+});
+
+//
+
 onMounted(async () => {
   if (appChatId.value) return;
 

package/src/components/IconAttach.vue

@@ -0,0 +1,24 @@
+<template>
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 280.067 280.067"
+    xml:space="preserve"
+  >
+    <g>
+      <path
+        fill="currentColor"
+        d="M149.823,257.142c-31.398,30.698-81.882,30.576-113.105-0.429
+		c-31.214-30.987-31.337-81.129-0.42-112.308l-0.026-0.018L149.841,31.615l14.203-14.098c23.522-23.356,61.65-23.356,85.172,0
+		s23.522,61.221,0,84.586l-125.19,123.02l-0.044-0.035c-15.428,14.771-40.018,14.666-55.262-0.394
+		c-15.244-15.069-15.34-39.361-0.394-54.588l-0.044-0.053l13.94-13.756l69.701-68.843l13.931,13.774l-83.632,82.599
+		c-7.701,7.596-7.701,19.926,0,27.53s20.188,7.604,27.88,0L235.02,87.987l-0.035-0.026l0.473-0.403
+		c15.682-15.568,15.682-40.823,0-56.39s-41.094-15.568-56.776,0l-0.42,0.473l-0.026-0.018l-14.194,14.089L50.466,158.485
+		c-23.522,23.356-23.522,61.221,0,84.577s61.659,23.356,85.163,0l99.375-98.675l14.194-14.089l14.194,14.089l-14.194,14.098
+		l-99.357,98.675C149.841,257.159,149.823,257.142,149.823,257.142z"
+      />
+    </g>
+  </svg>
+</template>

package/src/components/IconSend.vue

@@ -1,7 +1,7 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
     <path
-      fill="#F28B0C"
+      fill="currentColor"
       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>

package/src/components/LoadingComponent.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="auth-loading">
+    <div class="relative">
+      <!-- SPINNER ICON -->
+      <svg
+        class="icon_1"
+        :class="{ 'sm-loader-size': props.size === 'small' }"
+        viewBox="0 0 275 276"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M137.1 1C124.2 1 111.2 2.80001 98.3 6.60001C68.5 15.4 43.9 33.5 26.8 56.7C9.69999 79.9 0.0999756 108.3 0.0999756 137.9C0.0999756 150.8 1.90001 163.8 5.70001 176.7C7.60001 183 13.3 187 19.5 187C25.7 187 22.2 186.8 23.6 186.4C31.2 184.1 35.6 176.1 33.3 168.5C30.3 158.3 28.8 148 28.8 137.8C28.8 114.5 36.4 92 49.9 73.7C63.4 55.3 82.7 41.1 106.3 34.2C116.5 31.2 126.8 29.7 137 29.7C160.3 29.7 182.8 37.3 201.1 50.8C219.5 64.3 233.7 83.6 240.6 107.2C242.5 113.5 248.2 117.5 254.4 117.5C260.6 117.5 257.1 117.3 258.5 116.9C266.1 114.6 270.5 106.6 268.2 99C259.4 69.2 241.3 44.6 218.1 27.5C194.9 10.4 166.5 0.799988 136.9 0.799988"
+          fill="url(#paint0_linear_672_78)"
+        />
+        <path
+          d="M254.5 88.9C253.1 88.9 251.8 89.1 250.4 89.5C242.8 91.8 238.4 99.8 240.7 107.4C243.7 117.6 245.2 127.9 245.2 138.1C245.2 161.4 237.6 183.9 224.1 202.2C210.6 220.6 191.3 234.8 167.7 241.7C157.5 244.7 147.2 246.2 137 246.2C113.7 246.2 91.2 238.6 72.9 225.1C54.5 211.6 40.3001 192.3 33.4001 168.7C31.5001 162.4 25.8 158.4 19.6 158.4C13.4 158.4 16.9 158.6 15.5 159C7.90003 161.3 3.50001 169.3 5.80001 176.9C14.6 206.7 32.7001 231.3 55.9001 248.4C79.1001 265.5 107.5 275.1 137.1 275.1C150 275.1 163 273.3 175.9 269.5C205.7 260.7 230.3 242.6 247.4 219.4C264.5 196.2 274.1 167.8 274.1 138.2C274.1 125.4 272.3 112.3 268.5 99.4C266.6 93.1 260.9 89.1 254.7 89.1"
+          fill="url(#paint1_linear_672_78)"
+        />
+        <defs>
+          <linearGradient
+            id="paint0_linear_672_78"
+            x1="-2.44076e-05"
+            y1="94.1"
+            x2="269"
+            y2="94.1"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="white" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_672_78"
+            x1="5.00002"
+            y1="181.9"
+            x2="274"
+            y2="181.9"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="white" stop-opacity="0" />
+            <stop offset="1" stop-color="white" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <!-- TEXTO SVG -->
+      <svg
+        class="icon_2"
+        :class="{ hidden: props.size === 'small' }"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 176 74"
+      >
+        <path
+          fill="#fff"
+          d="M6.4 70v-3.5c-.3 1.3-1.5 4.5-2.2 6.6h-.8c-.6-1.7-1.7-5.2-2.1-6.6v6.6H.5v-7.3h1.4c.8 2.1 1.7 5.1 2 6.1.1-.7 1.3-3.9 2.1-6.1h1.3v7.3h-.9V70ZM10.8 65.8v7.3h-.9v-7.3h.9ZM13.5 73.1v-7.3h1.2c2.9 5.1 3.3 5.8 3.4 6.2v-6.1h.9v7.3h-1.1c-3.1-5.6-3.3-6-3.5-6.3v6.4h-.8l-.1-.2ZM22.5 65.8v7.3h-.9v-7.3h.9ZM25.5 71c.1.9.8 1.4 1.6 1.4s1.4-.4 1.4-1.3-.4-1.1-1.7-1.5c-1.5-.5-2.1-1-2.1-2s.9-1.9 2.2-1.9c1.3 0 2.2.9 2.3 1.9h-.9c-.1-.7-.5-1.2-1.4-1.2-.9 0-1.3.4-1.3 1.1 0 .7.4.9 1.5 1.3 1.8.5 2.2 1.2 2.2 2.2 0 1-.8 2.1-2.4 2.1-1.6 0-2.4-.8-2.5-2.1h1.1ZM32.9 66.6h-2.1v-.8H36v.8h-2.1v6.5H33v-6.5h-.1ZM41.9 69.6h-3.3v2.6h3.6v.8h-4.5v-7.3H42v.8h-3.4v2.3h3.3v.8ZM45.2 69.8v3.3h-.9v-7.3h2.6c1.3 0 2.2.6 2.2 1.9 0 1.3-.6 1.5-1.2 1.7.8.2 1.1.8 1.1 1.8 0 .8 0 1.4.1 1.9h-.9c0-.3-.1-1-.1-1.7 0-1.2-.4-1.6-1.6-1.6h-1.3Zm0-.7h1.3c.9 0 1.6-.3 1.6-1.3s-.5-1.2-1.4-1.2h-1.6v2.5h.1ZM52.3 65.8v7.3h-.9v-7.3h.9ZM60.7 69.4c0 2.1-1 3.8-3.1 3.8s-3-1.6-3-3.8c0-2.2 1-3.7 3.1-3.7s3 1.6 3 3.7Zm-5.2 0c0 1.7.7 3 2.1 3 1.4 0 2.1-1.3 2.1-3s-.7-2.9-2.1-2.9c-1.4 0-2.1 1.3-2.1 2.9ZM66.5 65.8h2.4c1.3 0 2.3.7 2.3 2s-1 2.1-2.5 2.1h-1.4V73h-.9v-7.3l.1.1Zm.9 3.4h1.4c.9 0 1.6-.3 1.6-1.4 0-1.1-.6-1.3-1.6-1.3h-1.4v2.7ZM74.2 65.8v4.6c0 1.1.4 2 1.7 2 1.3 0 1.7-.8 1.7-2v-4.6h.9v4.6c0 1.5-.6 2.7-2.6 2.7s-2.6-1-2.6-2.7v-4.7h.9v.1Zm3.5-2.1-1.6 1.4h-.9l1.3-1.4H77.7ZM81.1 65.8h2.5c1.3 0 2.1.7 2.1 1.8s-.6 1.4-1 1.5c.5.2 1.3.6 1.3 1.8 0 1.2-1 2.1-2.4 2.1h-2.4v-7.3l-.1.1Zm2.3 3c1 0 1.4-.4 1.4-1.1 0-.7-.4-1.1-1.4-1.1h-1.5v2.3h1.4l.1-.1ZM82 72.3h1.5c.9 0 1.6-.4 1.6-1.4 0-1-.6-1.4-1.7-1.4H82v2.8ZM88.2 65.8h.9v6.5h3.5v.8h-4.4v-7.3ZM95.3 65.8v7.3h-.9v-7.3h.9ZM103.2 71c-.2 1.2-1 2.2-2.7 2.2-1.7 0-2.9-1.6-2.9-3.8 0-2.2.9-3.7 3-3.7s2.4 1 2.6 2.2h-.9c-.2-.8-.6-1.5-1.7-1.5s-2 1.4-2 2.9.5 3 2 3 1.5-.6 1.7-1.5h.9v.2ZM111.1 69.4c0 2.1-1 3.8-3.1 3.8s-3-1.6-3-3.8c0-2.2 1-3.7 3.1-3.7s3 1.6 3 3.7Zm-5.2 0c0 1.7.7 3 2.1 3 1.4 0 2.1-1.3 2.1-3s-.7-2.9-2.1-2.9c-1.4 0-2.1 1.3-2.1 2.9ZM116.9 65.8h2.4c1.8 0 3.2 1.2 3.2 3.5s-1.2 3.8-3.4 3.8h-2.2v-7.3Zm.9 6.5h1.3c1.7 0 2.5-1.1 2.5-3s-1-2.7-2.4-2.7h-1.3v5.8l-.1-.1ZM128.9 69.6h-3.3v2.6h3.6v.8h-4.5v-7.3h4.3v.8h-3.4v2.3h3.3v.8ZM134.8 65.8h2.5c1.3 0 2.1.7 2.1 1.8s-.6 1.4-1 1.5c.5.2 1.3.6 1.3 1.8 0 1.2-1 2.1-2.4 2.1h-2.4v-7.3l-.1.1Zm2.3 3c1 0 1.4-.4 1.4-1.1 0-.7-.4-1.1-1.4-1.1h-1.5v2.3h1.4l.1-.1Zm-1.4 3.5h1.5c.9 0 1.6-.4 1.6-1.4 0-1-.6-1.4-1.7-1.4h-1.4v2.8ZM147.7 69.4c0 2.1-1 3.8-3.1 3.8s-3-1.6-3-3.8c0-2.2 1-3.7 3.1-3.7s3 1.6 3 3.7Zm-5.2 0c0 1.7.7 3 2.1 3 1.4 0 2.1-1.3 2.1-3s-.7-2.9-2.1-2.9c-1.4 0-2.1 1.3-2.1 2.9ZM150 65.8h.9v6.5h3.5v.8H150v-7.3ZM157.1 65.8v7.3h-.9v-7.3h.9ZM161.3 73.1l-2.4-7.3h1l1.1 3.6c.3 1 .7 2.1.8 2.8.1-.6.6-1.8.9-2.8l1.2-3.6h.9l-2.5 7.3h-1.1.1ZM167.6 65.8v7.3h-.9v-7.3h.9ZM171.1 70.9l-.7 2.2h-.9l2.4-7.3h1.1l2.5 7.3h-1l-.7-2.2h-2.7Zm2.4-.8c-.6-1.9-1-2.9-1.1-3.5-.2.9-.6 2-1.1 3.5h2.2ZM8.2 49.2c0 3.8-.9 6.3-5.5 6.3s-1.7 0-2.2-.2v-3.4c.4 0 .9.1 1.5.1 1.8 0 2.1-.9 2.1-2.6V32.3h4.1v16.9ZM15.3 32.4v15.7c0 1.9.5 4.1 3 4.1s3-1.9 3-4.1V32.3h4.1v15.8c0 4.1-1.6 7.4-7.1 7.4s-7-3.1-7-7.4V32.3h4.1l-.1.1ZM31.5 48.8c.2 1.9 1 3.6 3.1 3.6s2.8-1.3 2.8-3-.9-3-3.8-4.4c-3.9-1.9-5.5-3.5-5.5-6.9 0-3.4 2.4-6.2 6.5-6.2s6.4 3.5 6.5 6.5h-4c-.1-1.3-.5-3.2-2.5-3.2s-2.3 1.1-2.3 2.6.7 2.4 3.4 3.7c4.1 1.9 5.9 3.7 5.9 7.6 0 3.9-2.2 6.6-7.1 6.6-4.9 0-6.9-3.4-7-6.8h4.1l-.1-.1ZM47 35.9h-4.9v-3.6H56v3.6h-4.9v19.3H47V35.9ZM61.8 32.4v22.9h-4.1V32.4h4.1ZM78.7 48.6c-.1 1.2-.5 7.1-6.9 7.1s-7.3-5.7-7.3-11.9S66.7 32 72 32s6.5 5.2 6.6 7h-4.1c0-.8-.1-3.6-2.6-3.6s-3.2 3.1-3.2 8.4c0 5.3.4 8.4 3.1 8.4s2.6-2.8 2.7-3.6H78.7ZM84.8 32.4v22.9h-4.1V32.4h4.1ZM91.8 49.5l-1.1 5.8h-4.1l5.3-22.9h5.3l5.4 22.9h-4.3l-1.1-5.8H91.8Zm4.6-3.6c-.9-4.4-1.5-7.6-1.9-9.8-.3 2.1-1 5.5-1.8 9.8h3.8-.1ZM109.9 32.4h4.1v19.4h7.8l-.4 3.5h-11.5V32.4ZM127.5 32.4v22.9h-4.1V32.4h4.1ZM131 32.4h7c4 0 6.2 2.2 6.2 5.8 0 3.6-1.4 4.3-2.6 4.8 1.6.7 3.3 2.1 3.3 5.6 0 3.5-2.8 6.7-6.9 6.7h-6.9V32.4h-.1Zm6 9.1c2.5 0 3.2-1 3.2-3s-1.1-2.9-3.1-2.9H135v5.9h2Zm-2 10.6h2.4c2 0 3.2-1 3.2-3.6s-1-3.7-3.7-3.7h-2v7.4l.1-.1ZM151.2 45.5v9.8h-4.1V32.4h7c4.2 0 6.5 2.2 6.5 6.3s-1.8 4.7-3 5.2c1.8.8 2.6 2.3 2.6 5.7v.9c0 2.6.1 3.6.3 4.8h-4c-.3-1-.4-2.9-.4-4.8v-.8c0-3.1-.7-4.1-3.3-4.1H151l.2-.1Zm0-3.3h1.9c2.5 0 3.4-1.1 3.4-3.4s-.9-3.1-3-3.1h-2.3v6.5ZM174.6 45.1h-7.3v6.6h8.2l-.5 3.5h-11.8V32.3h11.7v3.6h-7.7v5.6h7.3v3.6h.1ZM10 12.3H2.9v8.2h7.9l-.3 2.1H.6V1.2h9.8v2.1H2.9v7H10v2.1-.1ZM29.4 16.6c0 1.2-.6 6.2-5.8 6.2s-6.1-6-6.1-11.2C17.5 6.4 19.1.7 23.9.7c4.8 0 5.4 4.8 5.5 6.1H27c0-.7-.2-4-3.2-4s-3.9 4.6-3.9 8.8c0 4.2.5 9.1 3.7 9.1s3.3-3.1 3.4-4.2h2.4v.1ZM49.2 11.7c0 7.3-1.7 11.2-6.4 11.2s-6.2-3.8-6.2-11.2C36.6 4.3 38.7.8 42.9.8c4.2 0 6.3 3.6 6.3 10.8v.1Zm-10.2 0c0 6.1 1.2 9.2 3.9 9.2s3.9-3 3.9-9.1S45.6 3 42.9 3 39 5.9 39 11.8v-.1ZM58.4 16.9c.2 2.2 1.2 4 3.6 4 2.4 0 3.4-1.2 3.4-3.7s-.9-3.5-3.8-4.9c-3.4-1.6-4.8-3.1-4.8-6.2S58.7.8 62.2.8c3.5 0 5.3 3 5.3 5.5h-2.3c-.1-1-.4-3.5-3.1-3.5s-2.9 1.4-2.9 3.1c0 1.7.9 3 3.6 4.3 3.7 1.8 5.1 3.6 5.1 6.8 0 3.2-1.9 5.9-5.9 5.9s-5.7-2.8-5.9-5.9h2.4l-.1-.1ZM77.9 1.1v21.4h-2.3V1.1h2.3ZM87.9 16.9c.2 2.2 1.2 4 3.6 4 2.4 0 3.4-1.2 3.4-3.7s-.9-3.5-3.8-4.9c-3.4-1.6-4.8-3.1-4.8-6.2S88.2.8 91.7.8c3.5 0 5.3 3 5.3 5.5h-2.3c-.1-1-.4-3.5-3.1-3.5s-2.9 1.4-2.9 3.1c0 1.7.9 3 3.6 4.3 3.7 1.8 5.1 3.6 5.1 6.8 0 3.2-1.9 5.9-5.9 5.9s-5.7-2.8-5.9-5.9H88l-.1-.1ZM107.9 3.2h-4.8V1.1H115v2.1h-4.8v19.3h-2.4V3.2h.1ZM131.5 12.3h-7.1v8.2h7.9l-.3 2.1h-9.9V1.2h9.8v2.1h-7.5v7h7.1v2.1-.1ZM152.5 13.4c0-4 0-8 .1-10.3-.8 3.7-2.7 12.6-4.4 19.4h-2.3c-1.3-5.9-3.3-15.5-4.1-19.4.1 2.5.2 7.2.2 10.9v8.5h-2.2V1.1h3.5c1.7 6.7 3.4 14.9 3.9 17.7.4-2.3 2.5-11.2 4.2-17.7h3.5v21.4h-2.3v-9.1h-.1ZM165.9 15.8l-1.6 6.8h-2.4l5.2-21.4h3l5.3 21.4h-2.5l-1.6-6.8h-5.6.2Zm5.1-2.1c-1.2-5.3-2-8.6-2.3-10.3-.3 1.9-1.2 5.7-2.2 10.3h4.6-.1Z"
+        />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+const props = defineProps({
+  size: {
+    type: String as PropType<'small' | 'normal'>,
+    default: 'normal',
+  },
+  footer_text: {
+    type: String,
+  },
+});
+</script>
+
+<style scoped>
+.auth-loading {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(85, 85, 85, 0.75);
+  left: 0;
+  top: 0;
+  z-index: 999999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon_1 {
+  animation: rotate 2s linear infinite;
+  height: 200px;
+}
+.sm-loader-size {
+  height: 40px;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+.icon_2 {
+  width: 115px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>

package/src/components/MessageList.vue

@@ -49,11 +49,19 @@
                 </div>
               </div>
 
-              <div v-else-if="emoji[message.message ?? '']">
-                <img :src="emoji[message.message]" alt="icono" class="icon" />
-              </div>
+              <div v-else>
+                <div v-if="message.messageType?.code === MESSAGE_TYPE_CODES.IMAGEN" style="text-align: center;">
+                  <a href="javascript:" class="btn-icon" @click="emit('see', message)">
+                    <img :src="message.thumbnailFile ?? message.urlFile" alt="image" width="150" />
+                  </a>
+                </div>
+
+                <div v-if="emoji[message.message ?? '']">
+                  <img :src="emoji[message.message]" alt="icono" class="icon" />
+                </div>
 
-              <div v-else class="message-text" style="white-space: pre-line" v-html="textToRichFormat(message.message)"></div>
+                <div v-else class="message-text" style="white-space: pre-line" v-html="textToRichFormat(message.message)"></div>
+              </div>
 
               <div class="detail-message flex justify-between mt-2">
                 <span class="mr-5" v-if="message.sender?.nombreCompleto">
@@ -91,8 +99,9 @@ import AngryIcon from '../assets/emojis/AngryIcon.svg'
 import HappiestIcon from '../assets/emojis/HappiestIcon.svg'
 import NeutralIcon from '../assets/emojis/NeutralIcon.svg'
 import HappyIcon from '../assets/emojis/HappyIcon.svg'
+import { MESSAGE_TYPE_CODES } from '../resources/constants/message-type.constant';
 
-const emit = defineEmits(["loadMore", "retry", "onQualifying"]);
+const emit = defineEmits(["loadMore", "retry", "onQualifying", "see"]);
 const props = defineProps({
   messages: {
     type: Array as PropType<Message[]>,
@@ -339,35 +348,10 @@ const emoji: { [key in string]: any } = {
   font-size: 2rem;
 }
 
-.flex { 
-  display: flex;
-  flex-wrap: wrap;
-}
-.flex-col {
-  flex-direction: column;
-}
-.items-center {
-  align-items: center;
-}
-.gap-2 {
-  gap: 0.5rem;
-}
-
-.mb-2 {
-  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>

package/src/components/ODialog/IPropsDialog.ts

@@ -0,0 +1,4 @@
+import { IPropsSidebar } from './IPropsSidebar';
+
+
+export interface IPropsDialog extends IPropsSidebar {}

package/src/components/ODialog/IPropsSidebar.ts

@@ -0,0 +1,13 @@
+export interface IPropsSidebar {
+  modelValue?: boolean;
+  title?: string;
+  // isLoading?: boolean;
+  // hideActions?: boolean;
+  // hideHeader?: boolean;
+  // acceptFn?: () => Promise<boolean>;
+  // beforeAcceptFn?: () => Promise<boolean>;
+  // disable?: boolean;
+
+  // solo para v-bind
+  'onUpdate:modelValue'?: (args: IPropsSidebar['modelValue'])=> void
+}