vue-wiguet-chatweb 0.0.9 → 0.0.11

package/src/components/IconWidget.vue

@@ -1,46 +1,46 @@
-<template>
-    <svg width="87" height="87" viewBox="0 0 87 87" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <g filter="url(#filter0_d_4007_3488)">
-        <path d="M43.5 77C64.2107 77 81 60.2107 81 39.5C81 18.7893 64.2107 2 43.5 2C22.7893 2 6 18.7893 6 39.5C6 60.2107 22.7893 77 43.5 77Z" fill="white" stroke="#F28B0C" stroke-width="3" stroke-miterlimit="10"/>
-        <path d="M39.705 38.885C40.6908 38.885 41.49 38.0858 41.49 37.1C41.49 36.1142 40.6908 35.315 39.705 35.315C38.7192 35.315 37.92 36.1142 37.92 37.1C37.92 38.0858 38.7192 38.885 39.705 38.885Z" fill="#F28B0C"/>
-        <path d="M45.075 38.885C46.0608 38.885 46.86 38.0858 46.86 37.1C46.86 36.1142 46.0608 35.315 45.075 35.315C44.0892 35.315 43.29 36.1142 43.29 37.1C43.29 38.0858 44.0892 38.885 45.075 38.885Z" fill="#F28B0C"/>
-        <path d="M50.445 38.885C51.4308 38.885 52.23 38.0858 52.23 37.1C52.23 36.1142 51.4308 35.315 50.445 35.315C49.4592 35.315 48.66 36.1142 48.66 37.1C48.66 38.0858 49.4592 38.885 50.445 38.885Z" fill="#F28B0C"/>
-        <path d="M63.27 58.235L58.755 47.78C61.125 44.765 62.415 40.97 62.415 37.175C62.415 26.435 52.665 18.185 41.925 20.12C39.99 19.325 37.98 18.905 35.835 18.905C26.955 18.905 19.785 26.135 19.785 34.955C19.785 38.54 21 41.975 23.145 44.765L18.99 54.44C18.84 54.8 18.915 55.235 19.2 55.445C19.485 55.73 19.92 55.73 20.205 55.595L30.6 50.15C31.89 50.585 33.255 50.87 34.68 50.945C39.48 54.53 45.57 55.25 50.655 53.45L61.905 59.33C62.265 59.48 62.625 59.48 62.91 59.18C63.345 58.97 63.405 58.61 63.27 58.25V58.235ZM51.24 51.71C51.03 51.56 50.745 51.56 50.52 51.635C48.795 52.28 46.935 52.64 45.15 52.64C36.69 52.64 29.61 45.755 29.61 37.1C29.61 29.72 34.845 23.345 42.075 21.845C51.75 19.91 60.705 27.29 60.705 37.1C60.705 40.685 59.415 44.27 57.12 46.985C56.91 47.27 56.835 47.63 56.97 47.915L60.69 56.585L51.24 51.71Z" fill="#F28B0C"/>
-        </g>
-        <defs>
-        <filter id="filter0_d_4007_3488" x="0.5" y="0.5" width="86" height="86" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-        <feOffset dy="4"/>
-        <feGaussianBlur stdDeviation="2"/>
-        <feComposite in2="hardAlpha" operator="out"/>
-        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4007_3488"/>
-        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4007_3488" result="shape"/>
-        </filter>
-        </defs>
-    </svg>
-    
-<!-- <svg width="87" height="87" viewBox="0 0 87 87" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g filter="url(#filter0_d_4007_3488)">
-    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M43.5 77C64.2107 77 81 60.2107 81 39.5C81 18.7893 64.2107 2 43.5 2C22.7893 2 6 18.7893 6 39.5C6 60.2107 22.7893 77 43.5 77Z" fill="white" stroke="#F28B0C" stroke-width="3" stroke-miterlimit="10"/>
-    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M39.705 38.885C40.6908 38.885 41.49 38.0858 41.49 37.1C41.49 36.1142 40.6908 35.315 39.705 35.315C38.7192 35.315 37.92 36.1142 37.92 37.1C37.92 38.0858 38.7192 38.885 39.705 38.885Z"/>
-    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M45.075 38.885C46.0608 38.885 46.86 38.0858 46.86 37.1C46.86 36.1142 46.0608 35.315 45.075 35.315C44.0892 35.315 43.29 36.1142 43.29 37.1C43.29 38.0858 44.0892 38.885 45.075 38.885Z"/>
-    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M50.445 38.885C51.4308 38.885 52.23 38.0858 52.23 37.1C52.23 36.1142 51.4308 35.315 50.445 35.315C49.4592 35.315 48.66 36.1142 48.66 37.1C48.66 38.0858 49.4592 38.885 50.445 38.885Z"/>
-    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M63.27 58.235L58.755 47.78C61.125 44.765 62.415 40.97 62.415 37.175C62.415 26.435 52.665 18.185 41.925 20.12C39.99 19.325 37.98 18.905 35.835 18.905C26.955 18.905 19.785 26.135 19.785 34.955C19.785 38.54 21 41.975 23.145 44.765L18.99 54.44C18.84 54.8 18.915 55.235 19.2 55.445C19.485 55.73 19.92 55.73 20.205 55.595L30.6 50.15C31.89 50.585 33.255 50.87 34.68 50.945C39.48 54.53 45.57 55.25 50.655 53.45L61.905 59.33C62.265 59.48 62.625 59.48 62.91 59.18C63.345 58.97 63.405 58.61 63.27 58.25V58.235ZM51.24 51.71C51.03 51.56 50.745 51.56 50.52 51.635C48.795 52.28 46.935 52.64 45.15 52.64C36.69 52.64 29.61 45.755 29.61 37.1C29.61 29.72 34.845 23.345 42.075 21.845C51.75 19.91 60.705 27.29 60.705 37.1C60.705 40.685 59.415 44.27 57.12 46.985C56.91 47.27 56.835 47.63 56.97 47.915L60.69 56.585L51.24 51.71Z"/>
-    </g>
-    <defs>
-    <filter id="filter0_d_4007_3488" x="0.5" y="0.5" width="86" height="86" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-    <feOffset dy="4"/>
-    <feGaussianBlur stdDeviation="2"/>
-    <feComposite in2="hardAlpha" operator="out"/>
-    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4007_3488"/>
-    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4007_3488" result="shape"/>
-    </filter>
-    </defs>
-</svg> -->
-    
+<template>
+    <svg width="87" height="87" viewBox="0 0 87 87" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g filter="url(#filter0_d_4007_3488)">
+        <path d="M43.5 77C64.2107 77 81 60.2107 81 39.5C81 18.7893 64.2107 2 43.5 2C22.7893 2 6 18.7893 6 39.5C6 60.2107 22.7893 77 43.5 77Z" fill="white" stroke="#F28B0C" stroke-width="3" stroke-miterlimit="10"/>
+        <path d="M39.705 38.885C40.6908 38.885 41.49 38.0858 41.49 37.1C41.49 36.1142 40.6908 35.315 39.705 35.315C38.7192 35.315 37.92 36.1142 37.92 37.1C37.92 38.0858 38.7192 38.885 39.705 38.885Z" fill="#F28B0C"/>
+        <path d="M45.075 38.885C46.0608 38.885 46.86 38.0858 46.86 37.1C46.86 36.1142 46.0608 35.315 45.075 35.315C44.0892 35.315 43.29 36.1142 43.29 37.1C43.29 38.0858 44.0892 38.885 45.075 38.885Z" fill="#F28B0C"/>
+        <path d="M50.445 38.885C51.4308 38.885 52.23 38.0858 52.23 37.1C52.23 36.1142 51.4308 35.315 50.445 35.315C49.4592 35.315 48.66 36.1142 48.66 37.1C48.66 38.0858 49.4592 38.885 50.445 38.885Z" fill="#F28B0C"/>
+        <path d="M63.27 58.235L58.755 47.78C61.125 44.765 62.415 40.97 62.415 37.175C62.415 26.435 52.665 18.185 41.925 20.12C39.99 19.325 37.98 18.905 35.835 18.905C26.955 18.905 19.785 26.135 19.785 34.955C19.785 38.54 21 41.975 23.145 44.765L18.99 54.44C18.84 54.8 18.915 55.235 19.2 55.445C19.485 55.73 19.92 55.73 20.205 55.595L30.6 50.15C31.89 50.585 33.255 50.87 34.68 50.945C39.48 54.53 45.57 55.25 50.655 53.45L61.905 59.33C62.265 59.48 62.625 59.48 62.91 59.18C63.345 58.97 63.405 58.61 63.27 58.25V58.235ZM51.24 51.71C51.03 51.56 50.745 51.56 50.52 51.635C48.795 52.28 46.935 52.64 45.15 52.64C36.69 52.64 29.61 45.755 29.61 37.1C29.61 29.72 34.845 23.345 42.075 21.845C51.75 19.91 60.705 27.29 60.705 37.1C60.705 40.685 59.415 44.27 57.12 46.985C56.91 47.27 56.835 47.63 56.97 47.915L60.69 56.585L51.24 51.71Z" fill="#F28B0C"/>
+        </g>
+        <defs>
+        <filter id="filter0_d_4007_3488" x="0.5" y="0.5" width="86" height="86" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+        <feOffset dy="4"/>
+        <feGaussianBlur stdDeviation="2"/>
+        <feComposite in2="hardAlpha" operator="out"/>
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4007_3488"/>
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4007_3488" result="shape"/>
+        </filter>
+        </defs>
+    </svg>
+    
+<!-- <svg width="87" height="87" viewBox="0 0 87 87" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_d_4007_3488)">
+    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M43.5 77C64.2107 77 81 60.2107 81 39.5C81 18.7893 64.2107 2 43.5 2C22.7893 2 6 18.7893 6 39.5C6 60.2107 22.7893 77 43.5 77Z" fill="white" stroke="#F28B0C" stroke-width="3" stroke-miterlimit="10"/>
+    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M39.705 38.885C40.6908 38.885 41.49 38.0858 41.49 37.1C41.49 36.1142 40.6908 35.315 39.705 35.315C38.7192 35.315 37.92 36.1142 37.92 37.1C37.92 38.0858 38.7192 38.885 39.705 38.885Z"/>
+    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M45.075 38.885C46.0608 38.885 46.86 38.0858 46.86 37.1C46.86 36.1142 46.0608 35.315 45.075 35.315C44.0892 35.315 43.29 36.1142 43.29 37.1C43.29 38.0858 44.0892 38.885 45.075 38.885Z"/>
+    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M50.445 38.885C51.4308 38.885 52.23 38.0858 52.23 37.1C52.23 36.1142 51.4308 35.315 50.445 35.315C49.4592 35.315 48.66 36.1142 48.66 37.1C48.66 38.0858 49.4592 38.885 50.445 38.885Z"/>
+    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M63.27 58.235L58.755 47.78C61.125 44.765 62.415 40.97 62.415 37.175C62.415 26.435 52.665 18.185 41.925 20.12C39.99 19.325 37.98 18.905 35.835 18.905C26.955 18.905 19.785 26.135 19.785 34.955C19.785 38.54 21 41.975 23.145 44.765L18.99 54.44C18.84 54.8 18.915 55.235 19.2 55.445C19.485 55.73 19.92 55.73 20.205 55.595L30.6 50.15C31.89 50.585 33.255 50.87 34.68 50.945C39.48 54.53 45.57 55.25 50.655 53.45L61.905 59.33C62.265 59.48 62.625 59.48 62.91 59.18C63.345 58.97 63.405 58.61 63.27 58.25V58.235ZM51.24 51.71C51.03 51.56 50.745 51.56 50.52 51.635C48.795 52.28 46.935 52.64 45.15 52.64C36.69 52.64 29.61 45.755 29.61 37.1C29.61 29.72 34.845 23.345 42.075 21.845C51.75 19.91 60.705 27.29 60.705 37.1C60.705 40.685 59.415 44.27 57.12 46.985C56.91 47.27 56.835 47.63 56.97 47.915L60.69 56.585L51.24 51.71Z"/>
+    </g>
+    <defs>
+    <filter id="filter0_d_4007_3488" x="0.5" y="0.5" width="86" height="86" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+    <feOffset dy="4"/>
+    <feGaussianBlur stdDeviation="2"/>
+    <feComposite in2="hardAlpha" operator="out"/>
+    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4007_3488"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4007_3488" result="shape"/>
+    </filter>
+    </defs>
+</svg> -->
+    
 </template>

