vue-wiguet-chatweb 0.1.23 → 0.1.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-wiguet-chatweb",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "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"
@@ -45,11 +47,7 @@
     "@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"
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@types/luxon": "^3.4.2",
@@ -59,9 +57,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

@@ -24,7 +24,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 +36,35 @@
               @input="() => autoAdjustHeight()"
               @keydown.enter="
                 (event) => {
-                  !isMovil && event.preventDefault();
+                  !isMobile && event.preventDefault();
                 }
               "
               @keyup.enter="saltoDeLineaOEnviar"
             />
 
+            <FileUpload
+              mode="basic"
+              accept="image/png,image/jpeg,image/jpg,image/webp"
+              :maxFileSize="2000000"
+              @select="onFileSelect"
+              title="Adjuntar imagen"
+              :chooseButtonProps="{ label: '', outlined: true }"
+              :auto="false"
+              style="height: 39px"
+            >
+              <template #filelabel>
+                <span style="display:none"></span>
+              </template>
+              
+              <template #chooseicon>
+                <IconAttach style="width: 20px; height: 20px" />
+              </template>
+            </FileUpload>
+
+            <!-- <button class="pointer btn-primary">
+              <IconAttach style="width: 20px; height: 20px" />
+            </button> -->
+
             <button type="submit" class="pointer btn-primary">
               <IconSend style="width: 20px; height: 20px" />
             </button>
@@ -53,6 +76,50 @@
       </span>
     </div>
   </div>
+
+  <ODialog v-bind="dialog" modal>
+    <div class="flex flex-col gap-3 justify-center items-center">
+      <Image v-for="(urlFile, i) in urlFiles" :key="i" :src="urlFile" alt="Image" width="400" />
+
+      <div class="w-full">
+        <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>
+  </ODialog>
 </template>
 
 <script setup lang="ts">
@@ -63,7 +130,7 @@ import {
   PropType,
   watch,
   onUnmounted,
-  computed,
+  reactive,
 } from "vue";
 import { v4 as uuidv4 } from "uuid";
 
@@ -87,7 +154,14 @@ 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 { IPropsDialog } from "./ODialog/IPropsDialog";
+import IconAttach from "./IconAttach.vue";
+import ODialog from "./ODialog/ODialog.vue";
+import { type FileUploadSelectEvent } from "primevue";
+import FileUpload from "primevue/fileupload";
+import Image from "primevue/image";
 
 //DATA
 const message = ref("");
@@ -152,8 +226,8 @@ watch(
   }
 );
 
