vue-wiguet-chatweb 0.1.27 → 0.1.29

package/src/components/Chat.vue

@@ -1,691 +1,691 @@
-<template>
-  <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
-        v-if="messagesData.data.length > 0"
-        :messages="messagesData.data"
-        :canLoadMoreMessages="messagesData.canLoadMoreMessages"
-        @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>
-      </div>
-    </div>
-
-    <div class="w-full">
-      <form v-if="!isDisabledBoxMessage" class="message-send" @submit.prevent="(event) => submitMessage()">
-        <div class="form-message">
-          <div class="jl-inputgroup-chat">
-            <textarea
-              v-model="message"
-              class="jl2-input-chat"
-              placeholder="Escribe tu mensaje"
-              required
-              ref="textAreaRef"
-              @input="() => autoAdjustHeight()"
-              @keydown.enter="
-                (event) => {
-                  !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>
-          </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">
-    <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">
-import {
-  ref,
-  onMounted,
-  nextTick,
-  PropType,
-  watch,
-  onUnmounted,
-  reactive,
-} from "vue";
-import { v4 as uuidv4 } from "uuid";
-
-import {
-  type SendMessageBody,
-  ChatInformation,
-  ListMessageBody,
-  Message,
-} from "../dto/app.dto";
-import IconClose from "./IconClose.vue";
-import IconSend from "./IconSend.vue";
-import {
-  getMessagesApi,
-  sendMessageApi,
-  setVistoToTrueApi,
-  updateMessageApi,
-} from "../store/index";
-import { getInformationApi } from "../store";
-import MessageList from "./MessageList.vue";
-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 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: [],
-  canLoadMoreMessages: false,
-});
-
-const appChatId = ref("");
-const isLoading = ref(false);
-
-const emit = defineEmits([
-  "show-toast",
-  "show-confirm",
-  "new-message",
-  "clear-new-messages",
-  "not-viewed-total",
-  "onQualifying",
-]);
-
-const props = defineProps({
-  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 messageContainerRef = ref<HTMLElement | null>(null);
-
-watch(
-  () => props.visible,
-  async (current) => {
-    if (!current) return;
-
-    emit("clear-new-messages");
-    scrollToBottom();
-
-    if (notViewed.value > 0) {
-      setVistoToTrueApi(appChatId.value, props.tokenAuth);
-    }
-
-    if (appChatId.value) return;
-
-    const resp = await getInformationApi(props.tokenAuth);
-
-    if (resp) {
-      appChatId.value = resp.appChat.id;
-    }
-  }
-);
-
-function saltoDeLineaOEnviar(event: KeyboardEvent, messageTypeCode?: TypeMessageTypeCodes) {
-  if(isMobile.value) {
-    autoAdjustHeight();
-    return;
-  }
-
-  if (event.key === "Enter" && event.shiftKey) {
-    const val = (event.target as any)?.value || "";
-    (event.target as any).value = val + "\n";
-    autoAdjustHeight();
-    return;
-  }
-
-  submitMessage({ codigoTipoMensaje: messageTypeCode });
-}
-
-function createMessage(message: string, codigoTipoMensaje?: TypeMessageTypeCodes) {
-  if (message?.length > 300) {
-    emit("show-toast", {
-      severity: "warn",
-      summary: "Error",
-      detail: "El mensaje no puede superar los 300 caracteres",
-      life: 5000,
-    });
-    return;
-  }
-
-  if (!message.trim() && codigoTipoMensaje !== MESSAGE_TYPE_CODES.IMAGEN) {
-    emit("show-toast", {
-      severity: "warn",
-      summary: "Error",
-      detail: "Por favor ingrese un mensaje",
-      life: 5000,
-    });
-    return;
-  }
-
-  const messageType = codigoTipoMensaje
-      ? {
-          code: codigoTipoMensaje,
-        }
-      : undefined;  
-
-  const newMessage: Message = {
-    id: uuidv4(),
-    chatId: information.value?.chat?.id,
-    message,
-    visto: true,
-    multimedia: false,
-    esCliente: true,
-    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,
-      msPersonaId: props.user.msPersonaId,
-    },
-    response: undefined
-  };
-  
-  return newMessage
-}
-
-function updateMessageStatus(
-  newMessage: Message,
-  idxMessageToCommunicate?: number,
-  messageSaved?: Message,
-  tipoCalificacionId?: number
-) {
-  if (idxMessageToCommunicate == null) throw new Error('idx is required')
-
-  if (!messageSaved) {
-    if (tipoCalificacionId) {
-      const messageAResponder = messagesData.value.data[idxMessageToCommunicate]
-      messageAResponder.response = undefined
-    } else {
-      messagesData.value.data[idxMessageToCommunicate].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,
-    });
-    
-    return
-  }
-
-  let messageUpdated = { ...messageSaved, chatId: newMessage?.chatId }
-
-  if (tipoCalificacionId) {
-    const messageAResponder = messagesData.value.data[idxMessageToCommunicate]
-    messageAResponder.response = messageSaved
-
-    messageUpdated = { ...messageAResponder, chatId: newMessage?.chatId }
-  } else {
-    messagesData.value.data[idxMessageToCommunicate] = messageUpdated;
-  }
-  
-  return messageUpdated;
-}
-
-const submitMessage = async (
-  messageExtraData?: { mensajeARespondeId?: string, tipoCalificacionId?: number, codigoTipoMensaje?: TypeMessageTypeCodes}
-) => {
-
-  const newMessage = createMessage(message.value, messageExtraData?.codigoTipoMensaje);
-  message.value = '';
-  if (!newMessage) return;
-  
-  let idxMessageToCommunicate = -1;
-  if (messageExtraData?.tipoCalificacionId) {
-    idxMessageToCommunicate = messagesData.value.data.findIndex((val) => val.id === messageExtraData?.mensajeARespondeId )
-    const messageAResponder = messagesData.value.data[idxMessageToCommunicate]
-
-    if ( messageAResponder ) {
-      messageAResponder.response = newMessage
-    }
-  } else {
-    idxMessageToCommunicate = messagesData.value.data.push(newMessage) - 1;
-  }
-
-  const body = {
-    message: message.value,
-    appChatId: appChatId.value,
-    ...messageExtraData,
-    codigoTipoMensaje: messageExtraData?.codigoTipoMensaje,
-    files: inputFiles.value,
-  }
-  sendApi(body).then((messageSaved) => {
-    let messageUpdated = updateMessageStatus(
-      newMessage,
-      idxMessageToCommunicate,
-      messageSaved,
-      messageExtraData?.tipoCalificacionId
-    )
-    
-    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 },
-      (response: any) => {
-        console.log("🚀 ~ socketService.value.emit ~ response:", response);
-      }
-    );
-  });
-
-  message.value = "";
-  scrollToBottom();
-  textAreaRef.value && (textAreaRef.value.style.height = "20px");
-};
-
-const sendApi = async (bodyParam: Omit<SendMessageBody, 'esCliente'>) => {
-  const body: SendMessageBody = {
-    ...bodyParam,
-    esCliente: true,
-  };
-  return sendMessageApi(body, props.tokenAuth);
-};
-
-const getMessages = async () => {
-  const lastMessagesId = messagesData.value.data[0]?.id;
-  const body: ListMessageBody = {
-    lastMessagesId,
-    appChatId: appChatId.value,
-    limit: 10,
-  };
-
-  isLoading.value = true;
-  const resp = await getMessagesApi({ body, token: props.tokenAuth });
-  isLoading.value = false;
-
-  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))
-  );
-
-  messagesData.value.canLoadMoreMessages =
-    resp.pagination.total > resp.pagination.size;
-
-  if (lastMessagesId && messageContainerRef.value?.scrollHeight) {
-    mantainElementsOnViewport(messageContainerRef.value?.scrollHeight);
-  }
-
-  if (!lastMessagesId) scrollToBottom();
-};
-
-const retryMessage = async (message: Message) => {
-  emit("show-confirm", async () => {
-    if (!message.error?.id) return;
-
-    const msg = await sendApi({
-      message: message.message,
-      appChatId: appChatId.value
-    });
-
-    if (!msg) {
-      emit("show-toast", {
-        severity: "error",
-        summary: "Error",
-        detail: "Ocurrio un error al enviar el mensaje, intente nuevamente",
-        life: 5000,
-      });
-    } else {
-      const idx = searchFromLast<Message>(
-        messagesData.value.data,
-        "id",
-        message.error.id
-      );
-
-      messagesData.value.data[idx] = { ...msg, error: undefined };
-
-      socketService.value?.emit("sendMessage", {
-        roomId: information?.value?.appChat.id,
-        message,
-      });
-    }
-
-    scrollToBottom();
-  });
-};
-
-const scrollToBottom = () => {
-  nextTick(() => {
-    if (messageContainerRef.value) {
-      messageContainerRef.value.scrollTop =
-        messageContainerRef.value.scrollHeight;
-    }
-  });
-};
-
-const mantainElementsOnViewport = (scrollHeightBeforeAdd: number) => {
-  nextTick(() => {
-    const objDiv = messageContainerRef.value;
-    if (objDiv) {
-      objDiv.scrollTop = objDiv.scrollHeight - scrollHeightBeforeAdd;
-    }
-  });
-};
-
-const textAreaRef = ref<HTMLTextAreaElement>();
-
-const fontSpace = 14;
-
-function autoAdjustHeight() {
-  if (!textAreaRef.value) return;
-
-  textAreaRef.value.style.height =
-    textAreaRef.value.scrollHeight - fontSpace + "px";
-
-  if (textAreaRef.value.scrollHeight === textAreaRef.value.clientHeight)
-    return;
-
-  textAreaRef.value.style.height = textAreaRef.value.scrollHeight + "px";
-}
-
-const socketService = ref<Socket>();
-const information = ref<ChatInformation>();
-
-function connectMsWebSocket(
-  userChat: ChatInformation,
-  app: APP_TYPE = APP_TYPE.WEBCHAT
-) {
-  if (!userChat) throw new Error("user chat is required");
-
-  socketService.value = io(window.VITE_SOCKET_URI, {
-    query: {
-      // TODO: confirmar si se quita o no
-      usuarioId: `${userChat?.chat?.persona?.funcionarioId}`,
-      aplicacion: app,
-    },
-    extraHeaders: { Authorization: props.tokenAuth },
-  });
-
-  socketService.value.removeAllListeners();
-
-  socketService.value.on("connect", () => {
-    console.log("Conectado al servidor de sockets");
-
-    socketService.value?.emit("joinRoom", `${userChat?.appChat?.id}`);
-  });
-
-  socketService.value.on("disconnect", () => {
-    console.log("Desconectado del servidor de sockets");
-  });
-
-  socketService.value.on("receiveMessage", (data: any) => {
-    console.log("Mensaje recibido:", data.message, userChat);
-    const indexMessage = messagesData.value.data.findIndex((msg) => msg.id === data.message.id);
-    
-    if (
-      data.message.sender.msPersonaId === userChat?.chat?.persona?.msPersonaId && indexMessage === -1
-    )
-      return;
-
-    if (indexMessage !== -1) {
-        messagesData.value.data[indexMessage].response = data.message.response;
-    } else {
-        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 { isMobile } = useMobile()
-
-function onQualifying({ message: messageParam, emoji }: { message: Message, emoji: { iconUnicode: string, value: number } }) {
-  const callback =  async () => {
-    if (!messageParam.id || !emoji) return;
-
-    message.value = emoji.iconUnicode
-    
-    submitMessage({
-      tipoCalificacionId: emoji.value,
-      mensajeARespondeId: messageParam.id
-    }).then();
-  }
-
-  emit('onQualifying', { message: emoji.iconUnicode , callback})
-};
-
-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;
-
-  const resp = await getInformationApi(props.tokenAuth);
-
-  if (!resp) return;
-
-  information.value = resp;
-  appChatId.value = resp.appChat.id;
-  notViewed.value = resp.appChat.totalNoVistosCliente;
-  connectMsWebSocket(resp);
-  getMessages();
-  emit("not-viewed-total", resp.appChat.totalNoVistosCliente);
-});
-
-onUnmounted(() => {
-  socketService.value?.off();
-});
-</script>
-
-<style scoped>
-.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%);
-}
-
-.fit {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-.center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.message-send-block {
-  display: block;
-  margin: 1.5rem;
-  text-align: center;
-}
-</style>
+<template>
+  <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
+        v-if="messagesData.data.length > 0"
+        :messages="messagesData.data"
+        :canLoadMoreMessages="messagesData.canLoadMoreMessages"
+        @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>
+      </div>
+    </div>
+
+    <div class="w-full">
+      <form v-if="!isDisabledBoxMessage" class="message-send" @submit.prevent="(event) => submitMessage()">
+        <div class="form-message">
+          <div class="jl-inputgroup-chat">
+            <textarea
+              v-model="message"
+              class="jl2-input-chat"
+              placeholder="Escribe tu mensaje"
+              required
+              ref="textAreaRef"
+              @input="() => autoAdjustHeight()"
+              @keydown.enter="
+                (event) => {
+                  !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>
+          </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">
+    <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">
+import {
+  ref,
+  onMounted,
+  nextTick,
+  PropType,
+  watch,
+  onUnmounted,
+  reactive,
+} from "vue";
+import { v4 as uuidv4 } from "uuid";
+
+import {
+  type SendMessageBody,
+  ChatInformation,
+  ListMessageBody,
+  Message,
+} from "../dto/app.dto";
+import IconClose from "./IconClose.vue";
+import IconSend from "./IconSend.vue";
+import {
+  getMessagesApi,
+  sendMessageApi,
+  setVistoToTrueApi,
+  updateMessageApi,
+} from "../store/index";
+import { getInformationApi } from "../store";
+import MessageList from "./MessageList.vue";
+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 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: [],
+  canLoadMoreMessages: false,
+});
+
+const appChatId = ref("");
+const isLoading = ref(false);
+
+const emit = defineEmits([
+  "show-toast",
+  "show-confirm",
+  "new-message",
+  "clear-new-messages",
+  "not-viewed-total",
+  "onQualifying",
+]);
+
+const props = defineProps({
+  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 messageContainerRef = ref<HTMLElement | null>(null);
+
+watch(
+  () => props.visible,
+  async (current) => {
+    if (!current) return;
+
+    emit("clear-new-messages");
+    scrollToBottom();
+
+    if (notViewed.value > 0) {
+      setVistoToTrueApi(appChatId.value, props.tokenAuth);
+    }
+
+    if (appChatId.value) return;
+
+    const resp = await getInformationApi(props.tokenAuth);
+
+    if (resp) {
+      appChatId.value = resp.appChat.id;
+    }
+  }
+);
+
+function saltoDeLineaOEnviar(event: KeyboardEvent, messageTypeCode?: TypeMessageTypeCodes) {
+  if(isMobile.value) {
+    autoAdjustHeight();
+    return;
+  }
+
+  if (event.key === "Enter" && event.shiftKey) {
+    const val = (event.target as any)?.value || "";
+    (event.target as any).value = val + "\n";
+    autoAdjustHeight();
+    return;
+  }
+
+  submitMessage({ codigoTipoMensaje: messageTypeCode });
+}
+
+function createMessage(message: string, codigoTipoMensaje?: TypeMessageTypeCodes) {
+  if (message?.length > 300) {
+    emit("show-toast", {
+      severity: "warn",
+      summary: "Error",
+      detail: "El mensaje no puede superar los 300 caracteres",
+      life: 5000,
+    });
+    return;
+  }
+
+  if (!message.trim() && codigoTipoMensaje !== MESSAGE_TYPE_CODES.IMAGEN) {
+    emit("show-toast", {
+      severity: "warn",
+      summary: "Error",
+      detail: "Por favor ingrese un mensaje",
+      life: 5000,
+    });
+    return;
+  }
+
+  const messageType = codigoTipoMensaje
+      ? {
+          code: codigoTipoMensaje,
+        }
+      : undefined;  
+
+  const newMessage: Message = {
+    id: uuidv4(),
+    chatId: information.value?.chat?.id,
+    message,
+    visto: true,
+    multimedia: false,
+    esCliente: true,
+    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,
+      msPersonaId: props.user.msPersonaId,
+    },
+    response: undefined
+  };
+  
+  return newMessage
+}
+
+function updateMessageStatus(
+  newMessage: Message,
+  idxMessageToCommunicate?: number,
+  messageSaved?: Message,
+  tipoCalificacionId?: number
+) {
+  if (idxMessageToCommunicate == null) throw new Error('idx is required')
+
+  if (!messageSaved) {
+    if (tipoCalificacionId) {
+      const messageAResponder = messagesData.value.data[idxMessageToCommunicate]
+      messageAResponder.response = undefined
+    } else {
+      messagesData.value.data[idxMessageToCommunicate].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,
+    });
+    
+    return
+  }
+
+  let messageUpdated = { ...messageSaved, chatId: newMessage?.chatId }
+
+  if (tipoCalificacionId) {
+    const messageAResponder = messagesData.value.data[idxMessageToCommunicate]
+    messageAResponder.response = messageSaved
+
+    messageUpdated = { ...messageAResponder, chatId: newMessage?.chatId }
+  } else {
+    messagesData.value.data[idxMessageToCommunicate] = messageUpdated;
+  }
+  
+  return messageUpdated;
+}
+
+const submitMessage = async (
+  messageExtraData?: { mensajeARespondeId?: string, tipoCalificacionId?: number, codigoTipoMensaje?: TypeMessageTypeCodes}
+) => {
+
+  const newMessage = createMessage(message.value, messageExtraData?.codigoTipoMensaje);
+  message.value = '';
+  if (!newMessage) return;
+  
+  let idxMessageToCommunicate = -1;
+  if (messageExtraData?.tipoCalificacionId) {
+    idxMessageToCommunicate = messagesData.value.data.findIndex((val) => val.id === messageExtraData?.mensajeARespondeId )
+    const messageAResponder = messagesData.value.data[idxMessageToCommunicate]
+
+    if ( messageAResponder ) {
+      messageAResponder.response = newMessage
+    }
+  } else {
+    idxMessageToCommunicate = messagesData.value.data.push(newMessage) - 1;
+  }
+
+  const body = {
+    message: message.value,
+    appChatId: appChatId.value,
+    ...messageExtraData,
+    codigoTipoMensaje: messageExtraData?.codigoTipoMensaje,
+    files: inputFiles.value,
+  }
+  sendApi(body).then((messageSaved) => {
+    let messageUpdated = updateMessageStatus(
+      newMessage,
+      idxMessageToCommunicate,
+      messageSaved,
+      messageExtraData?.tipoCalificacionId
+    )
+    
+    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 },
+      (response: any) => {
+        console.log("🚀 ~ socketService.value.emit ~ response:", response);
+      }
+    );
+  });
+
+  message.value = "";
+  scrollToBottom();
+  textAreaRef.value && (textAreaRef.value.style.height = "20px");
+};
+
+const sendApi = async (bodyParam: Omit<SendMessageBody, 'esCliente'>) => {
+  const body: SendMessageBody = {
+    ...bodyParam,
+    esCliente: true,
+  };
+  return sendMessageApi(body, props.tokenAuth);
+};
+
+const getMessages = async () => {
+  const lastMessagesId = messagesData.value.data[0]?.id;
+  const body: ListMessageBody = {
+    lastMessagesId,
+    appChatId: appChatId.value,
+    limit: 10,
+  };
+
+  isLoading.value = true;
+  const resp = await getMessagesApi({ body, token: props.tokenAuth });
+  isLoading.value = false;
+
+  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))
+  );
+
+  messagesData.value.canLoadMoreMessages =
+    resp.pagination.total > resp.pagination.size;
+
+  if (lastMessagesId && messageContainerRef.value?.scrollHeight) {
+    mantainElementsOnViewport(messageContainerRef.value?.scrollHeight);
+  }
+
+  if (!lastMessagesId) scrollToBottom();
+};
+
+const retryMessage = async (message: Message) => {
+  emit("show-confirm", async () => {
+    if (!message.error?.id) return;
+
+    const msg = await sendApi({
+      message: message.message,
+      appChatId: appChatId.value
+    });
+
+    if (!msg) {
+      emit("show-toast", {
+        severity: "error",
+        summary: "Error",
+        detail: "Ocurrio un error al enviar el mensaje, intente nuevamente",
+        life: 5000,
+      });
+    } else {
+      const idx = searchFromLast<Message>(
+        messagesData.value.data,
+        "id",
+        message.error.id
+      );
+
+      messagesData.value.data[idx] = { ...msg, error: undefined };
+
+      socketService.value?.emit("sendMessage", {
+        roomId: information?.value?.appChat.id,
+        message,
+      });
+    }
+
+    scrollToBottom();
+  });
+};
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (messageContainerRef.value) {
+      messageContainerRef.value.scrollTop =
+        messageContainerRef.value.scrollHeight;
+    }
+  });
+};
+
+const mantainElementsOnViewport = (scrollHeightBeforeAdd: number) => {
+  nextTick(() => {
+    const objDiv = messageContainerRef.value;
+    if (objDiv) {
+      objDiv.scrollTop = objDiv.scrollHeight - scrollHeightBeforeAdd;
+    }
+  });
+};
+
+const textAreaRef = ref<HTMLTextAreaElement>();
+
+const fontSpace = 14;
+
+function autoAdjustHeight() {
+  if (!textAreaRef.value) return;
+
+  textAreaRef.value.style.height =
+    textAreaRef.value.scrollHeight - fontSpace + "px";
+
+  if (textAreaRef.value.scrollHeight === textAreaRef.value.clientHeight)
+    return;
+
+  textAreaRef.value.style.height = textAreaRef.value.scrollHeight + "px";
+}
+
+const socketService = ref<Socket>();
+const information = ref<ChatInformation>();
+
+function connectMsWebSocket(
+  userChat: ChatInformation,
+  app: APP_TYPE = APP_TYPE.WEBCHAT
+) {
+  if (!userChat) throw new Error("user chat is required");
+
+  socketService.value = io(window.VITE_SOCKET_URI, {
+    query: {
+      // TODO: confirmar si se quita o no
+      usuarioId: `${userChat?.chat?.persona?.funcionarioId}`,
+      aplicacion: app,
+    },
+    extraHeaders: { Authorization: props.tokenAuth },
+  });
+
+  socketService.value.removeAllListeners();
+
+  socketService.value.on("connect", () => {
+    console.log("Conectado al servidor de sockets");
+
+    socketService.value?.emit("joinRoom", `${userChat?.appChat?.id}`);
+  });
+
+  socketService.value.on("disconnect", () => {
+    console.log("Desconectado del servidor de sockets");
+  });
+
+  socketService.value.on("receiveMessage", (data: any) => {
+    console.log("Mensaje recibido:", data.message, userChat);
+    const indexMessage = messagesData.value.data.findIndex((msg) => msg.id === data.message.id);
+    
+    if (
+      data.message.sender.msPersonaId === userChat?.chat?.persona?.msPersonaId && indexMessage === -1
+    )
+      return;
+
+    if (indexMessage !== -1) {
+        messagesData.value.data[indexMessage].response = data.message.response;
+    } else {
+        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 { isMobile } = useMobile()
+
+function onQualifying({ message: messageParam, emoji }: { message: Message, emoji: { iconUnicode: string, value: number } }) {
+  const callback =  async () => {
+    if (!messageParam.id || !emoji) return;
+
+    message.value = emoji.iconUnicode
+    
+    submitMessage({
+      tipoCalificacionId: emoji.value,
+      mensajeARespondeId: messageParam.id
+    }).then();
+  }
+
+  emit('onQualifying', { message: emoji.iconUnicode , callback})
+};
+
+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;
+
+  const resp = await getInformationApi(props.tokenAuth);
+
+  if (!resp) return;
+
+  information.value = resp;
+  appChatId.value = resp.appChat.id;
+  notViewed.value = resp.appChat.totalNoVistosCliente;
+  connectMsWebSocket(resp);
+  getMessages();
+  emit("not-viewed-total", resp.appChat.totalNoVistosCliente);
+});
+
+onUnmounted(() => {
+  socketService.value?.off();
+});
+</script>
+
+<style scoped>
+.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%);
+}
+
+.fit {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.message-send-block {
+  display: block;
+  margin: 1.5rem;
+  text-align: center;
+}
+</style>