Fix participant chip (#6411)

- Fix gap
- Modify query to retrieve person and workspaceMember to display a
record chip inside the message right drawer

Before:
<img width="74" alt="Capture d’écran 2024-07-25 à 17 14 57"
src="https://github.com/user-attachments/assets/b37e19d0-8efb-408d-aba7-66d9a7cca433">
<img width="105" alt="Capture d’écran 2024-07-25 à 17 14 40"
src="https://github.com/user-attachments/assets/f6d4b164-279b-4be3-ac66-6b613a3f3144">

After:
<img width="126" alt="Capture d’écran 2024-07-25 à 17 13 53"
src="https://github.com/user-attachments/assets/97059253-6f5d-4f8c-b2b6-acd614862801">
<img width="67" alt="Capture d’écran 2024-07-25 à 17 14 18"
src="https://github.com/user-attachments/assets/0808a354-1c97-4bb6-8cf7-9d4c10c3a4d4">

packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx

@@ -40,6 +40,7 @@ const StyledChip = styled.div`
   height: 20px;
   box-sizing: border-box;
   white-space: nowrap;
+  gap: ${({ theme }) => theme.spacing(1)};
 `;
 
 type ParticipantChipVariant = 'default' | 'bold';

packages/twenty-front/src/modules/activities/emails/graphql/operation-signatures/factories/fetchAllThreadMessagesOperationSignatureFactory.ts

@@ -25,6 +25,17 @@ export const fetchAllThreadMessagesOperationSignatureFactory: RecordGqlOperation
       subject: true,
       text: true,
       receivedAt: true,
-      messageParticipants: true,
+      messageParticipants: {
+        id: true,
+        role: true,
+        displayName: true,
+        participant: {
+          id: true,
+          email: true,
+          name: true,
+        },
+        person: true,
+        workspaceMember: true,
+      },
     },
   });