@weni/unnnic-system 2.29.0 → 2.30.0

package/package.json

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

package/src/components/ChatsContact/ChatsContact.vue

@@ -53,6 +53,21 @@
         >
           {{ i18n('waiting_for', waitingTime, { waitingTime }) }}
         </p>
+        <template v-else-if="lastMessageMedia.isMedia">
+          <section class="chats-contact__infos__media">
+            <UnnnicIcon
+              :icon="lastMessageMedia.mediaIcon"
+              scheme="neutral-cloudy"
+              size="sm"
+            />
+            <p
+              :title="lastMessageMedia.mediaText"
+              class="ellipsis"
+            >
+              {{ lastMessageMedia.mediaText }}
+            </p>
+          </section>
+        </template>
         <p
           v-else-if="subtitle"
           class="ellipsis"
@@ -133,7 +148,7 @@ export default {
       required: true,
     },
     lastMessage: {
-      type: String,
+      type: String || Object,
       default: '',
     },
     lastInteractionTime: {
@@ -193,6 +208,21 @@ export default {
           en: 'Discussion about {discussionGoal}',
           es: 'Discusión sobre {discussionGoal}',
         },
+        audio_message: {
+          'pt-br': 'Mensagem de áudio',
+          en: 'Audio message',
+          es: 'Mensaje de audio',
+        },
+        image_message: {
+          'pt-br': 'Imagem',
+          en: 'Image',
+          es: 'Imagen',
+        },
+        video_message: {
+          'pt-br': 'Vídeo',
+          en: 'Video',
+          es: 'Video',
+        },
       },
     };
   },
@@ -228,11 +258,45 @@ export default {
 
       return lastInteractionMoment.format('HH:mm');
     },
+
+    lastMessageMedia() {
+      const { lastMessage } = this;
+
+      const isMedia =
+        typeof lastMessage === 'object' && lastMessage?.media?.[0];
+
+      if (!isMedia) return { isMedia };
+
+      const contentType =
+        lastMessage?.media?.[0]?.content_type?.split('/')?.[0];
+
+      const mediaIconMapper = {
+        audio: 'mic',
+        image: 'image',
+        video: 'videocam',
+        application: 'article',
+        geo: 'location_on',
+      };
+
+      const mediaIcon = mediaIconMapper[contentType];
+
+      const mediaTextMapper = {
+        audio: this.i18n('audio_message'),
+        image: this.i18n('image_message'),
+        video: this.i18n('video_message'),
+        application: lastMessage.media[0].url.split('/').at(-1),
+        geo: lastMessage.text,
+      };
+
+      const mediaText = mediaTextMapper[contentType];
+
+      return { isMedia, contentType, lastMessage, mediaIcon, mediaText };
+    },
     subtitle() {
       const { discussionGoal, lastMessage } = this;
       return discussionGoal
         ? this.i18n('discussion_about', discussionGoal, { discussionGoal })
-        : lastMessage;
+        : lastMessage?.text;
     },
   },
 };
@@ -350,6 +414,12 @@ export default {
     overflow: hidden;
     gap: $unnnic-spacing-nano;
 
+    &__media {
+      display: flex;
+      align-items: center;
+      gap: $unnnic-spacing-nano;
+    }
+
     &__title,
     &__additional-information {
       font-size: $unnnic-font-size-body-gt;

package/src/components/ChatsContact/__tests__/__snapshots__/ChatsContact.spec.js.snap

@@ -6,7 +6,7 @@ exports[`UnnnicChatsContact > should match snapshot 1`] = `
   <div data-v-8ce6efd5="" class="chats-contact__infos">
     <h1 data-v-8ce6efd5="" class="chats-contact__infos__title ellipsis" title="Contact Name">Contact Name</h1>
     <div data-v-8ce6efd5="" class="chats-contact__infos__additional-information">
-      <p data-v-8ce6efd5="" class="ellipsis" title="Message">Message</p>
+      <!--v-if-->
     </div>
   </div>
   <section data-v-8ce6efd5="" class="chats-contact__infos__unread-messages-container">

package/src/stories/ChatsContact.stories.js

@@ -6,6 +6,60 @@ setup((app) => {
   app.use(i18n);
 });
 
+const lastMessageMedia = {
+  geo: {
+    text: '-1.111111,-2.222222',
+    media: [
+      {
+        content_type: 'geo',
+        message: 'f0c74bfa-d405-4d20-8f75-42edc7543883',
+        url: '-1.111111,-2.222222',
+        created_on: '2025-04-15T15:20:56.030692-03:00',
+      },
+    ],
+  },
+  image: {
+    media: [
+      {
+        content_type: 'image/jpeg',
+        message: 'a997421d-6238-4bef-912d-e689c1c0db3f',
+        url: 'https://example.com/photo.jpg',
+        created_on: '2025-04-15T14:58:56.163027-03:00',
+      },
+    ],
+  },
+  audio: {
+    media: [
+      {
+        content_type: 'audio/ogg',
+        message: 'bd8ec88a-83b8-45ed-b861-20e8c98dd5ef',
+        url: 'https://example.com/audio.oga',
+        created_on: '2025-04-15T14:56:51.539059-03:00',
+      },
+    ],
+  },
+  document: {
+    media: [
+      {
+        content_type: 'application/pdf',
+        message: '46f58626-1623-4c66-9b16-746831e60130',
+        url: 'https://example.com/DocumentName.pdf',
+        created_on: '2025-04-15T14:50:14.854262-03:00',
+      },
+    ],
+  },
+  video: {
+    media: [
+      {
+        content_type: 'video/mp4',
+        message: 'aade7c9f-e42a-4c3d-9372-c9c0af4ad2a8',
+        url: 'https://example/video.mp4',
+        created_on: '2025-04-15T14:48:57.295346-03:00',
+      },
+    ],
+  },
+};
+
 export default {
   title: 'Chats/Contact',
   component: unnnicChatsContact,
@@ -92,3 +146,20 @@ export const ContactList = {
   `,
   }),
 };
+
+export const MediaLastMessage = {
+  args: {
+    ...defaultArgs,
+  },
+  render: (args) => ({
+    setup() {
+      return { args, lastMessageMedia };
+    },
+    components: { unnnicChatsContact },
+    template: `
+    <div style="display: grid;">
+      <unnnic-chats-contact v-for="mediaType in ['geo', 'audio', 'image', 'video', 'document']" v-bind="args" :lastMessage="lastMessageMedia[mediaType]"/>
+    </div>
+  `,
+  }),
+};