package/src/components/Loader.vue

@@ -0,0 +1,31 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: 28px; height: 28px"
+  >
+    <path
+      d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+      opacity=".25"
+    />
+    <path
+      d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+      class="spinner_ajPY"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.spinner_ajPY {
+  fill: #fe6d00;
+  transform-origin: center;
+  animation: spinner_AtaB 0.75s infinite linear;
+}
+@keyframes spinner_AtaB {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/MessageList.vue

@@ -0,0 +1,210 @@
+<template>
+  <div ref="target" class="target"></div>
+  <div
+    v-for="message in props.messages"
+    :key="message.id"
+    style="width: 100%"
+    :class="message.esCliente ? 'message-left' : 'message-right'"
+  >
+    <div class="message-container">
+      <div v-if="message.error && message.esCliente" class="btn-container">
+        <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 ? 'left' : 'right'">
+          <div :class="message.esCliente ? 'content-left' : 'content-right'">
+            <div class="message">
+              {{ message.message }}
+            </div>
+            <div class="detail-message flex justify-content-between">
+              <span class="mr-5" v-if="message.sender?.nombreCompleto">
+                {{ message.sender?.nombreCompleto }}
+              </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>
+</template>
+
+<script setup lang="ts">
+import { PropType, onBeforeMount, ref, watch } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
+import { type Message } from "../dto/app.dto";
+import { DateTime } from "luxon";
+import DangerIcon from "./DangerIcon.vue";
+
+const emit = defineEmits(["loadMore", "retry"]);
+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");
+    }
+  }
+);
+
+onBeforeMount(() => {
+  if (!props.canLoadMoreMessages) {
+    pause();
+  }
+});
+watch(
+  () => props.canLoadMoreMessages,
+  (current) => {
+    if (current) {
+      resume();
+      return;
+    }
+    pause();
+  }
+);
+</script>
+
+<style scoped>
+.bubble {
+  --r: 25px;
+  /* the radius */
+  --t: 30px;
+  /* the size of the tail */
+
+  max-width: 50%;
+  min-width: 250px;
+  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;
+}
+
+.left {
+  border-left: var(--t) solid #0000;
+  margin-right: var(--t);
+  background-color: #fcd7ae;
+  color: #4d4d4d;
+  place-self: start;
+}
+
+.bubble > .content-left {
+  margin-right: 10px;
+  margin-bottom: 1px;
+}
+
+.right {
+  border-right: var(--t) solid #0000;
+  margin-left: var(--t);
+  background-color: #fdeedb;
+  color: #4d4d4d;
+  place-self: end;
+}
+
+.bubble > .content-right {
+  margin-bottom: 1px;
+  margin-right: 10px;
+}
+
+.message {
+  text-align: initial;
+  word-break: break-all;
+  margin-bottom: 10px;
+}
+.detail-message {
+  font-size: 10px;
+  color: #808080;
+  display: flex;
+  justify-content: space-between;
+}
+
+.chat-message {
+  max-width: 90%;
+  min-width: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-bottom: 0.5rem;
+  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 20%); */
+}
+
+.message-left {
+  display: flex;
+  justify-content: start;
+}
+.message-right {
+  display: flex;
+  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 {
+  display: flex;
+  align-items: center;
+}
+
+.message-container {
+  display: flex;
+}
+</style>

package/src/components/Widget.vue

@@ -1,35 +1,71 @@
-<template>
-    <div>
-        <div>
-            <div id="chat-circle" @click="toggleChat">
-                <IconWidget />
-            </div>
-            <div class="chat-box" v-if="isChatBoxVisible">
-                <Chat :titlePrincipal="titlePrincipal" :toggleChat="toggleChat" :tokenAuth="tokenAuth" :phoneUser="phoneUser" />
-            </div>
-        </div>
-    </div>
-</template>
-  
-<script setup lang="ts">
-import { ref } from 'vue'
-import Chat from './Chat.vue';
-import IconWidget from './IconWidget.vue'
-
-const isChatBoxVisible = ref(false);
-const toggleChat = () => {
-    isChatBoxVisible.value = !isChatBoxVisible.value;
-};
-
-defineProps({
-  tokenAuth:{ type: String, required: true },
-  phoneUser:{ type: String, required: true },
-  titlePrincipal:{ type: String }
-});
-
-</script>
-  
-<style scoped>
-    @import url(../style.css);
-</style>
-  
+<template>
+  <div>
+    <div id="chat-circle" @click="toggleChat" class="widget-container">
+      <div class="new-message-badge" v-if="newMessages">
+        {{ newMessages > 9 ? "9+" : newMessages }}
+      </div>
+      <IconWidget />
+    </div>
+    <div class="chat-box" v-show="isChatBoxVisible">
+      <Chat
+        :visible="isChatBoxVisible"
+        :titlePrincipal="titlePrincipal"
+        :toggleChat="toggleChat"
+        :tokenAuth="tokenAuth"
+        :user="user"
+        @show-toast="(data) => emit('show-toast', data)"
+        @show-confirm="(data) => emit('show-confirm', data)"
+        @clear-new-messages="newMessages = 0"
+        @new-message="() => newMessages++"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref } from "vue";
+import Chat from "./Chat.vue";
+import IconWidget from "./IconWidget.vue";
+
+const emit = defineEmits(["show-toast", "show-confirm"]);
+
+const isChatBoxVisible = ref(false);
+const newMessages = ref(0);
+const toggleChat = () => {
+  isChatBoxVisible.value = !isChatBoxVisible.value;
+};
+
+defineProps({
+  tokenAuth: { type: String, required: true },
+  titlePrincipal: { type: String },
+  user: {
+    type: Object as PropType<{
+      nombreCompleto: string;
+      ci: string;
+      msPersonaId: number;
+    }>,
+    required: true,
+  },
+});
+</script>
+
+<style scoped>
+@import url(../style.css);
+.widget-container {
+  position: relative;
+}
+.new-message-badge {
+  position: absolute;
+  background-color: red;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  font-family: "Roboto", sans-serif;
+  align-items: center;
+  font-weight: 500;
+  justify-content: center;
+  border-radius: 50%;
+  right: -2px;
+  top: -4px;
+}
+</style>

