@weni/unnnic-system 3.25.6 → 3.25.7

package/package.json

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

package/src/components/ChatsContact/ChatsContact.vue

@@ -67,6 +67,13 @@
         </p>
         <template v-else-if="lastMessageMedia.isMedia">
           <section class="chats-contact__infos__media">
+            <p
+              v-if="lastMessage.isFromUser"
+              class="chats-contact__infos__media__sender-prefix"
+              data-testid="media-sender-prefix"
+            >
+              {{ i18n('you_message_prefix') }}
+            </p>
             <UnnnicIcon
               :icon="lastMessageMedia.mediaIcon"
               scheme="fg-base"
@@ -135,6 +142,18 @@
             :scheme="schemePin"
           />
         </button>
+        <UnnnicTooltip
+          v-else-if="newMessageIndicator"
+          class="chats-contact__infos__new-message-indicator-tooltip"
+          :enabled="!!newMessageIndicatorTooltip"
+          :text="newMessageIndicatorTooltip"
+          side="top"
+        >
+          <span
+            class="chats-contact__infos__new-message-indicator"
+            data-testid="new-message-indicator"
+          />
+        </UnnnicTooltip>
         <p
           v-else-if="(unreadMessages && !selected) || forceShowUnreadMessages"
           class="chats-contact__infos__unread-messages"
@@ -259,6 +278,14 @@ export default {
       type: String,
       default: '',
     },
+    newMessageIndicator: {
+      type: Boolean,
+      default: false,
+    },
+    newMessageIndicatorTooltip: {
+      type: String,
+      default: '',
+    },
   },
 
   emits: ['click', 'clickPin'],
@@ -309,12 +336,18 @@ export default {
           en: 'Video',
           es: 'Video',
         },
