vue-wiguet-chatweb 0.1.22 → 0.1.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-wiguet-chatweb",
-  "version": "0.1.22",
+  "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 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,20 +36,90 @@
               @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>
           </div>
         </div>
       </form>
+      <span class="message-send-block" v-else>
+        Necesitamos que nos califique la atención para continuar
+      </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">
@@ -60,7 +130,7 @@ import {
   PropType,
   watch,
   onUnmounted,
-  computed,
+  reactive,
 } from "vue";
 import { v4 as uuidv4 } from "uuid";
 
@@ -84,6 +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, 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("");
@@ -148,8 +226,8 @@ watch(
   }
 );
 
-function saltoDeLineaOEnviar(event: KeyboardEvent) {
-  if(isMovil.value) {
+function saltoDeLineaOEnviar(event: KeyboardEvent, messageTypeCode?: TypeMessageTypeCodes) {
+  if(isMobile.value) {
     autoAdjustHeight();
     return;
   }
@@ -161,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",
@@ -175,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",
@@ -185,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,
@@ -195,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,
@@ -212,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) {
@@ -250,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;
@@ -274,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(
@@ -285,6 +376,8 @@ const submitMessage = async (
     
     if(!messageUpdated) return
 
+    isDisabledBoxMessage.value = !!messagesData.value.data.find((msg) => msg.messageType?.code === MESSAGE_TYPE_CODES.PREGUNTA && msg.response == null);
+
     socketService.value?.emit(
       "sendMessage",
       { roomId: information?.value?.appChat.id, message: messageUpdated },
@@ -319,6 +412,8 @@ const getMessages = async () => {
   const resp = await getMessagesApi({ body, token: props.tokenAuth });
   isLoading.value = false;
 
+  isDisabledBoxMessage.value = !!resp.data.find((msg) => msg.messageType?.code === MESSAGE_TYPE_CODES.PREGUNTA && msg.response == null);
+
   messagesData.value.data.unshift(
     ...resp.data.sort((a, b) => -b.createdAt.localeCompare(a.createdAt))
   );
@@ -447,50 +542,15 @@ function connectMsWebSocket(
         messagesData.value.data.push(data.message);
     }
 
+    isDisabledBoxMessage.value = !!messagesData.value.data.find((msg) => msg.messageType?.code === MESSAGE_TYPE_CODES.PREGUNTA && msg.response == null);
+
     setVistoToTrueApi(data.message.appChatId, props.tokenAuth);
     scrollToBottom();
     !props.visible && emit("new-message");
   });
 }
 
-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 () => {
@@ -498,12 +558,57 @@ 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})
 };
 
+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;
@@ -567,4 +672,10 @@ onUnmounted(() => {
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+.message-send-block {
+  display: block;
+  margin: 1.5rem;
+  text-align: center;
+}
 </style>

package/src/components/ChatMessage.vue

@@ -22,8 +22,8 @@
 </template>
   
 <script setup lang="ts">
-// TODO: parece que no se usa
-import {computed } from 'vue';
+// TODO: parece que no se usa el componente
+import { computed } from 'vue';
 import { formatTimeAPDate,textCapitalize } from '../resources/functions.helpers'
 const props = defineProps({
     message:{ type: Object, required: true },

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

@@ -26,33 +26,52 @@
         <div class="chat-message">
           <div class="bubble" :class="message.esCliente ? 'right' : 'left'">
             <div :class="message.esCliente ? 'content-right' : 'content-left'">
-              <div v-if="message.message === '😊😄🙂😐🙁'" class="flex gap-2" >
+              <div v-if="message.message === '😊😄🙂😐🙁'" class="flex flex-col gap-2" >
                 <div class="mb-2">
                   <strong style="display: block;">Ayúdanos a mejorar nuestro servicio.</strong>
                   <span>¿Que le pareció la atención?</span>
                 </div>
 
-                <a 
-                  v-for="emojiParam in emojis"
-                  :key="emojiParam.value"
-                  :href="!message.response ? 'javascript:' : undefined"
-                  class="btn-icon"
-                  :class="{ 'content-disabled' : !showIcon(message, emojiParam) }"
-                  @click="!message.response && emit('onQualifying', { message, emoji: emojiParam })"
-                >
-                  <div class="flex flex-col items-center">
-                    <img :src="emojiParam.icon" alt="icono" class="icon" />
-                    <span>{{ emojiParam.label }}</span>
-                  </div>
-                </a>
+                <div style="font-size: 14px;" class="flex justify-between gap-2">
+                  <a 
+                    v-for="emojiParam in emojis"
+                    :key="emojiParam.value"
+                    :href="!message.response ? 'javascript:' : undefined"
+                    class="btn-icon"
+                    :class="{ 'content-disabled' : !showIcon(message, emojiParam) }"
+                    @click="!message.response && emit('onQualifying', { message, emoji: emojiParam })"
+                  >
+                    <div class="flex flex-col items-center">
+                      <img :src="emojiParam.icon" alt="icono" class="icon" />
+                      <span>{{ emojiParam.label }}</span>
+                    </div>
+                  </a>
+                </div>
               </div>
 
-              <div v-else-if="emoji[message.message ?? '']">
-                <img :src="emoji[message.message]" alt="icono" class="icon" />
+              <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-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 v-else class="message-text" style="white-space: pre-line" v-html="textToRichFormat(message.message)"></div>
-              <div class="detail-message flex justify-content-between">
+              <div class="detail-message flex justify-between mt-2">
                 <span class="mr-5" v-if="message.sender?.nombreCompleto">
                   {{
                     message.esCliente
@@ -88,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({
@@ -354,10 +375,17 @@ const emoji: { [key in string]: any } = {
   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,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
+}