@weni/unnnic-system 3.25.5 → 3.25.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.25.5",
+  "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"
@@ -106,6 +113,20 @@
       <section
         class="chats-contact__infos__unread-messages-container__pin-container"
       >
+        <UnnnicTooltip
+          v-if="pendingResponse"
+          class="chats-contact__infos__pending-response"
+          :enabled="!!pendingResponseTooltip"
+          :text="pendingResponseTooltip"
+          side="top"
+        >
+          <UnnnicIcon
+            icon="reply"
+            size="sm"
+            scheme="fg-info"
+            data-testid="pending-response-icon"
+          />
+        </UnnnicTooltip>
         <button
           v-if="isRenderPin"
           data-testid="pin-button"
@@ -121,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"
@@ -148,6 +181,7 @@ import UnnnicIcon from '../Icon.vue';
 import TransitionRipple from '../TransitionRipple/TransitionRipple.vue';
 import UnnnicI18n from '../../mixins/i18n';
 import Checkbox from '../Checkbox/Checkbox.vue';
+import UnnnicTooltip from '../ToolTip/ToolTip.vue';
 
 import('moment/dist/locale/es.js');
 import('moment/dist/locale/pt-br.js');
@@ -162,6 +196,7 @@ export default {
     UnnnicIcon,
     TransitionRipple,
     Checkbox,
+    UnnnicTooltip,
   },
 
   mixins: [UnnnicI18n],
@@ -235,6 +270,22 @@ export default {
       type: String,
       default: ' fg-base',
     },
+    pendingResponse: {
+      type: Boolean,
+      default: false,
+    },
+    pendingResponseTooltip: {
+      type: String,
+      default: '',
+    },
+    newMessageIndicator: {
+      type: Boolean,
+      default: false,
+    },
+    newMessageIndicatorTooltip: {
+      type: String,
+      default: '',
+    },
   },
 
   emits: ['click', 'clickPin'],
@@ -285,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() {
@@ -528,6 +585,10 @@ export default {
       display: flex;
       align-items: center;
       gap: $unnnic-spacing-nano;
+
+      &__sender-prefix {
+        color: $unnnic-color-fg-base;
+      }
     }
 
     &__title,
@@ -547,6 +608,11 @@ export default {
       color: $unnnic-color-fg-muted;
     }
 
+    &__pending-response {
+      display: flex;
+      align-items: center;
+    }
+
     &__unread-messages-container {
       height: 100%;
       min-width: max-content;
@@ -560,6 +626,7 @@ export default {
       &__pin-container {
         display: flex;
         align-items: center;
+        gap: $unnnic-space-1;
         position: relative;
         z-index: 10;
       }
@@ -617,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

@@ -1,4 +1,4 @@
-import { beforeEach, describe, expect, afterEach, test, vi } from 'vitest';
+import { beforeEach, describe, expect, afterEach, it, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 
 import UnnnicChatsContact from '../ChatsContact.vue';
@@ -258,4 +258,167 @@ describe('UnnnicChatsContact', () => {
       expect(pinElement.exists()).toBe(false);
     });
   });
+
+  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"]');
+      expect(icon.exists()).toBe(false);
+    });
+
+    it('should render the pending response icon when pendingResponse is true', async () => {
+      await wrapper.setProps({ pendingResponse: true });
+
+      const icon = wrapper.findComponent(
+        '[data-testid="pending-response-icon"]',
+      );
+      expect(icon.exists()).toBe(true);
+      expect(icon.props('icon')).toBe('reply');
+      expect(icon.props('scheme')).toBe('fg-info');
+    });
+
+    it('should keep tooltip disabled when pendingResponseTooltip is empty', async () => {
+      await wrapper.setProps({
+        pendingResponse: true,
+        pendingResponseTooltip: '',
+      });
+
+      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 pendingResponseTooltip is set', async () => {
+      const tooltipText = 'You did not respond to this contact';
+
+      await wrapper.setProps({
+        pendingResponse: true,
+        pendingResponseTooltip: tooltipText,
+      });
+
+      const tooltip = wrapper.findComponent({ name: 'UnnnicTooltip' });
+      expect(tooltip.exists()).toBe(true);
+      expect(tooltip.props('enabled')).toBe(true);
+      expect(tooltip.props('text')).toBe(tooltipText);
+    });
+  });
 });

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

@@ -16,6 +16,7 @@ exports[`UnnnicChatsContact > should match snapshot 1`] = `
     <!--v-if-->
     <section data-v-8ce6efd5="" class="chats-contact__infos__unread-messages-container__pin-container">
       <!--v-if-->
+      <!--v-if-->
     </section>
   </section>
   <transition-group-stub data-v-17112bed="" data-v-8ce6efd5="" name="grow" tag="div" appear="false" persisted="false" css="true" class="ripples"></transition-group-stub>

package/src/stories/ChatsContact.stories.js

@@ -135,6 +135,36 @@ export const Discussion = {
   },
 };
 
+export const PendingResponse = {
+  args: {
+    ...defaultArgs,
+    title: 'Aline',
+    projectName: 'Sector name',
+    lastMessage: {
+      text: 'I’d like to know if powdered dishwasher detergent is available',
+    },
+    lastInteractionTime: new Date().toISOString(),
+    pendingResponse: true,
+    pendingResponseTooltip: 'You did not respond to this contact',
+  },
+};
+
+export const PendingResponsePinned = {
+  args: {
+    ...defaultArgs,
+    title: 'Milena',
+    projectName: 'Sector name',
+    lastMessage: {
+      text: 'Okay, I’ll wait for a response regarding the order status',
+    },
+    lastInteractionTime: new Date().toISOString(),
+    pendingResponse: true,
+    pendingResponseTooltip: 'You did not respond to this contact',
+    pinned: true,
+    activePin: true,
+  },
+};
+
 export const ContactList = {
   args: {
     ...defaultArgs,
@@ -190,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',
+  },
+};