-function saltoDeLineaOEnviar(event: KeyboardEvent) {
-  if(isMovil.value) {
+function saltoDeLineaOEnviar(event: KeyboardEvent, messageTypeCode?: TypeMessageTypeCodes) {
+  if(isMobile.value) {
     autoAdjustHeight();
     return;
   }
@@ -165,10 +239,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 +253,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 +263,15 @@ function createMessage(message: string) {
     return;
   }
 
+  const messageType = codigoTipoMensaje
+      ? {
+          code: codigoTipoMensaje,
+        }
+      : undefined;
+
+  console.warn(inputFiles.value);
+  
+
   const newMessage: Message = {
     id: uuidv4(),
     chatId: information.value?.chat?.id,
@@ -199,6 +282,9 @@ function createMessage(message: string) {
     appChatId: appChatId.value,
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
+    file: inputFiles.value?.[0],
+    urlFile: inputFiles.value?.[0]?.objectURL,
+    messageType,
     sender: {
       nombreCompleto: props.user.nombreCompleto,
       ci: props.user.ci,
@@ -216,7 +302,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 +340,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 +363,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 +550,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 +558,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 +569,47 @@ function onQualifying({ message: messageParam, emoji }: { message: Message, emoj
 
 const isDisabledBoxMessage = ref(false);
 
+// Adjuntar
+function onFileSelect(event: FileUploadSelectEvent) {
+  inputFiles.value = [];
+  urlFiles.value = [];
+
+  const file = event.files[0]; // Obtiene el primer archivo seleccionado
+  
+  inputFiles.value = event.files as (File & { objectURL: string })[];
+
+  if (!file) return;
+
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    e.target?.result && urlFiles.value.push(e.target?.result);
+  };
+  reader.readAsDataURL(file);
+
+  dialog.modelValue = true;
+}
+
+// Dialog
+
+const inputFiles = ref<(File & { objectURL: string })[]>([]);
+  const urlFiles = ref<Array<string | ArrayBuffer>>([]);
+
+const dialog = reactive<IPropsDialog>({
+  modelValue: false,
+  'onUpdate:modelValue': (args) => {
+    dialog.modelValue = args;
+
+    if (args) return;
+
+    urlFiles.value = [];
+    inputFiles.value = [];
+  },
+  hideActions: true,
+  title: 'SIN TITULO',
+});
+
+//
+
 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,27 @@
                 </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" class="text-center">
+                  <Image
+                    alt="Image"
+                    preview
+                  >
+                    <template #image>
+                        <img :src="message.thumbnailFile ?? message.urlFile" alt="image" width="150" />
+                    </template>
+                    <template #original="slotProps">
+                        <img :src="message.urlFile" alt="preview" :style="slotProps.style" width="800" @click="slotProps.previewCallback" />
+                    </template>
+                  </Image>
+                </div>
 
-              <div v-else class="message-text" style="white-space: pre-line" v-html="textToRichFormat(message.message)"></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>
 
               <div class="detail-message flex justify-between mt-2">
                 <span class="mr-5" v-if="message.sender?.nombreCompleto">
@@ -91,6 +107,8 @@ 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';
+import Image from 'primevue/image';
 
 const emit = defineEmits(["loadMore", "retry", "onQualifying"]);
 const props = defineProps({

package/src/components/ODialog/IPropsDialog.ts

@@ -0,0 +1,10 @@
+import { IPropsSidebar } from './IPropsSidebar';
+import { type DialogProps } from "primevue/dialog";
+
+
+export interface IPropsDialog extends Omit<IPropsSidebar, 'position'> {
+  position?: DialogProps['position'];
+
+  // solo para v-bind
+  'onUpdate:modelValue'?: (args: IPropsDialog['modelValue'])=> void
+}

package/src/components/ODialog/IPropsSidebar.ts

@@ -0,0 +1,17 @@
+import type { DrawerProps } from "primevue/drawer";
+
+export interface IPropsSidebar {
+  modelValue: boolean;
+  dismissable?: boolean;
+  position?: DrawerProps['position'];
+  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
+}

package/src/components/ODialog/ODialog.vue

@@ -0,0 +1,82 @@
+<template>
+  <Dialog
+    :visible="propsComponent.modelValue"
+    :dismissable
+    :position
+    @update:visible="(val: boolean) => emit('update:modelValue', val)"
+    class="!w-auto min-w-[20rem] dark:!bg-[var(--theme-background-secondary)]"
+  >
+    <template #container>
+      <LoadingComponent v-if="propsComponent.isLoading || isWorking" />
+      <SidebarHeader v-if="!propsComponent.hideHeader" :title :closeFn="() => emit('update:modelValue', false)" />
+      
+      <!-- <Divider class="!m-0 !p-0" /> -->
+
+      <div class="overflow-y-auto m-4 h-full max-h-full">
+        <slot></slot>
+      </div>
+
+      <footer v-if="!hideActions" class="flex sm:justify-between gap-16 items-center mx-5 py-5">
+        <Button
+          label="Cancelar"
+          severity="secondary"
+          class="w-full h-[40px] !rounded-2xl pr-5 sm:max-w-48"
+          icon="pi pi-times"
+          outlined
+          @click="() => emit('update:modelValue', false)"
+        ></Button>
+        <Button
+          label="Aceptar"
+          :disabled="disable || isLoading"
+          icon="pi pi-check"
+          aria-label="save"
+          class="w-full h-[40px] !rounded-2xl pr-5 sm:max-w-48"
+          @click="onAccept"
+        ></Button>
+      </footer>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import Dialog from 'primevue/dialog';
+import { IPropsDialog } from './IPropsDialog';
+import LoadingComponent from '../LoadingComponent.vue';
+import SidebarHeader from '../sidebar/SidebarHeader.vue';
+import { computed, ref } from 'vue';
+import Button from 'primevue/button';
+
+const propsComponent = withDefaults(defineProps<IPropsDialog>(), {
+  beforeAcceptFn: async () => true
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [visible: boolean];
+  accept: [void];
+}>();
+
+const isWorking = ref(false);
+const isLoading = computed(() => {
+  return isWorking.value || propsComponent.disable || propsComponent.isLoading;
+});
+
+async function onAccept() {
+  if (!propsComponent.acceptFn) {
+    emit('accept');
+    return;
+  }
+
+  const isPassed = await propsComponent.beforeAcceptFn();
+
+  if(!isPassed) return;
+
+  isWorking.value = true;
+  const result = await propsComponent.acceptFn?.();
+  isWorking.value = false;
+
+  if(!result) return
+  
+  emit('accept')
+  emit('update:modelValue', false);
+}
+</script>