Add record chip for sender and add receivers (#3629)

* Add record chip for sender and add receivers

* Build enum for roles

* Rename var and use string literal

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>

packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageReceivers.tsx

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+
+import { EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
+import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant';
+import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
+
+type EmailThreadMessageReceiversProps = {
+  receivers: EmailThreadMessageParticipant[];
+};
+
+const StyledThreadMessageReceivers = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  padding: ${({ theme }) => theme.spacing(2, 0, 0, 1)};
+  width: 50%;
+`;
+
+export const EmailThreadMessageReceivers = ({
+  receivers,
+}: EmailThreadMessageReceiversProps) => {
+  const displayedReceivers = receivers
+    .map((receiver) => getDisplayNameFromParticipant({ participant: receiver }))
+    .join(', ');
+
+  const body = `to: ${displayedReceivers}`;
+
+  return (
+    <StyledThreadMessageReceivers>
+      <OverflowingTextWithTooltip text={body} />
+    </StyledThreadMessageReceivers>
+  );
+};