@weni/unnnic-system 2.33.6 → 2.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.33.6",
+  "version": "2.34.0",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/ChatsMessage/ChatsMessage.vue

@@ -88,6 +88,7 @@
           @click.stop="status === 'failed' ? $emit('click') : () => {}"
         />
       </div>
+
       <UnnnicIconLoading
         v-if="sendingMedia"
         size="avatar-nano"
@@ -116,13 +117,20 @@
           />
         </UnnnicTooltip>
       </section>
-
-      <p
+      <section
         v-else
-        class="unnnic-chats-message__time"
+        class="unnnic-chats-message__time-container"
       >
-        {{ formattedTime }}
-      </p>
+        <p class="unnnic-chats-message__time">
+          {{ formattedTime }}
+        </p>
+        <UnnnicIcon
+          v-if="type === 'sent'"
+          :icon="messageStatusIcon"
+          size="sm"
+          :scheme="status === 'read' ? 'aux-blue-500' : 'neutral-clean'"
+        />
+      </section>
     </main>
   </section>
 </template>
@@ -179,7 +187,9 @@ export default {
       type: String,
       default: 'sent',
       validate(status) {
-        return ['sending', 'sent', 'failed'].includes(status);
+        return ['sending', 'sent', 'failed', 'received', 'read'].includes(
+          status,
+        );
       },
     },
     mediaType: {
@@ -251,6 +261,13 @@ export default {
     failedToSendMedia() {
       return (this.isImage || this.isVideo) && this.status === 'failed';
     },
+    messageStatusIcon() {
+      if (this.status === 'sending') return 'history';
+
+      return this.status === 'received' || this.status === 'read'
+        ? 'done_all'
+        : 'done';
+    },
   },
 
   methods: {
@@ -284,7 +301,7 @@ $defaultLineHeight: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
 
   border-radius: $unnnic-border-radius-md;
 
-  padding: $unnnic-spacing-xs;
+  padding: $unnnic-spacing-xs $unnnic-spacing-ant;
 
   background-color: $unnnic-color-neutral-white;
 
@@ -295,7 +312,7 @@ $defaultLineHeight: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
   &__tooltip {
     display: flex;
     justify-content: end;
-    min-width: 30px;
+    min-width: 50.88px;
   }
 
   &__reply-message {
@@ -322,7 +339,7 @@ $defaultLineHeight: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
-    gap: $unnnic-spacing-xs;
+    gap: $unnnic-spacing-sm;
 
     & > * {
       margin: 0;
@@ -400,10 +417,26 @@ $defaultLineHeight: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
     font-weight: $unnnic-font-weight-bold;
   }
 
+  &__status-time {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    gap: $unnnic-spacing-nano;
+    min-width: 51px;
+  }
+
   &__time {
     font-size: $unnnic-font-size-body-md;
     line-height: $defaultLineHeight;
     color: $unnnic-color-neutral-clean;
+    margin: 0;
+    padding: 0;
+
+    &-container {
+      display: flex;
+      align-items: center;
+      gap: $unnnic-spacing-nano;
+    }
   }
 
   &__media__container {

package/src/stories/ChatsMessage.stories.js

@@ -179,6 +179,28 @@ export const ReceivedAndSent = {
   }),
 };
 
+export const MessageStatus = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UnnnicChatsMessage },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 12px">
+        <UnnnicChatsMessage v-bind="args" status="sent">
+          Sent status
+        </UnnnicChatsMessage>
+        <UnnnicChatsMessage v-bind="args" status="received">
+          Received status
+        </UnnnicChatsMessage>
+        <UnnnicChatsMessage v-bind="args" status="read">
+          Read status
+        </UnnnicChatsMessage>
+      </div>
+    `,
+  }),
+};
+
 export const WithSignature = {
   args: {
     signature: 'John Doe',
@@ -272,8 +294,10 @@ export const Media = {
         gap: 16px;
       ">
         <div  style="
-          display: flex;
+          display: grid;
           gap: 16px;
+          grid-template-columns: 1fr 1fr 1fr;
+          align-items: start;
         ">
           <UnnnicChatsMessage v-bind="args" mediaType="audio" :replyMessage="replyMessage.audio">
             <unnnic-audio-recorder class="media" style="padding: 8px; margin: 4px 0;" ref="audio-recorder" :src="audio" :canDiscard="false" />
@@ -287,8 +311,10 @@ export const Media = {
         </div>
 
         <div  style="
-          display: flex;
+          display: grid;
           gap: 16px;
+          grid-template-columns: 1fr 1fr 1fr;
+          align-items: start;
         ">
           <UnnnicChatsMessage v-bind="args" mediaType="video"  :replyMessage="replyMessage.audio">
           <video class="media" controls>