vue-wiguet-chatweb 0.0.10 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-wiguet-chatweb",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "module",
   "files": [
     "dist",
@@ -29,14 +29,16 @@
     "build": "vue-tsc && vite build",
     "preview": "vite preview"
   },
-  "dependencies": {
-    "@vueuse/core": "^10.9.0",
+  "peerDependencies": {
+    "@vueuse/core": "^10.0.0",
     "axios": "^1.4.0",
-    "luxon": "^3.4.4",
-    "socket.io-client": "^4.7.2",
+    "luxon": "^3.0.0",
     "uuid": "^9.0.1",
+    "vue": "^3.2.0"
+  },
+  "dependencies": {
+    "socket.io-client": "^4.7.2",
     "vite-plugin-dts": "^3.4.0",
-    "vue": "^3.3.4",
     "vue-rabbit-frontend": "^0.0.15"
   },
   "devDependencies": {

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,8 +156,6 @@ watch(
 }
 
 .chat-message {
-  max-width: 90%;
-  min-width: 90%;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -166,12 +163,15 @@ watch(
   /* 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 +205,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;
 }

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;