diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx
index 96bf185f3..32dde14ba 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx
@@ -31,14 +31,16 @@ type EmailThreadMessageProps = {
body: string;
sentAt: string;
participants: EmailThreadMessageParticipant[];
+ isExpanded?: boolean;
};
export const EmailThreadMessage = ({
body,
sentAt,
participants,
+ isExpanded = false,
}: EmailThreadMessageProps) => {
- const [isOpen, setIsOpen] = useState(false);
+ const [isOpen, setIsOpen] = useState(isExpanded);
const from = participants.find((participant) => participant.role === 'from');
const receivers = participants.filter(
diff --git a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/IntermediaryMessages.tsx b/packages/twenty-front/src/modules/activities/emails/right-drawer/components/IntermediaryMessages.tsx
new file mode 100644
index 000000000..a830e8367
--- /dev/null
+++ b/packages/twenty-front/src/modules/activities/emails/right-drawer/components/IntermediaryMessages.tsx
@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import { IconArrowsVertical } from 'twenty-ui';
+
+import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
+import { EmailThreadMessage as EmailThreadMessageType } from '@/activities/emails/types/EmailThreadMessage';
+import { Button } from '@/ui/input/button/components/Button';
+
+const StyledButtonContainer = styled.div`
+ border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+ padding: 16px 24px;
+`;
+
+export const IntermediaryMessages = ({
+ messages,
+}: {
+ messages: EmailThreadMessageType[];
+}) => {
+ const [areMessagesOpen, setAreMessagesOpen] = useState(false);
+
+ if (messages.length === 0) {
+ return null;
+ }
+
+ return areMessagesOpen ? (
+ messages.map((message) => (
+
+ ))
+ ) : (
+
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx b/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx
index e80b0a4e9..40360a96c 100644
--- a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx
@@ -5,8 +5,10 @@ import { FetchMoreLoader } from '@/activities/components/CustomResolverFetchMore
import { EmailLoader } from '@/activities/emails/components/EmailLoader';
import { EmailThreadHeader } from '@/activities/emails/components/EmailThreadHeader';
import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
+import { IntermediaryMessages } from '@/activities/emails/right-drawer/components/IntermediaryMessages';
import { useRightDrawerEmailThread } from '@/activities/emails/right-drawer/hooks/useRightDrawerEmailThread';
import { emailThreadIdWhenEmailThreadWasClosedState } from '@/activities/emails/states/lastViewableEmailThreadIdState';
+import { EmailThreadMessage as EmailThreadMessageType } from '@/activities/emails/types/EmailThreadMessage';
import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
@@ -20,6 +22,17 @@ const StyledContainer = styled.div`
position: relative;
`;
+const getVisibleMessages = (messages: EmailThreadMessageType[]) =>
+ messages.filter(({ messageParticipants }) => {
+ const from = messageParticipants.find(
+ (participant) => participant.role === 'from',
+ );
+ const receivers = messageParticipants.filter(
+ (participant) => participant.role !== 'from',
+ );
+ return from && receivers.length > 0;
+ });
+
export const RightDrawerEmailThread = () => {
const { thread, messages, fetchMoreMessages, loading } =
useRightDrawerEmailThread();
@@ -44,6 +57,18 @@ export const RightDrawerEmailThread = () => {
return null;
}
+ const visibleMessages = getVisibleMessages(messages);
+ const visibleMessagesCount = visibleMessages.length;
+ const is5OrMoreMessages = visibleMessagesCount >= 5;
+ const firstMessages = visibleMessages.slice(
+ 0,
+ is5OrMoreMessages ? 2 : visibleMessagesCount - 1,
+ );
+ const intermediaryMessages = is5OrMoreMessages
+ ? visibleMessages.slice(2, visibleMessagesCount - 1)
+ : [];
+ const lastMessage = visibleMessages[visibleMessagesCount - 1];
+
return (
{
) : (
<>
- {messages.map((message) => (
+ {firstMessages.map((message) => (
{
sentAt={message.receivedAt}
/>
))}
+
+