package/dist/components/ChatMessage.vue.d.ts

@@ -1,12 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    message: {
-        type: ObjectConstructor;
-        required: true;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    message: {
-        type: ObjectConstructor;
-        required: true;
-    };
-}>>, {}, {}>;
-export default _default;

package/src/components/ChatMessage.vue

@@ -1,104 +0,0 @@
-<template>
-  <div class="chat-message">
-
-    <div class="bubble" :class="self ? 'left' : 'right'">
-        <div :class="self ? 'content-left' : 'content-right'">
-            <div class="message">
-              {{ message.messages.dataMessage }}
-            </div>
-            <div class="detail-message flex justify-content-between">
-                <span class="mr-5" v-if="message.messages.user?.nombreCompleto">
-                  {{ textCapitalize(message.messages.user.nombreCompleto) }}
-                </span>
-                <span class="mr-5" v-else>
-                </span>
-                <span>
-                  {{ formatTimeAPDate(message.messages.createdAt) }}
-                </span>
-            </div>
-        </div>
-    </div>
-  </div>
-</template>
-  
-<script setup lang="ts">
-import {computed } from 'vue';
-import { formatTimeAPDate,textCapitalize } from '../resources/functions.helpers'
-const props = defineProps({
-    message:{ type: Object, required: true },
-});
-
-const self = computed(() => {
-  return props.message.messages.responseOrigin;
-});
-
-</script>
-  
-<style scoped>
-.bubble {
-  --r: 25px;
-  /* the radius */
-  --t: 30px;
-  /* the size of the tail */
-
-  max-width: 50%;
-  min-width: 250px;
-  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;
-  /* background: linear-gradient(135deg, #FE6D00, #1384C5) border-box; */
-  color: #fff;
-}
-
-.left {
-  --_d: 0%;
-  border-left: var(--t) solid #0000;
-  margin-right: var(--t);
-  background-color: #fcd7ae;
-  color:#4d4d4d;
-  place-self: start;
-}
-
-.bubble > .content-left{
-  margin-right: 10px;
-  margin-bottom: 1px;
-}
-
-.right {
-  --_d: 100%;
-  border-right: var(--t) solid #0000;
-  margin-left: var(--t);
-  background-color: #fdeedb;
-  color:#4d4d4d;
-  place-self: end;
-}
-
-.bubble > .content-right{
-  margin-bottom: 1px;
-  margin-right: 10px;
-}
-
-.message{
-  text-align: initial;
-  word-break: break-all;
-  margin-bottom: 10px;
-}
-.detail-message{
-  font-size: 10px;
-  color: #808080;
-  display: flex;
-  justify-content:space-between;
-}
-
-.chat-message {
-  max-width: 250px;
-  min-width: 90%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 20%); */
-}
-
-</style>