@weni/unnnic-system 3.2.1 → 3.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "type": "commonjs",
   "files": [
     "dist",
@@ -100,4 +100,4 @@
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^3.0.5"
   }
-}
+}

package/src/components/ChatsMessage/ChatsMessage.vue

@@ -3,6 +3,7 @@
     class="unnnic-chats-message"
     :class="{
       sent: type === 'sent',
+      automatic: automatic,
       sending: status === 'sending',
       'is-document': isDocument,
       'is-media': isMedia,
@@ -45,7 +46,9 @@
       />
       <UnnnicChatsMessageText
         v-if="isText"
+        :locale="locale"
         :text="slotText"
+        :isAutomatic="automatic"
       />
       <div
         v-if="isDocument"
@@ -156,6 +159,10 @@ export default {
   },
   mixins: [UnnnicI18n],
   props: {
+    locale: {
+      type: String,
+      default: 'en',
+    },
     enableReply: {
       type: Boolean,
       default: false,
@@ -171,6 +178,10 @@ export default {
         return ['received', 'sent'].includes(type);
       },
     },
+    automatic: {
+      type: Boolean,
+      default: false,
+    },
     time: {
       type: Date,
       required: true,
@@ -323,6 +334,10 @@ $defaultLineHeight: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
 
   &.sent {
     background-color: #cff8f4;
+
+    &.automatic {
+      background-color: $unnnic-color-aux-blue-50;
+    }
   }
 
   &.sending {

package/src/components/ChatsMessage/ChatsMessageText.vue

@@ -1,18 +1,45 @@
 <template>
-  <p
-    class="unnnic-chats-message__text"
-    v-html="formattedText"
-  />
+  <section class="unnnic-chats-message__text__container">
+    <p
+      class="unnnic-chats-message__text"
+      v-html="formattedText"
+    />
+    <p v-if="isAutomatic" class="unnnic-chats-message__text--automatic">
+      {{ i18n('automatic_message') }}
+    </p>
+  </section>
 </template>
 
 <script>
+import UnnnicI18n from '../../mixins/i18n';
+
 export default {
   name: 'ChatsMessageText',
+  mixins: [UnnnicI18n],
   props: {
+    locale: {
+      type: String,
+      default: 'en',
+    },
     text: {
       type: String,
       required: true,
     },
+    isAutomatic: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      defaultTranslations: {
+        automatic_message: {
+          'pt-br': 'Mensagem de abertura automática',
+          en: 'Automatic Opening Message',
+          es: 'Mensaje de apertura automático',
+        },
+      },
+    };
   },
   computed: {
     formattedText() {
@@ -78,3 +105,30 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+.unnnic-chats-message__text {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-spacing-sm;
+    padding: $unnnic-spacing-nano 0;
+    font-size: $unnnic-font-size-body-gt;
+    color: $unnnic-color-neutral-dark;
+    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+    word-break: break-word;
+  }
+  &--automatic {
+    font-size: $unnnic-font-size-body-md;
+    line-height: $unnnic-line-height-caption-1;
+    color: $unnnic-color-aux-blue-500;
+  }
+}
+</style>

package/src/stories/ChatsMessage.stories.js

@@ -103,6 +103,13 @@ export default {
 
 export const Default = { args: {} };
 
+
+export const Automatic = {
+  args: {
+    automatic: true,
+  },
+};
+
 export const Sending = {
   args: {
     status: 'sending',