+        you_message_prefix: {
+          'pt-br': 'Você:',
+          en: 'You:',
+          es: 'Tú:',
+        },
       },
     };
   },
 
   computed: {
     messageInfoAlign() {
+      if (this.newMessageIndicator) return 'space-between';
       return this.unreadMessages && this.selected ? 'center' : 'flex-start';
     },
     messageInfoMarginTop() {
@@ -552,6 +585,10 @@ export default {
       display: flex;
       align-items: center;
       gap: $unnnic-spacing-nano;
+
+      &__sender-prefix {
+        color: $unnnic-color-fg-base;
+      }
     }
 
     &__title,
@@ -647,6 +684,27 @@ export default {
       color: $unnnic-color-weni-700;
     }
 
+    &__new-message-indicator {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      width: $unnnic-space-5;
+      min-width: $unnnic-space-5;
+      height: $unnnic-space-5;
+
+      &::before {
+        content: '';
+        display: block;
+
+        width: $unnnic-space-2;
+        height: $unnnic-space-2;
+
+        border-radius: 50%;
+        background-color: $unnnic-color-bg-blue-strong;
+      }
+    }
+
     .ellipsis {
       overflow: hidden;
       text-overflow: ellipsis;

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

@@ -259,6 +259,125 @@ describe('UnnnicChatsContact', () => {
     });
   });
 
+  describe('Media "You:" prefix', () => {
+    const imageMedia = {
+      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',
+        },
+      ],
+    };
+
+    it('should not render the prefix on a media message when isFromUser is falsy', async () => {
+      await wrapper.setProps({ lastMessage: imageMedia });
+
+      const prefix = wrapper.find('[data-testid="media-sender-prefix"]');
+      expect(prefix.exists()).toBe(false);
+    });
+
+    it('should render the EN "You:" prefix when isFromUser is true', async () => {
+      await wrapper.setProps({
+        lastMessage: { ...imageMedia, isFromUser: true },
+        locale: 'en',
+      });
+
+      const prefix = wrapper.find('[data-testid="media-sender-prefix"]');
+      expect(prefix.exists()).toBe(true);
+      expect(prefix.text()).toBe('You:');
+    });
+
+    it('should render the PT-BR "Você:" prefix when isFromUser is true', async () => {
+      await wrapper.setProps({
+        lastMessage: { ...imageMedia, isFromUser: true },
+        locale: 'pt-br',
+      });
+
+      const prefix = wrapper.find('[data-testid="media-sender-prefix"]');
+      expect(prefix.exists()).toBe(true);
+      expect(prefix.text()).toBe('Você:');
+    });
+
+    it('should render the ES "Tú:" prefix when isFromUser is true', async () => {
+      await wrapper.setProps({
+        lastMessage: { ...imageMedia, isFromUser: true },
+        locale: 'es',
+      });
+
+      const prefix = wrapper.find('[data-testid="media-sender-prefix"]');
+      expect(prefix.exists()).toBe(true);
+      expect(prefix.text()).toBe('Tú:');
+    });
+
+    it('should not render the prefix for non-media messages even when isFromUser is true', async () => {
+      await wrapper.setProps({
+        lastMessage: { text: 'Hello there', isFromUser: true },
+      });
+
+      const prefix = wrapper.find('[data-testid="media-sender-prefix"]');
+      expect(prefix.exists()).toBe(false);
+    });
+  });
+
+  describe('New message indicator', () => {
+    it('should not render the dot by default', () => {
+      const indicator = wrapper.find('[data-testid="new-message-indicator"]');
+      expect(indicator.exists()).toBe(false);
+    });
+
+    it('should render the dot when newMessageIndicator is true', async () => {
+      await wrapper.setProps({ newMessageIndicator: true });
+
+      const indicator = wrapper.find('[data-testid="new-message-indicator"]');
+      expect(indicator.exists()).toBe(true);
+    });
+
+    it('should hide the unread-count circle when newMessageIndicator and unreadMessages are both set', async () => {
+      await wrapper.setProps({
+        newMessageIndicator: true,
+        unreadMessages: 5,
+      });
+
+      const indicator = wrapper.find('[data-testid="new-message-indicator"]');
+      const unreadCount = wrapper.find(
+        '.chats-contact__infos__unread-messages',
+      );
+
+      expect(indicator.exists()).toBe(true);
+      expect(unreadCount.exists()).toBe(false);
+    });
+
+    it('should keep tooltip disabled when newMessageIndicatorTooltip is empty', async () => {
+      await wrapper.setProps({
+        newMessageIndicator: true,
+        newMessageIndicatorTooltip: '',
+      });
+
+      const tooltip = wrapper.findComponent({ name: 'UnnnicTooltip' });
+
+      expect(tooltip.exists()).toBe(true);
+      expect(tooltip.props('enabled')).toBe(false);
+      expect(tooltip.props('text')).toBe('');
+    });
+
+    it('should enable tooltip with the provided text when newMessageIndicatorTooltip is set', async () => {
+      const tooltipText = 'New chats received';
+
+      await wrapper.setProps({
+        newMessageIndicator: true,
+        newMessageIndicatorTooltip: tooltipText,
+      });
+
+      const tooltip = wrapper.findComponent({ name: 'UnnnicTooltip' });
+
+      expect(tooltip.exists()).toBe(true);
+      expect(tooltip.props('enabled')).toBe(true);
+      expect(tooltip.props('text')).toBe(tooltipText);
+    });
+  });
+
   describe('Pending response', () => {
     it('should not render the pending response icon by default', () => {
       const icon = wrapper.find('[data-testid="pending-response-icon"]');

package/src/stories/ChatsContact.stories.js

@@ -220,3 +220,56 @@ export const MediaLastMessage = {
   `,
   }),
 };
+
+const lastMessageMediaFromUser = Object.fromEntries(
+  Object.entries(lastMessageMedia).map(([mediaType, message]) => [
+    mediaType,
+    { ...message, isFromUser: true },
+  ]),
+);
+
+export const MediaLastMessageFromUser = {
+  args: {
+    ...defaultArgs,
+  },
+  render: (args) => ({
+    setup() {
+      return { args, lastMessageMediaFromUser };
+    },
+    components: { unnnicChatsContact },
+    template: `
+    <div style="display: grid;">
+      <unnnic-chats-contact v-for="mediaType in ['geo', 'audio', 'image', 'video', 'document']" v-bind="args" :lastMessage="lastMessageMediaFromUser[mediaType]"/>
+    </div>
+  `,
+  }),
+};
+
+export const NewMessageIndicator = {
+  args: {
+    ...defaultArgs,
+    title: 'Aline',
+    projectName: 'Sector name',
+    lastMessage: {
+      text: 'I’d like to know if powdered dishwasher detergent is available',
+    },
+    lastInteractionTime: new Date().toISOString(),
+    unreadMessages: 1,
+    newMessageIndicator: true,
+  },
+};
+
+export const NewMessageIndicatorWithTooltip = {
+  args: {
+    ...defaultArgs,
+    title: 'Aline',
+    projectName: 'Sector name',
+    lastMessage: {
+      text: 'I’d like to know if powdered dishwasher detergent is available',
+    },
+    lastInteractionTime: new Date().toISOString(),
+    unreadMessages: 1,
+    newMessageIndicator: true,
+    newMessageIndicatorTooltip: 'New chats received',
+  },
+};