vue-wiguet-chatweb 0.1.28 → 0.1.29

package/src/components/MessageList.vue

@@ -1,357 +1,357 @@
-<template>
-  <div ref="target" class="target"></div>
-  <div class="messages-container-list">
-    <div
-      v-for="message in props.messages"
-      :key="message.id"
-      class="message"
-      :class="message.esCliente ? 'message-right' : 'message-left'"
-    >
-      <div class="message-container">
-        <div
-          v-if="message.error && message.esCliente"
-          class="btn-container-widget"
-        >
-          <button
-            text
-            rounded
-            class="btn-danger"
-            icon="fa-solid fa-circle-exclamation"
-            aria-label="Cancel"
-            @click="emit('retry', message)"
-          >
-            <DangerIcon />
-          </button>
-        </div>
-        <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 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>
-
-                <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>
-                <div v-if="message.messageType?.code === MESSAGE_TYPE_CODES.IMAGEN" style="text-align: center;">
-                  <a href="javascript:" class="btn-icon" @click="emit('see', message)">
-                    <img :src="message.thumbnailFile ?? message.urlFile" alt="image" width="150" />
-                  </a>
-                </div>
-
-                <div v-if="emoji[message.message ?? '']">
-                  <img :src="emoji[message.message]" alt="icono" class="icon" />
-                </div>
-
-                <div v-else class="message-text" style="white-space: pre-line" v-html="textToRichFormat(message.message)"></div>
-              </div>
-
-              <div class="detail-message flex justify-between mt-2">
-                <span class="mr-5" v-if="message.sender?.nombreCompleto">
-                  {{
-                    message.esCliente
-                      ? message.sender?.nombreCompleto
-                      : "ECOSISTEMA JL"
-                  }}
-                </span>
-                <span class="mr-5" v-else> </span>
-                <span>
-                  {{
-                    DateTime.fromISO(message.createdAt).toFormat(
-                      "dd-MM-yyyy HH:mm"
-                    )
-                  }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType, onBeforeMount, ref, watch, h } from 'vue';
-import { useIntersectionObserver } from "@vueuse/core";
-import { type Message } from "../dto/app.dto";
-import { DateTime } from "luxon";
-import DangerIcon from "./DangerIcon.vue";
-import SadIcon from '../assets/emojis/SadIcon.svg'
-import AngryIcon from '../assets/emojis/AngryIcon.svg'
-import HappiestIcon from '../assets/emojis/HappiestIcon.svg'
-import NeutralIcon from '../assets/emojis/NeutralIcon.svg'
-import HappyIcon from '../assets/emojis/HappyIcon.svg'
-import { MESSAGE_TYPE_CODES } from '../resources/constants/message-type.constant';
-
-const emit = defineEmits(["loadMore", "retry", "onQualifying", "see"]);
-const props = defineProps({
-  messages: {
-    type: Array as PropType<Message[]>,
-    default: () => [],
-  },
-  canLoadMoreMessages: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const target = ref();
-
-const { pause, resume } = useIntersectionObserver(
-  target,
-  ([{ isIntersecting }]) => {
-    if (isIntersecting) {
-      emit("loadMore");
-    }
-  }
-);
-
-function showIcon(message: Message, emojiParam: any) {
-  if(!message.response || typeof message.response !=='object') return true;
-
-  return emojiParam.iconUnicode === message.response.message
-}
-
-onBeforeMount(() => {
-  if (!props.canLoadMoreMessages) {
-    pause();
-  }
-});
-watch(
-  () => props.canLoadMoreMessages,
-  (current) => {
-    if (current) {
-      resume();
-      return;
-    }
-    pause();
-  }
-);
-
-type RichTextType = {
-  regex: RegExp;
-  tag: string;
-};
-
-const richText: { [key in string]: RichTextType } = {
-  BOLD: { regex: /\*(.+?)\*(?!\*)/g, tag: '<strong--custom-tag>{val}</strong--custom-tag>' },
-  ITALIC: { regex: /_(.+?)_/, tag: '<i--custom-tag>{val}</i--custom-tag>' },
-  CROSSED_OUT: { regex: /~(.+?)~(?!~)/g, tag: '<del--custom-tag>{val}</del--custom-tag>' },
-  URL: {
-    regex: /(http?s?:\/\/[^\s]+)/g,
-    tag: '<a--custom-tag href="{val}" target="_blank">{val}</a--custom-tag>',
-  },
-};
-
-function textToRichFormat(text: string) {
-  const richTextValues = Object.values(richText);
-
-  if (!richTextValues || (Array.isArray(richTextValues) && richTextValues.length === 0))
-    return text;
-
-  const newMessage = () => {
-
-    return richTextValues.reduce((textPrev, rtv) => {
-      return textPrev.replace(rtv.regex, (middleValueAssert, middleValue) => {
-        const regexVerifyExistTag = /--custom-tag/;
-
-        if (regexVerifyExistTag.test(middleValueAssert)) return middleValueAssert;
-
-        return rtv.tag.replace(/{val}/g, middleValue);
-      });
-    }, text);
-  };
-
-  return newMessage().replace(/--custom-tag/g, '');
-}
-
-const emojis = [
-  { label: 'Excelente', value: 1,  icon: HappiestIcon, iconUnicode: '😊'},
-  { label: 'Buena', value: 2,  icon: HappyIcon, iconUnicode: '😄'},
-  { label: 'Aceptable', value: 3,  icon: NeutralIcon, iconUnicode: '🙂'},
-  { label: 'Mala', value: 4,  icon: SadIcon, iconUnicode: '😐'},
-  { label: 'Muy Mala', value: 5, icon: AngryIcon, iconUnicode: '🙁'},
-]
-''
-const emoji: { [key in string]: any } = {
-  '😊': HappiestIcon,
-  '😄': HappyIcon,
-  '🙂': NeutralIcon,
-  '😐': SadIcon,
-  '🙁': AngryIcon,
-  '': null
-}
-
-</script>
-
-<style scoped>
-.bubble {
-  --r: 25px;
-  /* the radius */
-  --t: 30px;
-  /* the size of the tail */
-
-  padding: calc(2 * var(--r) / 3);
-  -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%)
-      var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
-    conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2)
-      calc(var(--r) / -2) padding-box,
-    radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space
-      padding-box;
-  mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d)
-      100% / calc(100% - var(--r)) var(--t) no-repeat,
-    conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2)
-      calc(var(--r) / -2) padding-box,
-    radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space
-      padding-box;
-  /* background: linear-gradient(135deg, #FE6D00, #1384C5) border-box; */
-  color: #fff;
-  height: 100%;
-}
-
-.left {
-  --_d: 0%;
-  border-left: var(--t) solid #0000;
-  margin-right: 0;
-  background-color: #fcd7ae;
-  color: #4d4d4d;
-}
-
-.bubble > .content-left {
-  margin-right: 10px;
-  margin-bottom: 1px;
-}
-
-.right {
-  --_d: 100%;
-  border-right: var(--t) solid #0000;
-  margin-right: 0;
-  background-color: #fdeedb;
-  color: #4d4d4d;
-}
-
-.bubble > .content-right {
-  margin-bottom: 1px;
-  margin-right: 10px;
-}
-
-.message-text {
-  margin-bottom: 10px;
-  overflow-wrap: break-word;
-}
-.detail-message {
-  font-size: 10px;
-  color: #808080;
-  display: flex;
-  justify-content: space-between;
-}
-
-.chat-message {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.message {
-  width: 100%;
-  display: flex;
-}
-
-.message-left {
-  justify-content: start;
-}
-.message-right {
-  justify-content: end;
-}
-.target {
-  padding: 0.5rem 0;
-  width: 100%;
-}
-
-.btn-danger {
-  background-color: transparent;
-  border: 0;
-  border-radius: 50%;
-  cursor: pointer;
-  padding: 0;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  & svg {
-    width: 24px;
-    height: 24px;
-  }
-  &:hover {
-    background-color: rgba(255, 0, 0, 0.226);
-  }
-}
-
-.btn-container-widget {
-  display: flex;
-  align-items: center;
-  position: absolute;
-  left: -40px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.message-container {
-  min-width: 80%;
-  max-width: 80%;
-  position: relative;
-  margin-bottom: 0.5rem;
-}
-
-.messages-container-list {
-  width: 100%;
-}
-
-.icon {
-  width: 2rem;
-}
-
-.btn-icon {
-  text-decoration: none;
-  border: none;
-  color: rgb(156 163 175 / 1);
-}
-
-.btn-icon:hover:not(.content-disabled) {
-  color: rgb(31 41 55 / 1);
-}
-
-.btn-icon span {
-  text-wrap: nowrap;
-}
-
-.btn-icon .icon {
-  font-size: 2rem;
-}
-
-.content-disabled {
-  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
-  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
-  opacity: 0.5;
-}
-
-</style>
+<template>
+  <div ref="target" class="target"></div>
+  <div class="messages-container-list">
+    <div
+      v-for="message in props.messages"
+      :key="message.id"
+      class="message"
+      :class="message.esCliente ? 'message-right' : 'message-left'"
+    >
+      <div class="message-container">
+        <div
+          v-if="message.error && message.esCliente"
+          class="btn-container-widget"
+        >
+          <button
+            text
+            rounded
+            class="btn-danger"
+            icon="fa-solid fa-circle-exclamation"
+            aria-label="Cancel"
+            @click="emit('retry', message)"
+          >
+            <DangerIcon />
+          </button>
+        </div>
+        <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 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>
+
+                <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>
+                <div v-if="message.messageType?.code === MESSAGE_TYPE_CODES.IMAGEN" style="text-align: center;">
+                  <a href="javascript:" class="btn-icon" @click="emit('see', message)">
+                    <img :src="message.thumbnailFile ?? message.urlFile" alt="image" width="150" />
+                  </a>
+                </div>
+
+                <div v-if="emoji[message.message ?? '']">
+                  <img :src="emoji[message.message]" alt="icono" class="icon" />
+                </div>
+
+                <div v-else class="message-text" style="white-space: pre-line" v-html="textToRichFormat(message.message)"></div>
+              </div>
+
+              <div class="detail-message flex justify-between mt-2">
+                <span class="mr-5" v-if="message.sender?.nombreCompleto">
+                  {{
+                    message.esCliente
+                      ? message.sender?.nombreCompleto
+                      : "ECOSISTEMA JL"
+                  }}
+                </span>
+                <span class="mr-5" v-else> </span>
+                <span>
+                  {{
+                    DateTime.fromISO(message.createdAt).toFormat(
+                      "dd-MM-yyyy HH:mm"
+                    )
+                  }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, onBeforeMount, ref, watch, h } from 'vue';
+import { useIntersectionObserver } from "@vueuse/core";
+import { type Message } from "../dto/app.dto";
+import { DateTime } from "luxon";
+import DangerIcon from "./DangerIcon.vue";
+import SadIcon from '../assets/emojis/SadIcon.svg'
+import AngryIcon from '../assets/emojis/AngryIcon.svg'
+import HappiestIcon from '../assets/emojis/HappiestIcon.svg'
+import NeutralIcon from '../assets/emojis/NeutralIcon.svg'
+import HappyIcon from '../assets/emojis/HappyIcon.svg'
+import { MESSAGE_TYPE_CODES } from '../resources/constants/message-type.constant';
+
+const emit = defineEmits(["loadMore", "retry", "onQualifying", "see"]);
+const props = defineProps({
+  messages: {
+    type: Array as PropType<Message[]>,
+    default: () => [],
+  },
+  canLoadMoreMessages: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const target = ref();
+
+const { pause, resume } = useIntersectionObserver(
+  target,
+  ([{ isIntersecting }]) => {
+    if (isIntersecting) {
+      emit("loadMore");
+    }
+  }
+);
+
+function showIcon(message: Message, emojiParam: any) {
+  if(!message.response || typeof message.response !=='object') return true;
+
+  return emojiParam.iconUnicode === message.response.message
+}
+
+onBeforeMount(() => {
+  if (!props.canLoadMoreMessages) {
+    pause();
+  }
+});
+watch(
+  () => props.canLoadMoreMessages,
+  (current) => {
+    if (current) {
+      resume();
+      return;
+    }
+    pause();
+  }
+);
+
+type RichTextType = {
+  regex: RegExp;
+  tag: string;
+};
+
+const richText: { [key in string]: RichTextType } = {
+  BOLD: { regex: /\*(.+?)\*(?!\*)/g, tag: '<strong--custom-tag>{val}</strong--custom-tag>' },
+  ITALIC: { regex: /_(.+?)_/, tag: '<i--custom-tag>{val}</i--custom-tag>' },
+  CROSSED_OUT: { regex: /~(.+?)~(?!~)/g, tag: '<del--custom-tag>{val}</del--custom-tag>' },
+  URL: {
+    regex: /(http?s?:\/\/[^\s]+)/g,
+    tag: '<a--custom-tag href="{val}" target="_blank">{val}</a--custom-tag>',
+  },
+};
+
+function textToRichFormat(text: string) {
+  const richTextValues = Object.values(richText);
+
+  if (!richTextValues || (Array.isArray(richTextValues) && richTextValues.length === 0))
+    return text;
+
+  const newMessage = () => {
+
+    return richTextValues.reduce((textPrev, rtv) => {
+      return textPrev.replace(rtv.regex, (middleValueAssert, middleValue) => {
+        const regexVerifyExistTag = /--custom-tag/;
+
+        if (regexVerifyExistTag.test(middleValueAssert)) return middleValueAssert;
+
+        return rtv.tag.replace(/{val}/g, middleValue);
+      });
+    }, text);
+  };
+
+  return newMessage().replace(/--custom-tag/g, '');
+}
+
+const emojis = [
+  { label: 'Excelente', value: 1,  icon: HappiestIcon, iconUnicode: '😊'},
+  { label: 'Buena', value: 2,  icon: HappyIcon, iconUnicode: '😄'},
+  { label: 'Aceptable', value: 3,  icon: NeutralIcon, iconUnicode: '🙂'},
+  { label: 'Mala', value: 4,  icon: SadIcon, iconUnicode: '😐'},
+  { label: 'Muy Mala', value: 5, icon: AngryIcon, iconUnicode: '🙁'},
+]
+''
+const emoji: { [key in string]: any } = {
+  '😊': HappiestIcon,
+  '😄': HappyIcon,
+  '🙂': NeutralIcon,
+  '😐': SadIcon,
+  '🙁': AngryIcon,
+  '': null
+}
+
+</script>
+
+<style scoped>
+.bubble {
+  --r: 25px;
+  /* the radius */
+  --t: 30px;
+  /* the size of the tail */
+
+  padding: calc(2 * var(--r) / 3);
+  -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%)
+      var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
+    conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2)
+      calc(var(--r) / -2) padding-box,
+    radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space
+      padding-box;
+  mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d)
+      100% / calc(100% - var(--r)) var(--t) no-repeat,
+    conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2)
+      calc(var(--r) / -2) padding-box,
+    radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space
+      padding-box;
+  /* background: linear-gradient(135deg, #FE6D00, #1384C5) border-box; */
+  color: #fff;
+  height: 100%;
+}
+
+.left {
+  --_d: 0%;
+  border-left: var(--t) solid #0000;
+  margin-right: 0;
+  background-color: #fcd7ae;
+  color: #4d4d4d;
+}
+
+.bubble > .content-left {
+  margin-right: 10px;
+  margin-bottom: 1px;
+}
+
+.right {
+  --_d: 100%;
+  border-right: var(--t) solid #0000;
+  margin-right: 0;
+  background-color: #fdeedb;
+  color: #4d4d4d;
+}
+
+.bubble > .content-right {
+  margin-bottom: 1px;
+  margin-right: 10px;
+}
+
+.message-text {
+  margin-bottom: 10px;
+  overflow-wrap: break-word;
+}
+.detail-message {
+  font-size: 10px;
+  color: #808080;
+  display: flex;
+  justify-content: space-between;
+}
+
+.chat-message {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.message {
+  width: 100%;
+  display: flex;
+}
+
+.message-left {
+  justify-content: start;
+}
+.message-right {
+  justify-content: end;
+}
+.target {
+  padding: 0.5rem 0;
+  width: 100%;
+}
+
+.btn-danger {
+  background-color: transparent;
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  & svg {
+    width: 24px;
+    height: 24px;
+  }
+  &:hover {
+    background-color: rgba(255, 0, 0, 0.226);
+  }
+}
+
+.btn-container-widget {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: -40px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.message-container {
+  min-width: 80%;
+  max-width: 80%;
+  position: relative;
+  margin-bottom: 0.5rem;
+}
+
+.messages-container-list {
+  width: 100%;
+}
+
+.icon {
+  width: 2rem;
+}
+
+.btn-icon {
+  text-decoration: none;
+  border: none;
+  color: rgb(156 163 175 / 1);
+}
+
+.btn-icon:hover:not(.content-disabled) {
+  color: rgb(31 41 55 / 1);
+}
+
+.btn-icon span {
+  text-wrap: nowrap;
+}
+
+.btn-icon .icon {
+  font-size: 2rem;
+}
+
+.content-disabled {
+  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
+  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
+  opacity: 0.5;
+}
+
+</style>