vue-wiguet-chatweb 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-wiguet-chatweb",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "files": [
     "dist",

package/src/components/Chat.vue

@@ -18,7 +18,7 @@
       />
     </div>
 
-    <div class="input-message w-full">
+    <div class="w-full">
       <form class="message-send" @submit.prevent="submitMessage">
         <div class="form-message">
           <!-- <button type="submit">
@@ -291,7 +291,6 @@ const mantainElementsOnViewport = (scrollHeightBeforeAdd: number) => {
 </script>
 
 <style scoped>
-@import url(../style.css);
 .btn-primary {
   padding: 10px 12px;
   &:hover {

package/src/components/MessageList.vue

@@ -1,42 +1,44 @@
 <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 class="messages-container-list">
+    <div
+      v-for="message in props.messages"
+      :key="message.id"
+      class="message"
+      :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-text">
+                {{ 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>
@@ -99,8 +101,7 @@ watch(
   --t: 30px;
   /* the size of the tail */
 
-  max-width: 50%;
-  min-width: 250px;
+  width: 100%;
   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,
@@ -119,11 +120,11 @@ watch(
 }
 
 .left {
+  --_d: 0%;
   border-left: var(--t) solid #0000;
-  margin-right: var(--t);
+  margin-right: 0;
   background-color: #fcd7ae;
   color: #4d4d4d;
-  place-self: start;
 }
 
 .bubble > .content-left {
@@ -132,11 +133,11 @@ watch(
 }
 
 .right {
+  --_d: 100%;
   border-right: var(--t) solid #0000;
-  margin-left: var(--t);
+  margin-right: 0;
   background-color: #fdeedb;
   color: #4d4d4d;
-  place-self: end;
 }
 
 .bubble > .content-right {
@@ -144,9 +145,7 @@ watch(
   margin-right: 10px;
 }
 
-.message {
-  text-align: initial;
-  word-break: break-all;
+.message-text {
   margin-bottom: 10px;
 }
 .detail-message {
@@ -157,21 +156,21 @@ watch(
 }
 
 .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 {
+.message {
+  width: 100%;
   display: flex;
+}
+
+.message-left {
   justify-content: start;
 }
 .message-right {
-  display: flex;
   justify-content: end;
 }
 .target {
@@ -205,6 +204,11 @@ watch(
 }
 
 .message-container {
-  display: flex;
+  min-width: 80%;
+  max-width: 80%;
+}
+
+.messages-container-list {
+  width: 100%;
 }
 </style>

package/src/components/Widget.vue

@@ -1,6 +1,14 @@
 <template>
-  <div>
-    <div id="chat-circle" @click="toggleChat" class="widget-container">
+  <div
+    class="widget-css-reset widget-container"
+    :class="isDarkMode ? 'chat-dark-mode' : ''"
+  >
+    <div
+      id="chat-circle"
+      @click="toggleChat"
+      class="widget-container"
+      v-show="!isChatBoxVisible"
+    >
       <div class="new-message-badge" v-if="newMessages">
         {{ newMessages > 9 ? "9+" : newMessages }}
       </div>
@@ -46,11 +54,17 @@ defineProps({
     }>,
     required: true,
   },
+  isDarkMode: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
+<style>
+@import url(../style.css);
+</style>
 
 <style scoped>
-@import url(../style.css);
 .widget-container {
   position: relative;
 }