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) => ( + + )) + ) : ( + +