[PB-6523]: feat/tray messages for conversations

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",

src/components/mail/cheaps/MessageCheap.tsx

@@ -15,12 +15,15 @@ export interface MessageCheapProps {
   };
   active?: boolean;
   selected?: boolean;
+  participants?: string[];
   onClick: (id: string, isRead?: boolean) => void;
   onSelect?: (id: string) => void;
 }
 
-const MessageCheap = ({ email, active, selected, onClick, onSelect }: MessageCheapProps) => {
+const MessageCheap = ({ email, active, selected, participants, onClick, onSelect }: MessageCheapProps) => {
   const isHighlighted = active || selected;
+  const isConversation = (participants?.length ?? 0) > 1;
+  const displayName = isConversation ? participants!.join(' & ') : email.from.name;
 
   const handleSelect: React.MouseEventHandler = (e) => {
     e.stopPropagation();
@@ -39,7 +42,13 @@ const MessageCheap = ({ email, active, selected, onClick, onSelect }: MessageChe
               selected ? 'opacity-0' : 'opacity-100 group-hover:opacity-0'
             }`}
           >
-            <Avatar fullName={email.from.name} src={email.from.avatar} size={'xxs'} />
+            {isConversation ? (
+              <div className="h-7 w-7 rounded-full bg-gray-10 flex items-center justify-center text-gray-80 text-sm font-semibold">
+                {participants!.length}
+              </div>
+            ) : (
+              <Avatar fullName={email.from.name} src={email.from.avatar} size={'xxs'} />
+            )}
           </div>
           <div
             className={`absolute z-30 inset-0 flex items-center justify-center transition-opacity ${
@@ -53,7 +62,7 @@ const MessageCheap = ({ email, active, selected, onClick, onSelect }: MessageChe
           <div className={`flex flex-row w-full justify-between ${isHighlighted ? 'text-primary' : ''}`}>
             <div className="flex flex-row gap-1 w-full max-w-[150px] items-center">
               {!email.read && <div className="h-2 w-2 rounded-full bg-primary" />}
-              <p className="font-semibold truncate">{email.from.name}</p>
+              <p className="font-semibold truncate">{displayName}</p>
             </div>
             <div>
               <p className={`text-sm font-medium ${isHighlighted ? 'text-primary' : 'text-gray-50'}`}>

src/components/mail/tray/TrayList.tsx

@@ -9,7 +9,7 @@ export interface TrayListProps {
     from: {
       name: string;
       avatar: string;
-    };
+    }[];
     subject: string;
     createdAt: string;
     body: string;
@@ -95,7 +95,8 @@ const TrayList = ({
                 {mails.map((email) => (
                   <div key={email.id} className="flex items-center w-full flex-col">
                     <MessageCheap
-                      email={email}
+                      email={{ ...email, from: email.from[0] }}
+                      participants={email.from.map((f) => f.name)}
                       active={activeEmail === email.id}
                       selected={checked || selectedEmails.includes(email.id)}
                       onClick={onMailSelected}

src/components/mail/tray/__test__/MessageCheap.test.tsx

@@ -112,4 +112,23 @@ describe('MessageCheap', () => {
 
     expect(mockOnClick).not.toHaveBeenCalled();
   });
+
+  it('should render participants count badge when there is a conversation', () => {
+    render(<MessageCheap email={mockEmail} onClick={mockOnClick} participants={['Bea Donell', 'John Appleseed']} />);
+
+    expect(screen.getByText('2')).toBeInTheDocument();
+  });
+
+  it('should render joined participant names when there is a conversation', () => {
+    render(<MessageCheap email={mockEmail} onClick={mockOnClick} participants={['Bea Donell', 'John Appleseed']} />);
+
+    expect(screen.getByText('Bea Donell & John Appleseed')).toBeInTheDocument();
+  });
+
+  it('should render single sender name when participants has 0 or 1 entries', () => {
+    render(<MessageCheap email={mockEmail} onClick={mockOnClick} participants={['John Doe']} />);
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.queryByText('1')).not.toBeInTheDocument();
+  });
 });

src/components/mail/tray/__test__/TrayList.test.tsx

@@ -7,21 +7,25 @@ import TrayList from '../TrayList';
 const mockMails = [
   {
     id: '1',
-    from: {
-      name: 'John Doe',
-      avatar: 'https://example.com/avatar1.jpg',
-    },
+    from: [
+      {
+        name: 'John Doe',
+        avatar: 'https://example.com/avatar1.jpg',
+      },
+    ],
     subject: 'Test Subject 1',
     createdAt: '2024-01-15',
     body: 'This is test email 1',
     read: false,
   },
   {
     id: '2',
-    from: {
-      name: 'Jane Smith',
-      avatar: 'https://example.com/avatar2.jpg',
-    },
+    from: [
+      {
+        name: 'Jane Smith',
+        avatar: 'https://example.com/avatar2.jpg',
+      },
+    ],
     subject: 'Test Subject 2',
     createdAt: '2024-01-16',
     body: 'This is test email 2',

src/stories/components/mail/tray/Tray.stories.tsx

@@ -5,39 +5,39 @@ import TrayList from '../../../../components/mail/tray/TrayList';
 const mockMails = [
   {
     id: '1',
-    from: { name: 'John Doe', avatar: '' },
+    from: [{ name: 'John Doe', avatar: '' }],
     subject: 'Meeting tomorrow',
     createdAt: '10:30 AM',
     body: 'Hi, just a reminder about our meeting tomorrow at 3pm.',
     read: false,
   },
   {
     id: '2',
-    from: { name: 'Jane Smith', avatar: '' },
+    from: [{ name: 'Jane Smith', avatar: '' }],
     subject: 'Project update',
     createdAt: '9:15 AM',
     body: 'The project is progressing well. Here are the latest updates...',
     read: true,
   },
   {
     id: '3',
-    from: { name: 'Mike Johnson', avatar: '' },
+    from: [{ name: 'Mike Johnson', avatar: '' }],
     subject: 'Invoice #1234',
     createdAt: 'Yesterday',
     body: 'Please find attached the invoice for last month services.',
     read: true,
   },
   {
     id: '4',
-    from: { name: 'Sarah Wilson', avatar: '' },
+    from: [{ name: 'Sarah Wilson', avatar: '' }],
     subject: 'Welcome to the team!',
     createdAt: 'Yesterday',
     body: 'We are excited to have you on board. Let me know if you need anything.',
     read: false,
   },
   {
     id: '5',
-    from: { name: 'Tech Support', avatar: '' },
+    from: [{ name: 'Tech Support', avatar: '' }],
     subject: 'Your ticket has been resolved',
     createdAt: 'Feb 20',
     body: 'Your support ticket #5678 has been resolved. Please let us know if you have any questions.',